4. Erstellen und Anpassen Ihrer Produktseite

Für Plain Jane und Interactive

📓 Hinweis: Es gibt ein neues 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

  • So passen Sie das Produktseiten-Layout in Plain Jane v3 und Interactive v2 an

  • Alle Blocktypen und Styling-Optionen innerhalb des Produktbereichs

  • Wie man den Scroll-Layout (archivierte Version) Produktbereich verwendet

  • Wo Sie Galeriegröße, Button-Stile, Akkordeons und mehr anpassen

📓 Hinweis: Das Scroll-Layout (früher genannt Archiviertes Layout) ist eine ältere Alternative zum standardmäßigen Produktbereich. Es ist weiterhin zur Verwendung 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 sehen, klicken Sie Ändere in der Vorschauleiste und wählen Sie einen anderen Artikel.

🧱 Kern-Produktbereichs-Blöcke

Die Produktseite besteht aus einem Produktbereich und einzelnen Blöcken darunter. Sie können jeden neu anordnen, entfernen oder anpassen.

Häufige Blöcke:

  • Im Angebot-Label: Benutzerdefinierte Farbe, Innenabstand und Abstand

  • Überschrift: Steuert die Anzeige des Produkttitels

  • Artikelnummer (SKU): Optional, zeigt die SKU an, falls vorhanden

  • Preis: Anzeige mit oder ohne Währungssymbol

  • Beschreibung: Unterstützt Wortbegrenzung und „Mehr lesen“-Link

  • Galerie: Wird über die übergeordneten Produktbereich-Einstellungen gesteuert

  • Schaltflächen: In den Warenkorb und Varianten-Auswahl

  • Akkordeons: Verwenden Sie sie für Größentabellen, Rückgaberichtlinien, FAQs usw.

💡 Tipp: Um einen Block hinzuzufügen, klicken Sie auf das Produktbereich, dann Block hinzufügen.

🎛️ Produktbereich-Layout-Einstellungen

Klicken Sie auf die oberste Ebene Produktbereich um auf diese Layout-Optionen zuzugreifen:

  • Bildposition: Linken oder Rechten

  • Fade-Animation: Steuert, wie das Produkt eingeblendet wird

  • Galeriespalten: 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 Badge an

Preisanzeige

  • Währungssymbol umschalten

  • Schriftgröße für Luxus-/Minimalstile anpassen

Beschreibungs-Block

  • Farbe, Ränder und Wortbegrenzung festlegen

  • Aktiviert "Mehr lesen"-Erweiterungslink

Schaltflächen und Varianten

  • Next-Product-Button aktivieren/deaktivieren

  • Eckenradius, Ränder, 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.

So verwenden Sie es:

  1. Klicken Sie Abschnitt hinzufügen > Produktbereich Scroll

  2. Blenden Sie den aktuellen Produktbereich aus, um Duplikate zu vermeiden

  3. Anpassen über das Einstellungsfeld rechts (diese Version verwendet keine Blöcke)

Wesentliche Unterschiede:

  • Vertikale Scroll-Galerie mit allen Bildern gestapelt

  • Ideal für Mobilgeräte und lange Produktgeschichten

  • Keine Block-Unterstützung – alle Einstellungen werden im Bereich der Sektion konfiguriert

  • Weniger Anpassungsfunktionen (z. B. keine abgerundeten Ecken)

💡 Tipp: Verwenden Sie dies, wenn Sie das alte Scroll-Erlebnis aus früheren Theme-Versionen bevorzugen.

➕ Zusätzliche Abschnitte zur Produktseite hinzufügen

Sie können andere Shopify-Theme-Abschnitte zur Produktseite hinzufügen wie bei jeder anderen Seite:

  • Bilder-Stream

  • E-Mail-Anmeldung

  • Diashow

  • Collection List

Ordnen Sie diese neu an und passen Sie sie an, um Ihrem Markenstil zu entsprechen.

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

Vorherige3. Erstellen und Anpassen Ihrer KategorieseiteNächste5. Einrichten von Passwortseiten und E-Mail-Wartelisten

Zuletzt aktualisiert