Produktseiten

Auf den Produktseiten kannst du Informationen zu den Produkten anzeigen, die du in deinem Shop verkaufst, und wo deine Kunden die Produkte kaufen können.

Standardmäßig verfügen Produktseiten im Theme-Editor über einen Abschnitt Produktinformationen und einen Abschnitt Ähnliche Produkte.

Abschnitt "Produktinformationen"

Im Abschnitt Produktinformationen werden die Details deiner Produkte angezeigt, wie zum Beispiel Titel, Beschreibung, Preis und Bilder.

Einstellungen für den Abschnitt "Produktinformationen"

Die Einstellungen für den Abschnitt "Produktinformationen"
EinstellungBeschreibung
Fixierte Inhalte für Desktop aktivierenBeim Herunterscrollen auf einer Seite wird die Spalte mit den Produktinformationen erst angezeigt, wenn man durch alle Bilder gescrollt hat.
FarbgebungEin Satz von Farben, den du auf diesen Abschnitt anwenden kannst. Erhalte mehr Informationen über Farbschemas.
Medienbreite für DesktopStelle die Breite deines Produktmediums auf der Produktseite für Desktop-Computer ein. Wähle zwischen Klein, Mittel oder Groß.
Medien auf Bildschirmhöhe beschränkenWenn du diese Option auswählst, wird eine maximale Medienhöhe festgelegt, die auf der Höhe des Browserfensters auf jedem Gerät basiert.
MedienanpassungWähle Original aus, um das Originalgrößenverhältnis der Medien beizubehalten. Oder wähle Füllen aus, um die Medien an den Container anzupassen.
Desktop-Layout Lege das Layout deiner Produktmedien auf Desktop-Computern fest. Wähle eine der folgenden Optionen:
  • Gestapelt – Zeigt deine Produktmedien vertikal auf der Seite gestapelt an. Wenn du auf einen gestapelten Medientyp klickst, öffnet sich ein Pop-up-Dialogfeld mit einer größeren Anzeige der ausgewählten Medien.
  • 2 Spalten – Zeigt deine Produktmedien gestapelt, aber über zwei Spalten verteilt an.
  • Miniaturansichten – Wenn ein Produkt mehr als ein Bild oder einen anderen Medientyp enthält, werden die übrigen Medien als Miniaturansichten unter den Hauptproduktmedien angezeigt. Der Kunde kann auf eine beliebige Miniaturansicht klicken, um sie als Hauptproduktmedium anzuzeigen.
  • Miniaturkarussell – Wenn ein Produkt mehr als ein Bild oder einen anderen Medientyp enthält, werden die übrigen Medien als Miniaturansichten in einem Karussell unterhalb des Hauptproduktmediums angezeigt. Der Kunde kann auf eine beliebige Miniaturansicht klicken, um sie als Hauptproduktmedium anzuzeigen, oder die Navigationspfeile des Karussells verwenden, um andere Medien anzuzeigen.
Desktop-MedienpositionWähle aus, ob die Produktmedien auf Desktop-Computern auf der linken oder rechten Seite der Seite angezeigt werden sollen.
BildzoomWähle aus, wie das Bild auf Desktop-Geräten vergrößert wird:
  • Lightbox öffnen – Der Kunde kann auf das Bild klicken, um eine größere Version anzuzeigen. Dies ist die Standardfunktion für Produktmedien, die auf Mobilgeräten angezeigt werden.
  • Klicken und mit der Maus darüber fahren – Der Kunde kann klicken, um das Bild heranzuzoomen, und die Maus darüber bewegen, um verschiedene Abschnitte heranzuzoomen. Hover-Effekt mit Zoom ist deaktiviert, wenn erneut auf das vergrößerte Bild geklickt wird oder wenn der Cursor den Bildcontainer verlässt. Wenn diese Einstellung aktiviert ist und der Benutzer ein mobiles Gerät verwendet, wird das Bild beim Anklicken in einem Modal (Lightbox) geöffnet.
  • Kein Zoom – Diese Option deaktiviert die Zoom-Funktion für Bilder. Sie eignet sich für Bilder, die nicht hochauflösend sind und beim Heranzoomen nicht gut dargestellt werden.
Mobiles LayoutLege das Layout deiner Produktmedien auf Mobilgeräten fest. Wähle eine der folgenden Optionen:
  • 2 Spalten – Zeigt zwei Produktmedien nebeneinander an, mit Karussellfunktion zum Scrollen und Anzeigen anderer Produktmedien.
  • Miniaturansichten anzeigen – Zeigt ein einzelnes Hauptproduktmedium an, mit einem Miniaturansichten-Karussell zum Scrollen darunter.
  • Miniaturansichten ausblenden – Zeigt ein einzelnes Hauptproduktmedium an, mit einem Karussell zum Scrollen darunter, aber die Miniaturansichten werden nicht angezeigt.
Medien anderer Varianten ausblenden, sobald eine Variante ausgewählt wurdeWenn eine Variante ausgewählt ist, werden Bilder von anderen Varianten ausgeblendet. Die Bilder werden wieder angezeigt, wenn die Auswahl der Variante aufgehoben wird.
Videoschleife aktivierenBei allen Videos, die du in deinen Produktmedien hast, wird das Video mit dieser Einstellung in einer Schleife abgespielt, sodass es erneut abgespielt wird, wenn es zu Ende ist.
Oberes PaddingLege den Abstand oben im Abschnitt fest.
Unteres PaddingLege den Abstand unten im Abschnitt fest.

Ebenso wie die Einstellungen für den Abschnitt Produktinformationen kannst du auch einige der Theme-Einstellungen für Produkt-Badges anzeigen und anpassen. Du kannst auch dein eigenes abschnittspezifisches Benutzerdefiniertes CSS hinzufügen.

Produktinformations-Blöcke

Du kannst die folgenden Blöcke im Abschnitt Produktinformationen verwenden:

Textblock

Der Block Text kann verwendet werden, um statischen Text oder Variablendaten mithilfe dynamischer Quellen anzuzeigen. Du kannst beispielsweise einen Text mit einer Marketingbotschaft hinzufügen, wie beispielsweise Kostenloser Versand für Bestellungen über 100 USD, der dann für jedes Produkt angezeigt wird. Du kannst auch eine dynamische Quelle hinzufügen, zum Beispiel das Feld Anbieter des Produkts, das sich je nach angezeigtem Produkt ändern kann.

Die Einstellungen für den Textblock im Abschnitt "Produktinformationen"
EinstellungBeschreibung
TextEin Textfeld, um zusätzliche Informationen zur Produktseite hinzuzufügen.
Textstil Ändere den Textstil. Wähle eine der folgenden Optionen:
  • Fließtext – Ändert den Text in ein Absatzformat.
  • Untertitel – Ändert den Text zu Untertiteln, wodurch der Text ein wenig größer ist, als im Absatzformat.
  • Großbuchstaben – Ändert den Text so, dass er kleiner als Text im Absatzformat ist, und setzt den gesamten Text in Großbuchstaben.

Titelblock

Im Block Titel wird der Titel des angezeigten Produkts angezeigt. Dieser Block hat keine anpassbaren Einstellungen.

Preisblock

Im Block Preis werden die Preisinformationen des angezeigten Produkts angezeigt, z. B. der Preis und der Vergleichspreis. Dieser Block hat keine anpassbaren Einstellungen.

Variantenauswahlblock

Der Block Variantenauswahl zeigt alle Variantenoptionen für das angezeigte Produkt an. Die Variantenauswahl wird nur für Produkte mit Variantenoptionen angezeigt. Wenn du diesen Block entfernst und Produkte mit Variantenoptionen hast, können deine Kunden die gewünschte Variantenoption nicht auswählen oder kaufen.

Die Einstellungen für den Variantenauswahl-Block im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Stil Wähle aus, wie deine Produktvarianten den Kunden angezeigt werden. Wähle eine der folgenden Optionen:
  • Dropdown-Menü – Zeigt die Variantenoptionen in Dropdown-Menüs an. Diese können nur als Farbfeld oder Text angezeigt werden.
  • Kapseln – Zeigt die Variantenoptionen als Schaltflächen an, die du auswählen kannst. Diese können nur als Musterfeld oder Text angezeigt werden.
Farbfeld Wähle aus, wie deine Farbfelder den Kunden angezeigt werden. Wähle eine der folgenden Optionen:
  • Kreis – Zeigt das Farbfeld als Kreis an, den du auswählen kannst.
  • Quadrat – Zeigt das Farbfeld als Quadrat an, das du auswählen kannst.
  • Keine – Keine Farbfelder werden angezeigt.

Mengenauswahlblock

Der Block Mengenauswahl zeigt ein anklickbares und bearbeitbares Zahlenfeld an, mit dem Kunden ändern können, wie viele Einheiten eines Produkts sie kaufen möchten. Dieser Block hat keine anpassbaren Einstellungen.

Block der Schaltfläche "Kaufen"

Der Block Schaltflächen "Kaufen" zeigt die Schaltfläche Zum Warenkorb hinzufügen und alle Informationen für die Abholung im Geschäft an. Hier können auch alle dynamischen Checkout-Buttons angezeigt werden, die du in deinem Shop verwendest.

Die Einstellungen für den Buy Buttons-Block im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Dynamischen Checkout-Button anzeigenZeigt alle dynamischen Checkout-Optionen an, die du in deinen Zahlungseinstellungen aktiviert hast.
Formular für Empfängerinformationen für Gutscheine anzeigenZeigt ein optionales Kontrollkästchen für alle Gutscheinprodukte, die du hast, damit Kunden einen Gutschein zusammen mit einer persönlichen Nachricht an einen Empfänger senden und eine Terminplanung dafür vornehmen können.

Beschreibungsblock

Der Block Beschreibung zeigt die Beschreibung des angezeigten Produkts an. Dieser Block hat keine anpassbaren Einstellungen.

Teilungsblock

Der Block Teilen zeigt einen anklickbaren Link an, mit dem Kunden das Produkt auf ihren Social Media-Konten teilen können.

Die Einstellungen für den Teilungsblock im Abschnitt "Produktinformationen"
EinstellungBeschreibung
TextDer Text, den Kunden anklicken, um das Produkt auf ihren Social Media-Konten zu teilen.

SKU-Block

Der Block SKU zeigt die mit dem Produkt oder der Variante verknüpfte Artikelnummer (SKU) an, sofern relevant. Erfahre mehr über das Hinzufügen von Artikelnummern zu deinen Produktvarianten.

Die Einstellungen für den SKU-Block im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Textstil Ändere den Textstil. Wähle eine der folgenden Optionen:
  • Fließtext – Ändert den Text in ein Absatzformat.
  • Untertitel – Ändert den Text zu Untertiteln, wodurch der Text ein wenig größer ist, als im Absatzformat.
  • Großbuchstaben – Ändert den Text so, dass er kleiner als Text im Absatzformat ist, und setzt den gesamten Text in Großbuchstaben.

Inventarstatus-Block

Der Block Inventarstatus zeigt den Inventarstatus des Produkts an. Du kannst den Inventarstatus und die verbleibende Inventarnummer dauerhaft anzeigen oder erst dann anzeigen, wenn die Inventaranzahl des Produkts einen von dir festgelegten Schwellenwert erreicht hat. Der Inventarstatus wird nur für Produkte angezeigt, für die die Inventarverfolgung aktiviert ist.

Die Einstellungen für den Inventarstatus-Block im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Textstil Ändere den Textstil. Wähle eine der folgenden Optionen:
  • Fließtext – Ändert den Text in ein Absatzformat.
  • Untertitel – Ändert den Text zu Untertiteln, wodurch der Text ein wenig größer ist, als im Absatzformat.
  • Großbuchstaben – Ändert den Text so, dass er kleiner als Text im Absatzformat ist, und setzt den gesamten Text in Großbuchstaben.
Geringer InventarschwellenwertVerwende den Schieberegler, um einen Schwellenwert festzulegen, ab dem deine Produkte mit der Meldung Geringer Lagerbestand angezeigt werden. Wähle eine Zahl zwischen 0 und 100. Wenn du den Schieberegler auf 0 setzt, wird Auf Lager angezeigt, bis das Produkt nicht mehr vorrätig ist.
Inventar anzeigenWähle diese Option aus, wenn du das vorhandene Inventar für deine Produkte anzeigen möchtest.

Block für benutzerdefiniertes Liquid

Der Block Benutzerdefiniertes Liquid zeigt benutzerdefinierten Liquid- oder HTML-Code an, den du dem Block hinzufügst.

Die Einstellungen für den Block für benutzerdefiniertes Liquid im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Liquid-CodeZeigt den Inhalt an, der durch den von dir eingegebenen Liquid- oder HTML-Code gerendert wird.

Einklappbarer Zeilenblock

Der Block Einklappbare Zeile zeigt eine ausziehbare und zusammenklappbare Zeile mit einem Titel an. Wenn ein Kunde auf das Symbol, den Titel oder den Abwärtspfeil klickt, wird die Zeile erweitert, um zusätzliche Inhalte anzuzeigen.

Die Einstellungen für den Block für einklappbare Zeilen im Abschnitt "Produktinformationen"
EinstellungBeschreibung
TitelDer Titel der Zeile, der angezeigt wird, wenn die Zeile sowohl eingeklappt als auch ausgeklappt ist.
SymbolWähle ein Symbol aus, das mit der einklappbaren Zeile angezeigt werden soll oder wähle Keines, um nur den Titel der Zeile anzuzeigen.
ZeileninhaltGib den Inhalt für deine Zeile mit dem Rich-Text-Editor ein. Der Inhalt wird nur angezeigt, wenn die Zeile erweitert wird.
Zeileninhalt der SeiteFüge Inhalte von einer Seite zu deiner Zeile hinzu. Dadurch werden nur die Inhalte angezeigt, die du einer Seite im Abschnitt Onlineshop > Seiten in deinem Shopify-Adminbereich hinzufügst. Es werden keine Inhalte angezeigt, die du im Theme-Editor in der Vorlage für Seiten hinzufügst. Alle Inhalte, die du im Feld Zeileninhalt eingibst, werden über dem von dir hinzugefügten Seiteninhalt angezeigt.

Pop-up-Block

Der Block Pop-up zeigt anklickbaren Text an, der ein Pop-up-Dialogfeld öffnet, wenn darauf geklickt wird.

Die Einstellungen für den Popup-Block im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Link-LabelDer anklickbare Text, den Kunden anklicken, um das Popup-Dialogfenster anzuzeigen.
SeiteWähle im Pop-up-Dialogfeld die Seite aus, von der du Inhalte anzeigen möchtest. Dadurch werden nur die Inhalte angezeigt, die du einer Seite im Abschnitt Onlineshop > Seiten in deinem Shopify-Adminbereich hinzufügst. Es werden keine Inhalte angezeigt, die du im Theme-Editor in der Vorlage für Seiten hinzufügst.

Produktbewertungsblock

Der Block Produktbewertung zeigt die durchschnittliche Produktbewertung in Sternen mit der Anzahl der Bewertungen in Klammern an, zum Beispiel: ★★★★★ (8).

Um Produktbewertungen anzuzeigen, musst du eine Produktrezensions-App und Metafeld-Definitionen für reviews.rating_count und.reviews.rating verwenden.

Dieser Block hat keine anpassbaren Einstellungen.

Block für ergänzende Produkte

Der Block Komplementäre Produkte zeigt komplementäre Produkte an, die du mit der Shopify Search & Discovery-App eingerichtet hast.

Die Einstellungen für den Block "Ergänzende Produkte" im Abschnitt "Produktinformationen"
EinstellungBeschreibung
Titel Der Blocktitel.
Als einklappbare Zeile anzeigen Wenn diese Option ausgewählt ist, wird der Inhalt minimiert in einer Zeile angezeigt. Wenn ein Kunde auf einen Titel klickt, wird die Zeile erweitert und zeigt zusätzliche Inhalte an.
Symbol Wähle ein Symbol aus, das mit deinem Titel gekoppelt werden soll, wenn ergänzende Produkte als einklappbare Zeile angezeigt werden.
Maximal anzuzeigende Produkte Wähle die maximale Anzahl ergänzender Produkte aus, die angezeigt werden soll. Gib eine Zahl zwischen 1 und 10 an.
Anzahl der Produkte pro Seite Wähle die Anzahl der ergänzenden Produkte aus, die pro Slider-Seite angezeigt werden sollen. Wähle eine Zahl zwischen 1 und 4.
Seitennummerierungsstil Lege den Stil der Slider-Navigation fest, die unter den Produkten angezeigt wird. Wähle aus Punkten, Zähler oder Zahlen.
Bildverhältnis Lege das Seitenverhältnis der Produktkartenbilder fest. Wähle zwischen Hochformat und Quadrat.
Schaltfläche zum schnellen Hinzufügen aktivieren Wenn du die Schaltfläche „Schnell hinzufügen“ aktivierst, können deine Kunden einen Artikel aus der Produktkarte mit einer der folgenden Optionen in ihren Warenkorb legen:
  • Zum Warenkorb hinzufügen – Für Produkte mit einer Variante. Wenn ein Kunde auf die Schaltfläche klickt, wird das Produkt automatisch zum Warenkorb hinzugefügt.
  • Optionen auswählen – Für Produkte mit Varianten. Wenn ein Kunde auf die Schaltfläche klickt, wird ein Popup-Dialogfenster angezeigt, in dem der Kunde die Varianten auswählen und dann mit dem Kauf fortfahren kann.

Block "Symbol mit Text"

Der Block Symbol mit Text zeigt bis zu drei Symbole mit dazugehörigem Text an. Wähle aus einer Liste vorinstallierter Symbole aus oder verwende ein Bild, das du hochlädst.

Die Einstellungen für den Block "Symbol mit Text" im Abschnitt "Produktinformationen"
EinstellungBeschreibung
LayoutWähle zwischen einem horizontalen oder vertikalen Layout für den Block.
Erstes SymbolWähle ein Symbol aus, das im Block angezeigt werden soll, oder wähle Keines, um nur den Titel anzuzeigen.
Erstes BildWähle dein eigenes Bild, das anstelle eines Symbols verwendet werden soll.
Erste ÜberschriftFüge einen Titel für dein erstes Symbol oder Bild hinzu.
Zweites SymbolWähle ein Symbol aus, das im Block angezeigt werden soll, oder wähle Keines, um nur den Titel anzuzeigen.
Zweites BildWähle dein eigenes Bild, das anstelle eines Symbols verwendet werden soll.
Zweite ÜberschriftFüge einen Titel für dein zweites Symbol oder Bild hinzu.
Drittes SymbolWähle ein Symbol aus, das im Block angezeigt werden soll, oder wähle Keines, um nur den Titel anzuzeigen.
Drittes BildWähle dein eigenes Bild, das anstelle eines Symbols verwendet werden soll.
Dritte ÜberschriftFüge einen Titel für dein drittes Symbol oder Bild hinzu.

Abschnitt "Ähnliche Produkte"

Je nach angezeigtem Produkt werden im Abschnitt Ähnliche Produkte ähnliche Produkte, Produkte mit einer ähnlichen Beschreibung oder Produkte, die häufig zusammen mit dem angezeigten Produkt gekauft werden, angezeigt. Mit der Shopify Search & Discovery-App kannst du deine eigenen Produkte manuell zum Abschnitt*Ähnliche Produkte* hinzufügen.

Weitere Informationen zu Produktempfehlungen erhältst du unter Produktempfehlungen verstehen.

Einstellungen für den Abschnitt "Ähnliche Produkte"

Die Einstellungen für den Abschnitt "Ähnliche Produkte"
EinstellungBeschreibung
TitelDer Titelabschnitt.
Größe der ÜberschriftDie Größe des Titeltexts. Wähle zwischen Klein, Mittel, Groß, Extra groß oder Extra, extra groß aus.
Maximal anzuzeigende ProdukteLege die maximale Anzahl der ähnlichen Produkte fest, die angezeigt werden sollen. Wähle eine Zahl zwischen 2 und 10 aus.
Anzahl der Spalten auf dem DesktopLege die Anzahl der Spalten für die Produkte fest, die auf Desktopcomputern angezeigt werden. Gib eine Zahl zwischen 1 und 6 an.
FarbgebungEin Satz von Farben, den du auf diesen Abschnitt anwenden kannst. Erhalte mehr Informationen über Farbschemas.
BildverhältnisLege das Bildverhältnis für die Feature-Bilder der ähnlichen Produkte fest, die angezeigt werden. Wähle eine der folgenden Optionen:
  • An Bild anpassen – Verwendet die Seitenverhältnisse der Bilder. So wird verhindert, dass Bilder abgeschnitten werden.
  • Hochformat – Schneidet die Bilder auf ein Verhältnis von 2:3 zurecht.
  • Quadratisch – Schneidet die Bilder auf ein Verhältnis von 1:1 zurecht.
BildformWähle eine der folgenden Bildformen für deine Produktbilder aus:
  • Standard – Ändert dein Produktbild in eine rechteckige Form ab.
  • Bogen – Krümmt den oberen Teil deines Produktbildes.
  • Klecks – Passt dein Produktbild an eine der sechs zufälligen Klecksformen an, wobei eine einzigartige Animation wiedergegeben wird, wenn ein Benutzer mit der Maus über das Bild fährt.
  • Chevron nach links – Ändert dein Produktbild in eine Chevronform mit einem starken Knick nach links.
  • Chevron nach rechts – Ändert dein Produktbild in eine Chevronform mit einem starken Knick nach rechts.
  • Diamant – Ändert dein Produktbild in eine vierseitige Rautenform ab.
  • Parallelogramm – Ändert dein Produktbild in eine Form mit zwei Paaren von parallelen Linien ab.
  • Rund – Rundet dein Produktbild in eine kreisförmige oder ovale Form ab, wobei eine einzigartige Animation wiedergegeben wird, wenn ein Benutzer mit der Maus über das Bild fährt.
Hover-Effekt mit zweitem BildWenn ein Kunde am Desktop seinen Cursor über Produktbilder bewegt, zeigt diese Option das zweite Produktbild an, wenn es vorhanden ist.
Anbieter anzeigenZeigt den Anbieter für jedes Produkt an.
Produktbewertung anzeigenZeigt die durchschnittliche Produktbewertung als Sterne mit der Anzahl an Rezensionen in Klammern an, z. B.: ★★★★★ (8). Hierfür werden auch eine Produktrezensions-App und Metafeld-Definitionen für reviews.rating_count und reviews.rating benötigt.
Anzahl der Spalten auf mobilem GerätLege die Anzahl der Spalten für die Produkte fest, die auf Mobilgeräten angezeigt werden. Wähle eine Spalte oder zwei Spalten aus.
Oberes PaddingLege den Abstand oben im Abschnitt fest.
Unteres PaddingLege den Abstand unten im Abschnitt fest.
Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.