Kategorieseite
Für Plain Jane und Plain Jane Interactive
Was Sie lernen werden
Der Unterschied zwischen Classic- und Sidebar-Collection-Layouts
Wie man ein benutzerdefiniertes Menü mit seinen Kategorieseiten verbindet
Tipps zur Anzeige von Produkten und zur Anpassung der Designeinstellungen
🧱 Optionen für Collection-Layouts
Plain Jane enthält zwei Layouttypen für Kategorieseiten:
Classic Collection
Minimales Design mit festem Kategorienmenü und Sortier-/Suchsymbolen
Seitenleisten-Kollektion
Enthält eine anpassbare Seitenleiste mit erweiterten Layout- und Hintergrundoptionen
Sie können zwischen diesen Layouts wechseln, indem Sie die Aktivierung/Deaktivierung des Classic Collection oder Seitenleisten-Kollektion Abschnitts im Theme-Editor.
💡 Tipp: Verwenden Sie immer nur einen Collection-Abschnitt gleichzeitig (den anderen ausblenden).
🔗 Verbinde ein benutzerdefiniertes Collection-Menü
Um ein benutzerdefiniertes Navigationsmenü für Ihre Kategorieseite zu erstellen:
Gehen Sie zu Onlineshop > Navigation im Shopify-Admin
Klicken Sie Menü hinzufügen und benennen Sie es (z. B.
Shop-Menü)Fügen Sie Links für Ihre Kategorien hinzu (z. B. Tops, Hosen, Accessoires)
(Optional) Elemente für zweite/dritte Ebenen verschachteln
Klicken Sie Speichern
Dann:
Öffnen Sie die Theme-Editor
Wählen Sie Collections > [Ihre Collection] aus dem oberen Dropdown
Klicken Sie auf
Classic CollectionoderSeitenleisten-KollektionUnter Collection-Menü auswählen, wählen Sie das gerade erstellte Menü aus
⚙️ Wichtige Layout-Einstellungen
🧭 Menü-Einstellungen
Position: Links oder rechts
Textausrichtung: Links, zentriert oder rechts
Schriftgröße und Abstand: Passen Sie den Abstand für oberste und verschachtelte Menül i nks an
🎨 Stil-Einstellungen
Menüfarben: Passen Sie Link-, Hover- und Hintergrundfarben an
Produkttitel & Preise: Anzeigen/ausblenden, Größe anpassen und Farben ändern
Produktetiketten: Aktivieren Sie "Im Angebot"-Markierungen mit benutzerdefinierten Farben und Größen
💡 Tipp: Verwenden Sie konsistente Bildabmessungen (z. B. 1000x1000px), um Produktraster auszurichten.
🖼 Produktbild-Styling
Produktrahmen: Fügen Sie eine Hover-Umrandung mit anpassbarer Farbe und Dicke hinzu
Bild-Ecken: Passen Sie den Hintergrundradius für scharfe oder abgerundete Kanten an
Hintergrundfarbe: Funktioniert nur, wenn Bilder transparent hochgeladen wurden
.png
🔍 Such- und Sortiersteuerung
Symbolposition: Links, zentriert oder rechts
Sichtbarkeit umschalten: Blenden Sie Symbole einzeln aus oder ein
Farbeinstellungen: Passen Sie Symbol- und Hintergrundfarben an
Suchleisten-Overlay: Passen Sie Deckkraft und Hintergrundfarbe an
Wenn Kunden auf das Filter- oder Sortiersymbol klicken:
Das Filtersymbol öffnet ein verschiebbares Such-Overlay
Das Sortiersymbol lässt Kunden nach Preis, Neuheiten, A–Z oder Empfohlen sortieren
🧰 Extras für Sidebar-Collections (nur Sidebar-Layout)
Seitenleisten-Skin hochladen: Fügen Sie ein Hintergrundbild oder Muster hinzu
Seitenleisten-Deckkraft: Steuern Sie die Transparenz der Seitenleiste
Sticky-Seitenleiste: Aktivieren Sie feste Position beim Scrollen
Seitenleisten-Schatten: Fügt eine subtile Kanten-Schatten für Tiefe hinzu
🛠 Manuelle Produkt-Sortierung
⚠️ Wichtig: Um die Produktreihenfolge in einer Kollektion zu steuern, setzen Sie den Sortiertyp auf Manuell.
Schritte:
Gehen Sie zu Produkte > Kollektionen im Shopify-Admin
Wählen Sie Ihre Kollektion und klicken Sie Sortieren > Manuell
Ziehen und ordnen Sie Produkte nach Bedarf neu
Diese Reihenfolge wird auf der Kategorieseite im Frontend angezeigt.
📌 Hinweise zu Produktbildern
Fehlplatzierte Produkttitel/-preise werden meist durch inkonsistente Bildgrößen verursacht
Verwenden Sie gleichmäßige quadratische Bilder (z. B. 1000x1000) für die beste visuelle Ausrichtung
Brauchen Sie Hilfe?
💬 Treten Sie unserer Community auf Discord bei: https://discord.gg/hcc2GvgZc6
📧 Schreiben Sie uns eine E-Mail an: [email protected]
💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website
Zuletzt aktualisiert