Galerie

Grundeinstellungen

Der [≡] Galerie Anzeigemodus (1) 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 (2) setzt das Cover-Bild im Galerie Raster auf die volle Breite. Alle nachfolgenden Bilder werden gemäß des Rasters nebeneinander dargestellt.

Galerie Raster - Dynamisch (3) 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.

Hintergrundfarbe (4) hinterlegt das Bild der Galerie mit der gewählten Hintergrundfarbe. In Kombination mit der Einstellung Hintergrundfarbe überlagernd (5) kann diese Farbe auch dazu genutzt werden nicht transparente oder nicht ausgeschnittene Produktbilder auf einen z.B. grauen Hintergrund zu legen.

Mit Fallback Bild-Titel (6) 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 (7): 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 (8): 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 Galerie Breite (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 (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, 4) für den Galerie Slider für verschiedene Gerätegrößen hinterlegt werden. Verwende Seitenverhältnis Artikelbilder (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 (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.

Die grundsätzliche minimale Höhe für alle großen Viewports wird in den Einstellungen der Galerie und Buybox im Galerie Element des Produkt-Layouts der Erlebniswelt vorgenommen. Die in der Theme-Konfiguration einstellbaren minimalen Höhen sind lediglich ergänzende Werte für mobile Endgeräte wie Smartphones oder Tablets.

Beispiel:

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 (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.

Last updated 1 day ago