# 3. Erstellen und Anpassen Ihrer Kollektionen-Seite {% embed url="" %} ### 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. *** ### 🧭 Sidebar Collection (optional) 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?** * 💬 **Für technischen Support treten Sie unserem Discord bei:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/getting-started/3.-creating-and-customizing-your-collections-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.