# 4. Erstellen und Anpassen Ihrer Produktseite

{% embed url="<https://youtu.be/AOjRMSNwDZI>" %}

> 📓 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`.

<figure><img src="https://745585625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-26b0ac0faddb78fdbcabd581949b16609e550eb3%2F01-product-template.png?alt=media" alt="Product page template in theme customizer"><figcaption><p>Produktseitenvorlage im Theme-Customizer</p></figcaption></figure>

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:

<figure><img src="https://745585625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-063e17db3d840e566a6f3aefb043ee11a303bf01%2F02-product-section-showcase.png?alt=media" alt="Product Section 1 (Showcase) settings"><figcaption><p>Produktbereich 1 (Showcase) Einstellungen und Layout-Optionen</p></figcaption></figure>

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

<figure><img src="https://745585625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-6206954acf4635f6173a2878ce73d687b9892136%2F03-product-section-thumbnail.png?alt=media" alt="Product Section 2 (Thumbnail) settings"><figcaption><p>Produktbereich 2 (Miniaturansicht) Layout-Alternative</p></figcaption></figure>

> ⚠️ Einige Einstellungen (wie Spalten) sind nur verfügbar, wenn die Galerie links ist.

<figure><img src="https://745585625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-e121c9dc06e40f193d4de703c35104ee8bdbda83%2F04-product-image-gallery.png?alt=media" alt="Product image gallery settings"><figcaption><p>Einstellungen und Anpassungsoptionen der Produktbild-Galerie</p></figcaption></figure>

***

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