> 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/product-page/product-section-showcase.md). # Produktbereich (Showcase) > **Was Sie lernen werden** > > * Einrichtung und Anpassung des Produktlayouts „Showcase“ in Plain Jane > * Wichtige Designoptionen wie mobile Ausrichtung, Bildlaufleisten, Zoom und Popup-Styling > * Wann dieses Layout für das beste Kundenerlebnis verwendet werden sollte *** ### 🖼 Was ist das Showcase-Layout? Die **Showcase-Layout** bietet ein zentriertes Bildlayout mit Produktinformationen auf beiden Seiten. Es eignet sich hervorragend für minimalistische, moderne Shops, die Bilder hervorheben möchten und gleichzeitig Variantenwahl und Kaufbuttons leicht zugänglich halten wollen. Dieses Layout ist verfügbar in: * ✅ Plain Jane v3+ * ✅ Plain Jane Interactive v2+ *** ### 🔧 So aktivieren Sie das Showcase-Layout 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Verwenden Sie das obere Dropdown-Menü, um auszuwählen **Produkte > Standardprodukt** 3. Klicken Sie in der linken Seitenleiste **Abschnitt hinzufügen > Produktabschnitt \[Showcase]** 4. Blenden Sie alle anderen Produkt-Layout-Abschnitte aus (wie `Produktabschnitt` oder `Produktabschnitt [Scroll]`) 5. Klicken Sie in den Abschnitt, um Ihr Layout zu konfigurieren > 💡 Tipp: Sie können diesen Abschnitt zur einfacheren Navigation über das „...“-Menü neben dem Abschnittstitel umbenennen. *** ### ⚙️ Layout- & Anzeigeeinstellungen Zu finden in der rechten Seitenleiste, nachdem Sie den `Produktabschnitt [Showcase] ausgewählt haben` Abschnitt. #### Layout Desktop * Wählen Sie aus mehreren Layoutstilen zur Anordnung von Galerie und Produktinfo * `Galerie zentriert – Varianten rechts` *(Standard)* #### Ausrichtung der Produktinfo auf Mobilgeräten * Text der Produktinformationen auf Mobilgeräten ausrichten zu `Links`, `Zentriert`, oder `Rechts` #### Beschreibung unter Buttons verschieben (Mobil) * Schalten Sie ein, um Beschreibungen und Akkordeons zu platzieren *unterhalb* des „In den Warenkorb“-Buttons *** ### 📊 Mobiler Bildlauf-Fortschrittsbalken Fügen Sie der mobilen Bildergalerie einen Scroll-Indikator hinzu: * **Farbverlauf der Spur** – Hintergrundleiste (Verlauf oder einfarbig) * **Indicator-Farbe** – Vordergrund-Scroll-Indikator *** ### 🔍 Zoom-Button (Mobil) * Umschalten, um das Bild-Zoom-Symbol auf Mobilgeräten ein-/auszublenden * Schaltflächenfarbe anpassen (`Farbe des Zoom-Buttons (Mobil)`) *** ### 🧾 Zusätzliche Info-Popup Diese Einstellung steuert das **Popup-Akkordeon** wenn Sie es für Dinge wie verwenden: * Größentabellen * Rückgaberichtlinien Anpassen: * Popup-Hintergrundfarbe * Verlaufsüberlagerungen * Transparenz-/Deckkraft-Einstellungen *** ### 🧪 Profi-Tipps * Verwenden Sie hochauflösende, quadratische oder hochformatige Produktbilder für die beste Wirkung * Fügen Sie Produkt-Akkordeons für ergänzende Infos wie Versand, Pflege oder Materialien hinzu * Dieses Layout passt gut zu minimalistischen Schriftarten und dezenten Theme-Farben > ⚠️ Warnung: Dieses Layout unterstützt keine Bild-Thumbnails oder Bild-Scrollen. Verwenden Sie `Thumbnail` oder `Scroll` Layouts, wenn Sie diese Funktionen benötigen. ### **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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/pages-and-menus/product-page/product-section-showcase.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.