# 4. Erstellen und Anpassen Ihrer Produktseite {% embed url="" %} > 📓 Hinweis: Es gibt eine **neue Produktbereich-Showcase** Layout verfügbar, das in diesem Video nicht behandelt wird. Für Einrichtungsanweisungen und Details besuchen Sie: [Produktbereich-Showcase](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/product-section-showcase) ### Was Sie lernen werden * Wie man das Produktseiten-Layout in Plain Jane v3 und Interactive v2 anpasst * Alle Blocktypen und Styling-Optionen innerhalb des Produktbereichs * Wie man den Scroll-Layout (archivierte Version) Produktbereich verwendet * Wo man Galeriegröße, Button-Stile, Akkordeons und mehr anpasst > 📓 Hinweis: Das `Scroll-Layout` (früher genannt `Archiviertes Layout`) ist eine ältere Alternative zum standardmäßigen Produktbereich. Es ist weiterhin zur Nutzung verfügbar, bietet jedoch keine blockbasierte Anpassung. *** ### 🛠️ Zugriff auf die Produktseite im Theme-Editor 1. Gehen Sie zu **Onlineshop** > **Themes** > **Passen Sie**. 2. Verwenden Sie das Dropdown-Menü oben in der Mitte, um auszuwählen `Produkte > Standardprodukt`. 3. Um ein anderes Produkt zu Vorschau zu zeigen, klicken Sie **Ändere** in der Vorschauleiste und wählen Sie einen anderen Artikel aus. *** ### 🧱 Kern-Produktbereichs-Blöcke Die Produktseite besteht aus einem `Produktabschnitt` und einzelnen **Blöcken** darunter. Sie können jeden einzelnen neu anordnen, entfernen oder anpassen. **Häufige Blöcke:** * **Im Angebot-Label**: Benutzerdefinierte Farbe, Innenabstand und Abstand * **Überschrift**: Steuert die Anzeige des Produktnamens * **SKU**: Optional, zeigt die SKU an, falls vorhanden * **Preis**: Anzeige mit oder ohne Währungssymbol * **Beschreibung**: Unterstützt Wortbegrenzung und "Mehr lesen"-Link * **Galerie**: Gesteuert über die übergeordneten Produktbereich-Einstellungen * **Buttons**: In den Warenkorb und Varianten-Auswahl * **Akkordeons**: Verwenden Sie sie für Größentabellen, Rückgabebedingungen, FAQs usw. > 💡 Tipp: Um einen Block hinzuzufügen, klicken Sie auf das `Produktabschnitt`, dann `Block hinzufügen`. *** ### 🎛️ Produktbereich-Layout-Einstellungen Klicken Sie auf die oberste Ebene **Produktabschnitt** um auf diese Layout-Optionen zuzugreifen: * **Bildposition**: `Links` oder `Rechts` * **Einblend-Animation**: Steuert, wie das Produkt eingeblendet wird * **Galerie-Spalten**: Von 1 bis 6 (nur verfügbar, wenn die Galerie links ist) * **Bildgröße (Desktop & Mobil)**: Verwenden Sie Schieberegler, um anzupassen > ⚠️ Einige Einstellungen (wie Spalten) sind nur verfügbar, wenn die Galerie links ist. *** ### 🧩 Zusätzliche Block-Einstellungen #### Im Angebot-Label * Ändern Sie Hintergrund- und Textfarbe des Labels * Passen Sie den Abstand um das Abzeichen an #### Preis-Anzeige * Währungssymbol umschalten * Schriftgröße für Luxus-/Minimalstile anpassen #### Beschreibungs-Block * Farbe, Ränder und Wortbegrenzung festlegen * Aktiviert "Mehr lesen"-Erweiterungslink #### Buttons und Varianten * Weiteres Produkt-Button aktivieren/deaktivieren * Eckenradius, Ränder und Abstände anpassen #### Akkordeons * Mehrere hinzufügen: z. B. `Größentabelle`, `Rückgaben/Austausch` * Titel und Randabstände anpassen *** ### 🗂️ Scroll-Layout Produktbereich (Archiviert) Das Scroll-Layout ist eine archivierte Version des Produktbereichs, die eine vollständige vertikale Galerie anzeigt. #### Wie man es verwendet: 1. Klicken Sie **Abschnitt hinzufügen** > `Produktbereich Scroll` 2. Blenden Sie den aktuellen Produktbereich aus, um Duplikate zu vermeiden 3. Passen Sie ihn mit dem rechten Einstellungsfeld an (diese Version verwendet keine Blöcke) #### Wesentliche Unterschiede: * Vertikale Scroll-Galerie mit allen gestapelten Bildern * Ideal für Mobilgeräte und lange Produktgeschichten * Keine Block-Unterstützung — alle Einstellungen werden im Bereichpanel konfiguriert * Weniger Anpassungsfunktionen (z. B. keine abgerundeten Ecken) > 💡 Tipp: Verwenden Sie dies, wenn Sie das alte Scroll-Erlebnis früherer Theme-Versionen bevorzugen. *** ### ➕ Zusätzliche Bereiche zur Produktseite hinzufügen Sie können andere Shopify-Theme-Bereiche zur Produktseite hinzufügen, genau wie bei jeder anderen Seite: * `Bild-Stream` * `E‑Mail‑Anmeldung` * `Diashow` * `Kollektionsliste` Ordnen und passen Sie diese an, um zu Ihrem Markenstil zu passen. ### **Brauchen Sie Hilfe?** * 💬 **Für technischen Support treten Sie unserem 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: 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: ``` GET https://docs.openspaces.design/german/readme-1/getting-started/4.-creating-and-customizing-your-product-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.