> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/german/plain-jane-interactive/pages-and-menus/collection-list-page.md). # Seite mit Kollektionenliste Für Plain Jane und Plain Jane Interactive > **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:** * 📧 **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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/pages-and-menus/collection-list-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.