# Kategorieseite

> **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:

| Layout-Typ                   | Beschreibung                                                                         |
| ---------------------------- | ------------------------------------------------------------------------------------ |
| **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:

1. Gehen Sie zu **Onlineshop > Navigation** im Shopify-Admin
2. Klicken Sie **Menü hinzufügen** und benennen Sie es (z. B. `Shop-Menü`)
3. Fügen Sie Links für Ihre Kategorien hinzu (z. B. Tops, Hosen, Accessoires)
4. (Optional) Elemente für zweite/dritte Ebenen verschachteln
5. Klicken Sie **Speichern**

Dann:

1. Öffnen Sie die **Theme-Editor**
2. Wählen Sie **Collections > \[Ihre Collection]** aus dem oberen Dropdown
3. Klicken Sie auf `Classic Collection` oder `Seitenleisten-Kollektion`
4. Unter **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`

```
Um benutzerdefinierte Hintergrundfarben zu aktivieren:
- Verwenden Sie transparente PNGs
- Schalten Sie "Hintergrund transparent machen" aus
```

***

### 🔍 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:

1. Gehen Sie zu **Produkte > Kollektionen** im Shopify-Admin
2. Wählen Sie Ihre Kollektion und klicken Sie **Sortieren > Manuell**
3. 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:** <support@openspaces.design>
* 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website