3. Erstellen und Anpassen Ihrer Kollektionen-Seite

Für Plain Jane und Interactive

Was Sie lernen werden

  • Wie man Sammlungen in Shopify erstellt und organisiert

  • Wie man Menüs für Kategorieseiten erstellt und zuweist

  • Wie man die „Classic Collection“ und „Sidebar Collection“ im Plain Jane v3- und Interactive v2-Theme verwendet und anpasst

  • Wie man Designeinstellungen wie Abstände, Schriftarten, Farben und Anzeigeoptionen für Produkte bearbeitet

🛠️ Erste Schritte: Grundlagen der Shopify-Einrichtung

Dieser Abschnitt richtet sich an Anfänger, die ihren Shop zum ersten Mal einrichten.

1. Produktkollektionen erstellen

  1. Gehe zu deinem Shopify-Admin > Produkte > Sammlungen.

  2. Klicken Sie Sammlung erstellen.

  3. Benenne deine Sammlung (z. B. Oberteile, Unterteile, Accessoires).

  4. Setze den Sammlung Typ auf Manuell.

    ⚠️ Manuelle Sammlungen ermöglichen es dir, die Produktreihenfolge manuell zu steuern.

  5. Klicken Sie Speichern, verwende dann die Durchsuchen Schaltfläche, um Produkte hinzuzufügen.

Wiederhole dies für jede Kategorie.

2. Erstelle ein Menü für deine Kategoriesidebar

  1. Gehen Sie zu Onlineshop > Navigation.

  2. Klicken Sie Menü hinzufügen.

  3. Benenne es beispielsweise Shop-Menü.

  4. Füge Links wie hinzu:

    • Oberteile → Link zu deiner Oberteile Sammlung

    • Unterteile → Link zu deiner Unterteile Sammlung

    • Oberbekleidung, Schuhe, usw.

  5. Du kannst Elemente ziehen, um sie zu verschachteln (z. B. Shorts unter Unterteile).

  6. Klicken Sie Menü speichern.


🎨 Theme-Anpassung: Kategorieseiten

Diese Anweisungen gelten sowohl für Plain Jane v3 und Interactive v2 Themes.

  1. Navigieren Sie zu Onlineshop > Themes > Passen Sie

  2. Verwende das Seiten-Auswahlmenü, um zu wechseln zu Sammlungen Vorlage

Collections page template in theme customizer
Kategorieseiten-Vorlage im Theme-Editor

Classic Collection Abschnitt

  1. Gehen Sie zu Onlineshop > Themes > Passen Sie.

  2. Wähle im linken Bereich die Kategorieseite Vorlage.

  3. Suche nach einem Abschnitt mit der Bezeichnung Classic Collection.

Wichtige Einstellungen:

Collection products display settings
Anzeigeeinstellungen für Produkte in der Sammlung und Anpassungsoptionen
  • Menü auswählen: Weise das benutzerdefinierte Shop-Menü zu, das du erstellt hast.

  • Menüposition: Wähle Links oder Rechts.

  • Textausrichtung: Optionen für Links, Zentriert, oder Rechts.

  • Schriftgröße & Abstände: Passe Menü- und Linkabstände an.

  • Menüfarben: Passe Hintergrund- und Textfarben an.

  • Produktnamen/Preise anzeigen: Sichtbarkeit umschalten und Schriftgröße sowie Farbe anpassen.

  • Produktrahmen: Ränder und Hover-Effekte hinzufügen.

  • Radius des Produkt-Hintergrunds: Ecken von scharf bis abgerundet anpassen.

  • Hintergrund transparent machen: Funktioniert am besten mit transparenten PNGs.

Collection layout options Classic vs Sidebar
Layoutoptionen für Sammlungen, die Classic- und Sidebar-Varianten zeigen

Such- und Sortieroptionen

  • Position: Symbole ausrichten Links, Zentriert, oder Rechts.

  • Farben: Passe Symbol- und Dropdown-Menüfarben an.

  • Suchüberlagerungs-Einstellungen:

    • Passe Hintergrund-Deckkraft

    • Legen Sie Hintergrundfarbe des Suchfelds

  • Sortiermenü: Wähle, wie Produkte sortiert werden: Empfohlen, Neueste, Preis, usw.

Sale-Labels

  • Zeige Rabattetiketten wie „Im Angebot“ an

  • Etikettentext anpassen Schriftgröße, Textfarbe, und Hintergrundfarbe

Produkte mit PNGs hochladen

💡 Tipp: Verwende transparente PNGs, wenn du Hintergrundfarben mit dem Theme-Editor steuern möchtest.


Möchtest du ein traditionelleres Layout? Verwende stattdessen die Sidebar Collection.

  1. In derselben Kategorieseite Vorlage, verstecke den Classic Collection Abschnitt.

  2. Aktiviere stattdessen die Sidebar Collection .

Sidebar Collection Einstellungen:

  • Weise ein Menü

  • Sidebar-Position: Links oder Rechts

  • Sidebar-Hintergrund hochladen (genannt "Skin")

  • Passe Opazität, Schatten, und Fixiertes Scrollen Verhalten

💡 Tipp: Fixierte Sidebars bleiben beim Scrollen sichtbar.

Alle anderen Anzeigeeinstellungen wie Produktinformationen, Labels und Such-/Sortiersymbole funktionieren genauso wie im Classic Collection Abschnitt.


✅ Abschließende Hinweise

  • Klicken Sie immer Speichern im Theme-Editor nach Änderungen.

  • Wenn Änderungen nicht sofort angezeigt werden, versuche die Seite zu aktualisieren.

  • Halte die Produktbildgrößen konsistent (z. B. 1000x1000px) für ausgerichtete Layouts.

Brauchen Sie Hilfe?

Zuletzt aktualisiert