Produktinformationen

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Shopify-Dokumentation zu Metafeldern und dynamischen Quellen
3. Company XYZ-Dokumentation zum Titel-Block
4. Company XYZ-Dokumentation zum Preis-Block
5. Company XYZ-Dokumentation zum Varianten-Auswahl-Block
6. Company XYZ-Dokumentation zum Mengen-Auswahl-Block
7. Company XYZ-Dokumentation zum Buy-Buttons-Block
8. Company XYZ-Dokumentation zum Beschreibungs-Block
9. Company XYZ-Dokumentation zum Accordion-Block
10. Company XYZ-Dokumentation zum Block für ergänzende Produkte
11. Company XYZ-Dokumentation zu den Innenabstand-Einstellungen des Abschnitts
12. Company XYZ-Dokumentation zu den Einstellungen für Abschnittshintergründe
13. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
14. Company XYZ-Dokumentation zu den Einstellungen für Layout-Breiten

Hilfreiche Videos

Shopify-Video: 9 Tipps zur Optimierung Ihrer Produktseiten für mehr Verkäufe

Shopify-Video: 9 Tipps zur Optimierung Ihrer Produktseiten für mehr Verkäufe

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Dieser Abschnitt ist der Hauptbereich für Produktdetails in Produktvorlagen. Er kombiniert die Produktgalerie mit einem anpassbaren Stapel von Inhaltsblöcken, sodass Sie steuern können, wie Käufer Medien ansehen, Optionen vergleichen, Details lesen und zum Kauf wechseln. Einen umfassenderen Überblick über das Erstellen von Theme-Layouts finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Dieser Abschnitt ist dafür ausgelegt, Block für Block neu angeordnet zu werden. In den meisten Setups ist die stärkste Ausgangsstruktur Titel, Preis, Variantenauswahl, Mengenauswahl, Kauf-Schaltflächen und dann unterstützende Inhalte wie Beschreibung, Akkordeons und vertrauensbildende Blöcke.

Wenn Ihr Katalog sehr unterschiedliche Produkttypen umfasst, bietet Ihnen dieser Abschnitt genug Flexibilität, um eine einheitliche Seitenstruktur beizubehalten und dennoch die inhaltliche Gewichtung für jedes Produkt anzupassen.

Galerieeinstellungen

Die Galerieeinstellungen steuern, wie Produktmedien auf Desktop und Mobilgeräten angezeigt werden. Sie können Seitenverhältnisse, das Verhältnis zwischen der Galerie und den Inhalts-Spalten, die Galerieposition auf größeren Bildschirmen und den je Gerät verwendeten Galeriestil ändern.

Auf dem Desktop haben Sie mehr Kontrolle über das Layout, einschließlich der Seite, auf der die Galerie angezeigt wird, und welche Spalte mehr Platz erhält. Auf Mobilgeräten wird der Abschnitt immer zu einer einzelnen Spalte gestapelt, daher ist die wichtigste Entscheidung, welcher Galeriestil sich auf einem kleineren Bildschirm am einfachsten durchsuchen lässt.

Verwenden Sie visuellere Galeriestile für Produkte, die von Fotografie, Oberflächen oder Nahaufnahmen leben. Verwenden Sie einfachere Layouts, wenn die Seite Spezifikationen, Variantenauswahl oder längeren Produkttext priorisieren soll.

Die Galerie kann auch auf Variantenänderungen reagieren. Das ist besonders nützlich für farb- oder oberflächenbasierte Produkte, bei denen die ausgewählte Option die sichtbaren Medien sofort ändern sollte.

Das variantenbasierte Verhalten der Galerie erfordert einen Block Variant selector in diesem Abschnitt. Ohne ihn wird die Galerie nicht auf Optionsänderungen aktualisiert.

Zoom- und Videosteuerungen helfen dabei, das Medienerlebnis zu verfeinern. Lightbox-Zoom eignet sich gut, wenn Kunden Textur oder Details prüfen müssen, während Autoplay-Video am besten für kurze Clips statt für lange Demonstrationen funktioniert.

Tipp

Wenn Sie Autoplay-Video aktivieren, lassen Sie es stummgeschaltet, damit das Browsen reibungsloser verläuft.

Slideshow-Einstellungen

Diese Einstellungen gelten, wenn die Galerie ein Diashow-Layout verwendet. Sie können die sichtbare Folienbreite, Animationsstil und -geschwindigkeit, Autoplay, Schleifen, Navigation und Seitennummerierung steuern.

Eine Diashow mit Vorschaubildern der nächsten Folie kann große Medienmengen interaktiver wirken lassen. Wenn Sie zur Überblendungsanimation wechseln, verhält sich die Galerie eher wie eine Einzelslide-Präsentation, sodass einige Optionen der Mehrslide-Oberfläche weniger nützlich werden.

Autoplay eignet sich am besten für kurze visuelle Sequenzen. Bei Produkten, bei denen Käufer Standbilder sorgfältig vergleichen müssen, ist die manuelle Navigation in der Regel die sicherere Wahl.

Unterstützte Blocktypen

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Complementary products
7. Contact form
8. Custom liquid
9. Description
10. Heading
11. Icon with text
12. Image
13. Price
14. Quantity selector
15. Rich text
16. Separator
17. Social media icons
18. Title
19. Testimonial
20. Variant selector
21. Video

Wichtige Blockhinweise

Titel

Der Block Title zeigt den Produktnamen an und kann auch Freigabe- oder Druckaktionen anzeigen. Er funktioniert normalerweise am besten am Anfang des Inhaltsstapels. Mehr über den Titel.

Preis

Der Block Price zeigt den aktuellen Preis und optionale Hinweistexte zu Richtlinien an. Platzieren Sie ihn in der Nähe von Titel und Kaufsteuerungen, damit Käufer Preis und Optionen vergleichen können, ohne hin und her zu scrollen. Mehr über den Preis.

Variantenauswahl

Der Block Variant selector ermöglicht es Käufern, Produktoptionen auszuwählen, und kann auch Farb- oder Bild-Farbfelder anzeigen. Außerdem aktiviert er das variantenbasierte Galerieverhalten des Abschnitts. Mehr über den Variantenauswahl.

Dropdowns sind normalerweise für lange Optionslisten einfacher, während Pills oder Farbfelder für kurze, visuelle Optionssätze besser geeignet sind. Wenn Sie Farbfelder verwenden, stellen Sie sicher, dass die Optionsnamen exakt mit Ihrer Produktoptionsbenennung übereinstimmen.

Hinweis

Bild-Farbfelder überschreiben Farbfelder, wenn beide für dieselbe Option konfiguriert sind.

Mengenauswahl

Der Block Quantity selector fügt Mengensteuerungen und optionale Verfügbarkeitsmeldungen hinzu. Er ist am nützlichsten, wenn er direkt über oder unter den Kauf-Schaltflächen platziert wird. Mehr über den Mengenauswahl.

Wenn Sie eine Niedrigbestandsmeldung aktivieren, setzen Sie den Schwellenwert niedrig genug, damit er glaubwürdig und produktspezifisch wirkt.

Kauf-Buttons

Der Block Buy buttons ist der Hauptbereich für die Kaufaktion. Er kann auch zusätzliche Checkout-Schaltflächen, Details zum kostenlosen Versand, Informationen zur lokalen Abholung, Zahlungssymbole, Optionen für den Geschenkeempfänger von Geschenkkarten, Hinweise zu Ratenzahlungen und eine Sticky-Leiste beim Scrollen anzeigen. Mehr über den Kauf-Buttons.

Verwenden Sie unterstützende Kaufdetails gezielt. Zu viele Ergänzungen rund um die Hauptschaltfläche können den Kaufbereich überladen wirken lassen, insbesondere auf Mobilgeräten.

Wenn Sie hier die Schaltflächenfarben überschreiben, prüfen Sie sowohl den Standard- als auch den Hover-Zustand, damit die primäre Aktion klar und lesbar bleibt.

Beschreibung

Der Block Description zeigt die Hauptproduktbeschreibung an und kann erweiterbar gemacht werden. Mehr über den Beschreibung.

Erweiterbare Beschreibungen eignen sich gut für längeren Produkttext. Bei kürzeren Beschreibungen wirkt das sofortige Anzeigen des vollständigen Texts in der Regel einfacher.

Akkordeon

Der Block Accordion ist nützlich für FAQs, Materialien, Pflegehinweise, Größeninformationen und Versanddetails. Er kann direkt eingegebene Inhalte verwenden oder Inhalte aus anderen Quellen beziehen. Mehr über den Akkordeon.

Trennen Sie Themen in unterschiedliche Zeilen, statt alles in einem langen Panel zusammenzufassen. So lassen sich die sekundären Details leichter überblicken. Für Inhalte, die aus Produktdaten stammen, siehe die Shopify-Dokumentation zu Metafeldern und dynamischen Quellen

Ergänzende Produkte

Der Block Complementary products fügt verwandte Artikel hinzu, die zum aktuellen Produkt passen. Er eignet sich gut für Zubehör, Nachfüllungen oder routinemäßige Zusatzartikel. Mehr über den Ergänzende Produkte.

Wählen Sie ein kompaktes Layout, wenn dieser Block auf einer dichten Produktseite erscheint. Wenn Sie ein Diashow-Layout verwenden, halten Sie die Navigation sichtbar, damit die Empfehlungen nicht verborgen wirken.

Unterstützende Inhaltsblöcke

Verwenden Sie die übrigen Blöcke, um die Seite auf die Produktgeschichte und den Kaufablauf abzustimmen.

1. Verwenden Sie Benefits, Icon with text oder Testimonial, um Vertrauen und Wert zu stärken.
2. Verwenden Sie Image oder Video, um zusätzliche visuelle Inhalte in der Informationsspalte hinzuzufügen.
3. Verwenden Sie Rich text, Heading und Separator, um längere Inhalte klarer zu strukturieren.
4. Verwenden Sie Button für sekundäre Aktionen wie Größentabellen oder Pflegeseiten.
5. Verwenden Sie Social media icons, Contact form, Custom liquid oder App-Blöcke nur, wenn sie ein klares Ziel für die Produktseite unterstützen.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb dieses Abschnitts. Auf Produktseiten sorgt ein engerer Abstand meist dafür, dass Galerie und Kaufsteuerungen näher am oberen Bereich bleiben, während größerer Abstand ein redaktionelleres Gefühl erzeugt.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem gesamten Produktabschnitt eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinzuzufügen. Das kann helfen, einen stärkeren Markenlook zu erzeugen, aber dezente Gestaltungen funktionieren in einem Abschnitt, der bereits viele funktionale Inhalte enthält, meist am besten.

Achtung

Starke Hintergründe oder Overlays können die Lesbarkeit von Preisen, Optionsauswahlen und Kauf-Schaltflächen verringern. Prüfen Sie den Kontrast nach dem Gestalten des Abschnitts erneut.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten im Abschnitt eine optionale Linie hinzu. Sie sind besonders nützlich, wenn der Produktbereich eine klarere visuelle Trennung von benachbarten Inhalten braucht.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die Inhaltsbreite als auch die äußere Abschnittsbreite. Breitere Layouts eignen sich für bildstarke Produkte, während schmalere Layouts die Lesbarkeit für textlastige Produktseiten verbessern können.

Der Editor kann es erschweren, Breitenänderungen genau zu beurteilen. Prüfen Sie daher wichtige Layoutänderungen auf der Live-Seite, bevor Sie sie abschließen.

Nutzungshinweise

1. Halten Sie Kaufaktionen zusammen. Platzieren Sie Titel, Preis, Variantenauswahl, Mengenauswahl und Kauf-Schaltflächen nah beieinander, damit Käufer handeln können, ohne die Seite durchsuchen zu müssen.
2. Passen Sie die Medien an das Produkt an. Verwenden Sie reichhaltigere Galerie-Layouts für visuelle Produkte und einfachere Galerien, wenn Optionen, Spezifikationen oder Texte mehr Aufmerksamkeit brauchen.
3. Verwenden Sie Akkordeons für sekundäre Details. Verschieben Sie FAQs, Materialien, Versandhinweise und Pflegeinformationen in separate Accordion-Zeilen, damit der Hauptinhalt fokussiert bleibt.
4. Prüfen Sie den mobilen Ablauf. Da der Abschnitt auf kleineren Bildschirmen zu einer einzelnen Spalte wird, sollten Sie Medienreihenfolge, Blockstapelung und Sichtbarkeit der Kauf-Schaltflächen sorgfältig prüfen.
5. Überprüfen Sie beide Ansichtsgrößen. Desktop- und Mobile-Steuerelemente können Layout, Ausrichtung und Medienverhalten auf unterschiedliche Weise verändern. Prüfen Sie daher beide Ansichten vor der Veröffentlichung.
6. Achten Sie auf blockbedingte Änderungen. Das Hinzufügen oder Neuordnen von Blöcken kann das Gleichgewicht der Produktseite deutlich verändern. Prüfen Sie den Abschnitt daher erneut, wenn Sie den Inhaltsstapel ändern.
7. Bestätigen Sie Empfehlungen mit echten Produktdaten. Inhalte zu ergänzenden Produkten erscheinen nur, wenn der Produktkontext und zurückgegebene Artikel verfügbar sind. Leere Zustände sollten daher nicht als Einrichtungsfehler betrachtet werden.
8. Vorschau gestalteter Layouts außerhalb des Editors ansehen. Änderungen an Breite, Hintergrund und Abstand können auf der Live-Seite anders wirken als im Editor.