Produkt
Die Produkt-Detailseite
Quickview
Grundeinstellungen
Positioniert den Produktnamen im Vorschau. Dadurch kann die selbe Darstellung nachgestellt werden, wie mit den Galerie & Buybox Blöcken der Erlebniswelten Produkseite Layouts auf der Produktseite.
Details
Farben
-
Grundeinstellungen
Diese Einstellungen wirken sich auch auf die Darstellung der Quickview Funktion aus.
Produktname Position (1): Legt die Position für den Produkt-Titel fest.
In Erlebniswelten-Layouts wird die Position des Produktnamen durch den Produktnamen Block bzw. den verschiedenen Galerie und Buybox Blöcken mit Produktnamen gesteuert.
Kurzbeschreibung (2): Das Theme unterstützt die Anzeige einer zusätzlichen Kurzbeschreibung, welche aus der Metabeschreibung des Produktes gezogen wird.
Varianten Merkmale (3): Die wesentlichen Merkmale einer Variante können unterhalb des Produkttitels angezeigt oder ausgeblendet werden.
Bewertung Position (4): Bewertungen können im Titelbereich oder unterhalb des Preises dargestellt werden.
Bewertung Platzhalter (5): Zeigt inaktive Sterne als Platzhalter an, sollte das Produkt noch keine Bewertungen haben.
Merkzettel Position (6): Positioniere den zum Merkzettel Hinzufügen Link über der Galerie oder unter den Warenkorb-Button.
Hersteller Position (7): Der Herstellername bzw. das Hersteller-Logo kann an verschiedenen Stellen dargestellt werden. Du kannst die Darstellung auch unterbinden.
Bestellmengenfeld (8): Die Mengenauswahl/-eingabe kann nach Bedarf ausgeblendet werden. Der Nutzer kann vorerst nur eine Abgabemenge in den Warenkorb legen. Im Checkout und Warenkorb kann die Menge weiterhin angepasst werden.
Im Listing wird die Mengenauswahl/-eingabe unter Kategorie > Produkt-Boxen > Produktaktionen ein- oder ausgeschaltet werden.
Im Quickview wird die Einstellung der Detailseite übernommen.
Lieferstatus Indikator Aussehen (9): Verändert das Aussehen des Lieferstatus.
Beispiel:
Die Abstandseinstellungen (10, 11, 12, 13) sind analog zu den Layout Abständen der Erlebniswelten Elemente. Hierdurch können wie bei einem Galerie und Buybox Element die Abstände eingestellt werden. Wird der Wert auf auto gesetzt, wird der globale Container Abstand aus Allgemein > Grundeinstellungen > Container-Abstände verwendet.
In Erlebniswelten-Layouts wird diese Einstellung von den Einstellungen im Galerie und Buybox CMS-Element überschrieben.
Sticky (14): Wenn aktiv, wird die Buybox beim Scrollen fixiert, solange die Inhalte nicht höher sind als der Viewport.
Wenn die Option Sticky auch für die benachbarte Galerie aktiviert ist, wird immer das Element mit der geringeren Höhe sticky.
Sticky erzwingen (15): Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.
Produkttitel
-
Produktpreis
-
Produkt Konfigurator
Die Farben des Produkt Konfigurators (Variantenauswahl) kann über die Einstellungen angepasst werden. Darüber hinaus lassen sich Nicht kombinierbare Eigenschaften durchstreichen (1), gestrichelt (2) darstellen und in ihrer Deckkraft (3) reduziert anzeigen. Tooltips (4) zeigen bei z.B. Farbauswahlen den hinterlegten Namen der Farbe an.
Tipp: Die Reduzierung der Deckkraft verfälscht die Farben einer Farbauswahl, sodass es sinnvoll sein kann die Optionen zum Durchstreichen und/oder gestrichelter Darstellung zu verwenden.
Beispiel:
Produkt Details
Beispiel:
Produkt Features
Über die Produkt-Features lassen sich beliebig viele Vorteile eines Produktes auf der Detailseite darstellen. Neben dem globalen Aktivieren (1) stehen zwei verschieden Anzeigemodi (2) sowie die Auswahl eines Icons (4) bereit. Über die Position (3) kannst Du bestimmen, wo diese Features dargestellt werden. Die Überschrift (5) ist optional und kann ausgebendet werden.
Die Inhalte werden direkt im Produkt im Bereich der Zusatzfelder im Tab Zusatzinhalte (1) hinterlegt. Im Feld Produkt Features (2) können beliebig viele Vorteile eingefügt und durch ein Semikolon getrennt werden.
Beispiel:
Galerie
Grundeinstellungen
Mit [!] Bilder Anzeigemodus (1) entscheidest Du, wie das Bild in der Galerie dargestellt werden soll:
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Der [≡] Galerie Anzeigemodus (2) definiert das Verhalten der Galerie. Sie kann sich als Galerie Slider zum horizontalen sliden oder als Galerie Scroller zum vertikalen Scrollen im Dokumentenfluss verhalten. Ab Theme Version 2.6.0 steht die neue Darstellung als Galerie Raster zur Verfügung.
[≡] Der Galerie Modus kann in jedem Produkt über die Zusatzfelder im Tab Spezifikationen > Zusatzfelder > Galerie eingestellt werden.
Er muss nicht global gesetzt werden und kann so genutzt werden, um Produkte gezielt in der Darstellung zu optimieren.
Mehr dazu findest Du in der Doku unter INHALTE > Detailseite > Galerie Modus
Galerie Raster - Cover volle Breite (3) setzt das Cover-Bild im Galerie Raster auf die volle Breite. Alle nachfolgenden Bilder werden gemäß des Rasters nebeneinander dargestellt.
| Cover full width activated | Cover full width disabled |
|---|---|
|
|
Galerie Raster - Dynamisch (4) sorgt dafür, dass das Raster nicht mit einem einzelnen Bild endet. Sind beispielsweise fünf Produktbilder anzuzeigen, werden in der letzte Zeile drei Bilder nebeneinander dargestellt, sodass kein Bild alleine umbricht und eine optische Lücke entsteht.
| Dynamisch aktiviert | Dynamisch deaktiviert |
|---|---|
|
|
Die Checkbox Hintergrundfarbe (5) aktiviert das nachfolgende Farbfeld Hintergrundfarbe (6). Im Standard ist hier die Variable $zen-product-listing-card-img-bg der Einstellung unter Allgemein > Produktbilder > Hintergrundfarbe hinterlegt.
Mit Fallback Bild-Titel (7) legst Du den Titel des Bildes fest, der hinterlegt werden soll, wenn kein Bild-Titel zu dem Bild in der Medienverwaltung hinterlegt wurde. Das kann der Name der Bilddatei oder der Name des Produktes sein.
Sticky (8): Wenn aktiv, wird die Galerie beim Scrollen fixiert, solange die Inhalte nicht höher sind als der Viewport oder die Galerie nicht höher ist als die benachbarte Buybox.
Wenn die Option Sticky auch für die benachbarte Buybox aktiviert ist, wird immer das Element mit der geringeren Höhe sticky.
Sticky erzwingen (9): Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.
Beispiel:
Breite & Höhe
Die Galeriebreite (1) bestimmt, wie viel Platz die Galerie gegenüber der rechten Buybox einnehmen darf.
Beispiel:
Die Höhe des Galerie Sliders kann grundlegend durch die Option Verwende Seitenverhältnis Artikelbilder für Höhe (2) gesetzt werden.
Diese Einstellung bezieht sich auf die in Allgemein > Produktbilder getroffene Einstellung für das Seitenverhältnis des Produktbildes.
Zusätzlich kann eine minimale Höhe (3) für den Galerie Slider für verschiedene Gerätegrößen hinterlegt werden. Verwende Seitenverhältnis Artikelbilder für Höhe (2) kann die Einstellungen der minimalen Höhen (3) ergänzen. Sind die Artikelbilder im Hochformat, die Mindesthöhe aber sehr niedrig gewählt, kann das Artikelbild auf der Produktseite höher und größer angezeigt werden, als es die Mindesthöhe vorgibt.
Ist die Einstellung Verwende Seitenverhältnis Artikelbilder für Höhe (2) jedoch nicht aktiv, sind die Bilder auf der Produktseite immer nur so hoch, wie es die Mindesthöhe für das jeweiligen Endgerät eingestellt wurde.
Beispiel:
Navigation
Analog zu den Einstellungen des Erlebniswelten Element Galerie und Buybox lassen sich Einstellungen zur Navigation tätigen:
Pfeile-Navigation (1): Fügt Pfeile zum Durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden. Punkte-Navigation (2): Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst. Die Darstellung ist auf oder unter dem Bild möglich.
Verwende Seitenverhältnis der Artikelbilder für Vorschau Navigation Höhe (3): Die Bilder der Vorschau-Navigation werden im eingestellten Bildformat angezeigt und nicht in quadratischen Boxen.
Diese Einstellung bezieht sich auf die in Allgemein > Produktbilder getroffene Einstellung für das Seitenverhältnis des Produktbildes.
Vorschau Navigation Position (4): Lege fest, ob die kleinen Bilder für die Galerie-Vorschau links neben dem Bild oder unterhalb angezeigt werden soll.
Vorschau Navigation Aussehen (5): Stellt das Aussehen dieser Navigation ein. Im Modus Alternativ entfällt die Rahmung, inaktive Elemente werden abgeschwächt dargestellt.
Die Punkte kann bei zu vielen Navigationspunkten insbesondere auf mobilen Geräten störend wirken. Mit den folgenden Einstellungen kannst Du bestimmen, ab wie vielen Punkten bzw. Bildern diese Navigation nicht angezeigt wird:
Punkte-Navigation max (mobile) (6): Legt fest, ab wie vielen Bilder die Punkte Navigation auf mobilen Geräten nicht angezeigt wird. Punkte-Navigation max (7): Legt fest, ab wie vielen Bilder die Punkte Navigation auf großen Geräten nicht angezeigt wird.
Zoom
Zoom (1): Wenn Du diese Option aktivierst, wird eine vergrößerte Darstellung des Bildes angezeigt, wenn der Shopbesucher mit der Maus über das Bild fährt. Zoomfaktor (2): Über den Zoomfaktor kannst Du bestimmen, wie stark die Vergrößerung des Bildes ist. Seitenverhältnis beim Zoomen beibehalten (3): Steuert, ob die Zoomansicht im Seitenverhältnis des Bildes oder quadratisch ist. Lupe über Galerie (4): Bietet die Möglichkeit die Zoom-Funktion (Lupenfunktion) über der Galerie selbst zu platzieren. Andernfalls wird die Zoomansicht die Buybox überlagern. Vollbild-Galerie (5): Ermöglicht es mit einem Klick auf das Bild die Galerie vollflächig im Browserfenster anzuzeigen.
Erlebniswelten Produktseiten Layouts
Bei Produktseiten, welche mit den ab Shopware 6.4.0.0 verfügbaren Erlebniswelten für Produktseiten erstellt werden, wird die Mindesthöhe im Element Galerie und Buybox im Feld Minimale Höhe (1) hinterlegt. So kann für einzelne Produkte gezielt eine individuelle Höhe angegeben werden.
Die Minimale Höhe im Erlebniswelten Element überschreibt die Mindesthöhe für die Desktop-Ansicht aus der Theme-Konfiguration. Die anderen Werte bleiben bestehen, da die Einstellung aus dem Erlebniswelten-Element nur die Desktop-Ansicht beeinflusst.
Beschreibung
Farben
Setze für den gesamten Bereich der Tabs und Crossselling-Tabs eine Hintergrundfarbe.
Beispiel:
Grundeinstellungen
Mit Position (1) bestimmst Du die Platzierung der Produktbeschreibung und weiteren Tabs. Im Standard zeigt Shopware diese Informationen unter den Elementen der Galerie sowie der Buybox an. Mit der Option Buybox kannst Du diese Informationen auch rechts neben der Galerie in der Buybox platzieren.
Aussehen (mobil) (2):
Offcanvas: Im Standard werden die Inhalte auf mobilen Geräten in einem sogenannten Offcanvas Element angezeigt. Die Inhalte der Tabs werden nur in einer Vorschau angezeigt. Bei längeren Produktbeschreibungen eignet sich die Darstellung als
Offcanvas (Standard)besser, da der Nutzer die darunter liegenden Inhalte (z.B. Crossselling) besser erreichen kann und den Überblick behält.Scroller: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option
Scroller. Die Tab-Navigation funktioniert dann als Anker-Navigation und scrollt beim Klick zum jeweiligen Inhalt.Linear: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option
Linear. Die Tab-Navigation wird im Unterschied zumScrollerModus ausgeblendet.Akkordeon: Stellt die verschiedenen Inhalte in einem aufklappbaren Akkordeon dar.
Aussehen (3):
Tabs: Die Standard-Darstellung von Shopware. Bei längeren Produktbeschreibungen eignet sich die Darstellung als
Tabs (Standard)besser, da der Nutzer die darunter liegenden Inhalte (z.B. Crossselling) besser erreichen kann und den Überblick behält.Scroller: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option
Scroller. Die Tab-Navigation funktioniert dann als Anker-Navigation und scrollt beim Klick zum jeweiligen Inhalt.Linear: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option
Linear. Die Navigation wird im Unterschied zumScrollerModus ausgeblendet.Akkordeon: Stellt die verschiedenen Inhalte in einem aufklappbaren Akkordeon dar.
Beispiel:
Kombiniere die Position in der Buybox mit der Aussehen Einstellung Akkordeon.
Beschreibung Navigation
Farben
Je nach Einstellung der Erscheinung, wird die Hintergrundfarbe (1) für den Unterstrich oder den Hintergrund des Tabs verwendet.
Die Einstellung für die Erscheinung mit Hintergrundfarbe oder Unterstrich findest Du im folgenden Abschnitt Grundeinstellungen.
Beispiele:
Grundeinstellungen
Erscheinung: Standard (Unterstrich), Tabs, Pills
Die Tab Ausrichtung (2) der Tabs kann zwischen gleichmäßig verteilt auf der vollen Breite und den normalen Ausrichtung links, mittig, rechts gewählt werden. Zusätzlich dazu kann die Ausrichtung der Schrift mit dem Feld Schriftausrichtung (6) bestimmt werden.
Beispiele:
Zusätzliche Tabs
Über das Theme kann im Artikel direkt ein Tab mit Informationen zum Hersteller ausgespielt werden. Logo, Name, Beschreibung und Link zur Webseite des Herstellers werden als Informationen in den Tabs aufgenommen.
Die Eigenschaften können ebenfalls optional in einem Tab dargestellt werden. Das eignet sich besonders dann, wenn sehr viele Eigenschaften dargestellt werden sollen.
Beispiele:
Beschreibung Inhalt
Farben
Eine Hintergrundfarbe für den Tab Inhalt zu definieren ist immer dann sinnvoll, wenn der gesamten Tabs-Sektion eine Hintergrundfarbe zugewiesen wurde.
Grundeinstellungen
Aktiviere oder deaktiviere die Überschrift Produktbeschreibung (1) und wähle über Aussehen (2), ob der Produktname, der Titel oder Priduktname und Titel in Kombination angezeigt werden sollen.
Last updated
