4. Erstellen und Anpassen Ihrer Produktseite

Für Plain Jane und Interactive

📓 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

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: https://discord.gg/hcc2GvgZc6

• 📧 Schreiben Sie uns eine E-Mail an: [email protected]

• 💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website