Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.7.0.0
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Grundeinstellungen
  • Breite & Höhe
  • Navigation
  • Zoom
  • Erlebniswelten Produktseiten Layouts

Was this helpful?

  1. Styling
  2. Produkt

Galerie

Last updated 6 months ago

Was this helpful?

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.

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.

Cover full width activated
Cover full width disabled

COVER 1

BILD 2 BILD 3

BILD 4 BILD 5

COVER 1 BILD 2 BILD 3 BILD 4 BILD 5

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.

Dynamisch aktiviert
Dynamisch deaktiviert

BILD 1 BILD 2 BILD 3 BILD 4 BILD 5

BILD 1 BILD 2 BILD 3 BILD 4 BILD 5

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.

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:

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 (3): Die Bilder der Vorschau-Navigation werden im eingestellten Bildformat angezeigt und nicht in quadratischen Boxen.

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.

Mehr dazu findest Du in der Doku unter INHALTE > Detailseite >

Diese Einstellung bezieht sich auf die in getroffene Einstellung für das Seitenverhältnis des Produktbildes.

Diese Einstellung bezieht sich auf die in getroffene Einstellung für das Seitenverhältnis des Produktbildes.

🎨
Galerie Modus
Allgemein > Produktbilder
Allgemein > Produktbilder
Galeriebreite
Bild hat selbes Bildformat wie im Listing