Vorgestelltes Produkt

Fügen Sie einer beliebigen Seite eine Produktgalerie, Kaufsteuerungen und unterstützende Inhalte hinzu.

Ausgewählte Links

Hilfreiche Videos

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

Video der Shopify Academy: Ihren Shop anpassen

Zeigen Sie eine vollständige Produktdetail- und Kauferfahrung auf fast jeder Seite. Dieser Abschnitt kombiniert die Galerie, Produktinformationen und flexible Inhaltsblöcke eines ausgewählten Produkts, sodass Sie fokussierte Landingpages, Homepage-Promotions oder redaktionelle Produkt-Features rund um einen einzelnen Artikel erstellen können. Einen umfassenderen Überblick darüber, wie Abschnitte und Blöcke im Theme-Editor funktionieren, finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Beginnen Sie mit der Auswahl des Produkts. Diese Auswahl steuert die Galerie, den Titel, den Preis, die Beschreibung, Varianten, lagerbezogene Steuerungen und die Kaufaktionen, die im gesamten Abschnitt verwendet werden.

Wenn kein Produkt ausgewählt ist, kann das Layout weiterhin allgemeine Inhaltsblöcke anzeigen, produktbezogene Blöcke und Kaufsteuerungen sind dann jedoch nicht nützlich.

Galerieeinstellungen

Verwenden Sie die Galerieeinstellungen, um festzulegen, wie Produktmedien auf Desktop und Mobilgeräten angezeigt werden. Sie können für jedes Gerät separate Seitenverhältnisse wählen, die Spaltenaufteilung für den Desktop steuern und die Galerie links oder rechts neben den Produktinformationen platzieren.

Der Galerie-Stil verändert das Erscheinungsbild des Abschnitts schnell. Layouts mit mehreren Bildern eignen sich gut, wenn Käufer Details über mehrere Fotos hinweg vergleichen müssen, während Slideshow eine kompaktere, stärker kontrollierte Darstellung erzeugt. None ist hilfreich, wenn Sie ein Layout mit Text im Vordergrund wünschen oder stattdessen separate Bild- und Videoblöcke verwenden möchten.

Das Verhalten des Variantenbilds bestimmt, wie die Galerie reagiert, wenn Käufer eine andere Variante auswählen. Default verknüpft die Medien mit der ausgewählten Variante, None lässt die Galerie unverändert, und Variant only schafft ein fokussierteres Erlebnis, indem nur die Bilder der ausgewählten Variante angezeigt werden.

Zoom- und Videosteuerungen verfeinern das Browserlebnis. Verwenden Sie Lightbox-Zoom, wenn Bilddetails wichtig sind, und setzen Sie Autoplay sparsam ein, damit Bewegung das Produkt unterstützt, statt vom Kaufpfad abzulenken.

Slideshow-Einstellungen

Diese Einstellungen gelten, wenn die Galerie ein Slideshow-Layout verwendet. Sie können die Sichtbarkeit der Slides, Animationsstil und -geschwindigkeit, Autoplay-Verhalten, Endlosschleife sowie die Anzeige von Navigation oder Pagination steuern.

Die Einstellungen für die Desktop- und Mobil-Slideshow-Spalten beeinflussen, wie viel vom nächsten Slide sichtbar ist. Kleinere Werte wirken eher wie ein traditioneller Carousel mit einem Slide, während größere Werte andeuten, dass mehr Medien verfügbar sind.

Eine Fade-Animation erzeugt eine ruhigere, redaktionelle Darstellung, erzwingt jedoch auch ein Ein-Slide-Layout und blendet Pagination-Stile aus, die von einer Bewegung über mehrere Slides abhängen. Verwenden Sie den Standard-Animationsstil, wenn Sie ein interaktiveres Galeriegefühl wünschen.

Unterstützte Blocktypen

App
Accordion
Buy buttons
Benefits
Button
Contact form
Complementary products
Custom liquid
Description
Heading
Icon with text
Image
Price
Quantity selector
Rich text
Separator
Social media icons
Title
Testimonial
Variant selector
Video

Blockhinweise

Hauptblöcke für den Produktkauf

Diese Blöcke bilden den zentralen Kaufablauf in diesem Abschnitt:

Title für den Produktnamen und optionale Aktionen zum Teilen oder Drucken.
Price für Preisangaben und optionale Hinweise zu Richtlinien.
Description für die Hauptproduktbeschreibung, einschließlich einer erweiterbaren Option für längere Texte.
Variant selector für die Auswahl von Optionen wie Größe oder Farbe.
Quantity selector für Mengenkontrollen und lagerbezogene Hinweise.
Buy buttons für In-den-Warenkorb- und verwandte Kaufaktionen.

Eine starke Standardanordnung ist Title, Price, Description, Variant selector, Quantity selector und Buy buttons. Beginnen Sie damit und fügen Sie unterstützende Blöcke nur hinzu, wenn sie Käufer dabei unterstützen, schneller zu entscheiden.

Variantenauswahl

Der Variant selector-Block steuert, wie Käufer Produktoptionen auswählen. Siehe Variantenauswahl.

Verwenden Sie Dropdowns, wenn Sie ein kompaktes Layout wünschen. Verwenden Sie Pills oder Swatches, wenn die Option visuell ist oder ein schnellerer Vergleich wichtig ist.

Wenn Sie Farb- oder Bild-Swatches aktivieren, stellen Sie sicher, dass die Optionsnamen mit Ihren tatsächlichen Variantenoptionsnamen übereinstimmen. Bild-Swatches überschreiben Farb-Swatches, wenn beide für dieselbe Option konfiguriert sind.

Kauf-Buttons

Der Buy buttons-Block fügt die zentrale Kaufaktion hinzu. Siehe Kauf-Buttons.

Halten Sie den Bereich fokussiert. Zusätzliche Checkout-Schaltflächen, Abholinformationen, Versandhinweise, Zahlungssymbole und Ratenhinweise können hilfreich sein, aber zu viele Extras rund um die In-den-Warenkorb-Schaltfläche können die Hauptaktion schwächen.

Ergänzende Produkte

Der Complementary products-Block zeigt verwandte Artikel an, die gut zum vorgestellten Produkt passen. Siehe Ergänzende Produkte.

Dies eignet sich am besten für Add-ons, Zubehör, Nachfüllungen oder regelmäßige Cross-Sells. Sie können die Artikel in einem Raster oder einer Slideshow präsentieren und das Kartenlayout an die Seite anpassen.

Unterstützende Inhaltsblöcke

Verwenden Sie unterstützende Blöcke, um Einwände zu beantworten, Glaubwürdigkeit aufzubauen oder dem Produkt mehr Kontext zu geben.

Accordion für FAQs, Materialien, Pflegehinweise, Versandinformationen oder Zusammenfassungen von Richtlinien. Siehe Akkordeon.
Benefits und Icon with text für kurze Nutzenpunkte wie Garantien, Liefervorteile oder Produkt-Highlights.
Testimonial als Social Proof in der Nähe der Kaufsteuerungen.
Image und Video für zusätzliche Medien außerhalb der Hauptgalerie.
Button, Rich text, Heading und Separator für eine benutzerdefinierte Seitenstruktur.

Erweiterte und Utility-Blöcke

Einige Blöcke sollten besser für bestimmte Anwendungsfälle reserviert werden:

App für app-gestützte Produktfunktionen.
Custom liquid für erweiterte benutzerdefinierte Ausgaben oder Integrationen.
Contact form für Beratungs-, Sonderbestell- oder Pre-Sale-Anfrageabläufe.
Social media icons für Links zur Marken-Community in der Nähe des Produkts.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb dieses Abschnitts. Verwenden Sie engere Abstände, wenn dieses Produkt-Feature in einer dichten Landingpage steht, und mehr Abstand, wenn es als großer Conversion-Bereich hervorgehoben werden soll.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, einen Farbverlauf, ein Bild oder ein Video hinter dem gesamten Abschnitt hinzuzufügen. Das ist nützlich, wenn das Produkt-Feature wie eine Hero-Band oder ein klar abgetrennter Promotionsbereich wirken soll.

Seien Sie vorsichtig mit sehr detailreichen Hintergründen hinter geschäftigen Produktgalerien. Starker Kontrast und ausreichender Abstand sind umso wichtiger, je visueller das Layout wird.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen dem Abschnitt eine Trennlinie oben oder unten hinzu. Verwenden Sie sie, um dieses Produkt-Feature vom umliegenden Inhalt zu trennen, ohne ein weiteres vollständiges Designelement hinzuzufügen.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist besonders nützlich, wenn Sie unterschiedliche Produkt-Feature-Layouts für verschiedene Bildschirmgrößen wünschen.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Inhaltsbreite und die äußere Abschnittsbreite. Diese Einstellungen beeinflussen spürbar die Balance der Galerie, die Lesbarkeit des Textes und wie großzügig der Kaufbereich wirkt.

Die Vorschau im Editor kann Breitenänderungen enger erscheinen lassen, als sie auf der Live-Seite sind. Prüfen Sie daher den tatsächlichen Storefront, bevor Sie Ihr Layout abschließen.

Nutzungshinweise

Bauen Sie zuerst den Kaufpfad auf. Beginnen Sie mit Title, Price, Variant selector, Quantity selector und Buy buttons, bevor Sie zusätzliche Inhalte hinzufügen.
Passen Sie die Galerie an das Produkt an. Verwenden Sie Layouts mit mehreren Bildern für detailreiche Produkte und Slideshows für kompaktere, stärker kontrollierte Präsentationen.
Halten Sie das Variantenverhalten klar. Wenn Varianten unterschiedliche Bilder haben, kombinieren Sie den Variant selector mit einer Galerieeinstellung, die diese visuellen Unterschiede deutlich macht.
Nutzen Sie Support-Blöcke, um Zögern zu reduzieren. Fügen Sie Accordions, Benefits, Testimonials oder Complementary products hinzu, wenn sie Käufern helfen, die nächste Entscheidung schneller zu treffen.
Prüfen Sie das mobile Layout sorgfältig. Dieser Abschnitt klappt auf kleineren Bildschirmen zu einem einspaltigen Erlebnis zusammen. Prüfen Sie daher Medienreihenfolge, Inhaltslänge und die Prominenz der Schaltfläche vor der Veröffentlichung.
Prüfen Sie sowohl Slide- als auch Nicht-Slide-Zustände. Wenn Sie Blöcke hinzufügen oder den Galerie-Stil wechseln, kann sich der Abschnitt von einem einfachen Produktlayout zu einem stärker inhaltsgetriebenen oder carousel-basierten Erlebnis verändern.
Behandeln Sie Empfehlungen als bedingt. Inhalte zu ergänzenden Produkten hängen von einem passenden Produktkontext und verfügbaren Empfehlungen ab. Lassen Sie daher Platz dafür, dass der Block fehlen kann, ohne das Layout zu beeinträchtigen.
Vergleichen Sie Desktop und Mobilgeräte separat. Layout, Ausrichtung, Medienanzeige und Slideshow-Steuerungen können sich je nach Breakpoint unterschiedlich verhalten. Bestätigen Sie daher beide Ansichten vor der Veröffentlichung.
Verwenden Sie explizite visuelle Überschreibungen bewusst. Leere oder standardmäßige Werte behalten in der Regel das Fallback-Styling des Themes bei, während benutzerdefinierte Farben, Farbverläufe oder separate Medien für Desktop und Mobilgeräte den Abschnitt eigenständiger machen.

Align v2.0