# Seite mit Kollektionenliste

> **Was Sie lernen werden**
>
> * Wie Sie Ihre Seite mit der Sammlungsliste einrichten und gestalten
> * Wie Sie 3D-Sammlungskarten anpassen
> * Wo Sammlungen, Bilder und visuelle Effekte zugewiesen werden

***

### 🧭 Wo Sie es finden

Im Shopify Theme-Editor:

1. Gehen Sie zu **Online-Shop > Designs**
2. Klicken Sie **Passen Sie** in Ihrem aktiven Theme
3. Verwenden Sie das obere Dropdown-Menü, um zu navigieren zu `Sammlungsliste`

***

### 🗂 Abschnittsübersicht

Die Seite mit der Sammlungsliste ist ein stilisiertes Raster ausgewählter Sammlungen mit vollständig anpassbaren **3D-Sammlungskarten**. Jede Karte kann mit einer bestimmten Sammlung verlinken und auf Maus-Hover mit visuellen Effekten und Textüberlagerungen reagieren.

#### 🧱 Sammelkarte-Blöcke

Jede Karte ermöglicht Ihnen:

* Eine bestimmte **Sammlung** auszuwählen, um anzuzeigen
* Zuweisen **Desktop-** und **mobile Vorschaubilder**
* Steuern **Hover-Effekte** und Text **Ausrichtung**
* Passe **Farben**, **Schatten**, **Abstand**, und **Hover-Animation**

***

🖼️ Einstellen des Vorschaubilds

> ⚠️ Vorschaubilder für Sammlungskarten werden direkt aus der Sammlungskonfiguration im Shopify-Admin gezogen.

1. Gehen Sie zu **Shopify Admin > Produkte > Sammlungen**
2. Klicken Sie auf die Sammlung, die Sie verwenden möchten
3. Laden Sie ein Vorschaubild hoch
4. Kehren Sie zum Theme-Editor zurück, um die Karte weiter zu gestalten

***

### 🎛 Wichtige Einstellungen (pro Sammlungskarte)

#### ✅ Sichtbarkeitsumschalter

* `Sammlungsbild anzeigen`
* `Überschrift anzeigen`
* `Beschreibung anzeigen`
* Umschalten von hover-spezifischen Inhalten (Bild, Überschrift, Beschreibung)

#### 🌀 Karten-Effekte (nur Desktop)

* `Tilt aktivieren`
* `Tilt-Glanz aktivieren`

> 💡 Effekte werden nur auf der **Live-Seite**angezeigt, nicht in der Vorschau des Theme-Editors.

#### 🎨 Farben

* Hintergrundfarbe
* Hover-Hintergrundfarbe
* Überschrift- und Beschriftungsfarben (Standard und Hover)

#### 🎯 Ausrichtung und Position

Passe **header** und **Beschreibung** Ausrichtung und pixelgenaue Positionierung mittels:

* `Oben/Unten` und `Links/Rechts` Schieberegler
* Separate Optionen für **Standard** und **Hover** Zustände

***

### 📐 Kartendesign-Einstellungen

* **Kartenradius**: Rundet die Ecken der Karte (z. B., `30px`)
* **Benutzerdefinierter Hover-Titel & Beschreibung**: Optionale Textüberlagerung beim Hover
* **Kartenhintergrund beim Hover**: Alternatives Hintergrundbild hochladen
* **Verlaufüberlagerungen**: Oben/unten Verläufe beim Hover mit Farbe + Deckkraft hinzufügen

***

### 📏 Bildgrößen

* **Abmessungen der Desktop-Karte**: `740px x 350px`
* **Abmessungen der Mobilkarte**: `315px x 350px`

> ⚠️ Stellen Sie sicher, dass alle Ihre Sammlungskarten konsistente Bildgrößen verwenden, damit das Layout sauber bleibt

***

### 🎵 Bonus-Tipp

Wenn Sie den **Musikplayer** Abschnitt mit Sammlungsliste verwenden, denken Sie daran:

> ⚠️ Der Musikspieler **funktioniert nur mit direkten `.mp3` Datei-URLs.** Links zu Streaming-Plattformen (z. B. Spotify, Apple Music) funktionieren nicht.

***

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