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.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
  • Listing
  • Produkt Layout-Typ global einstellen
  • Produkt Layout-Typ in der Kategorie einstellen
  • Produkt-Slider & Produkt-Boxen

Was this helpful?

  1. Inhalte

Layout-Typ

Last updated 5 months ago

Was this helpful?

Listing

Grundlegend kannst Du für die Darstellung Deiner Produkte in der Storefront aus drei Layout-Typen wählen. Dabei stehen Dir die Layouts Standard, Großes Bild und Minimaler Inhalt zur verfügung.

Grundsätzlich verwendet Shopware zunächst den Layout-Typ Standard. Dieser Layout-Typ stellt eine Produktbeschreibung (1) im Produkt-Layout dar. Die Layout-Typen Großes Bild und Minimaler Inhalt stellen keine Beschreibung im Listing dar und sind etwas kompakter.

Produkt Layout-Typ global einstellen

In der Erlebniswelt Kategorie-Layout unter Erlebniswelten > Kategorieseiten kannst Du im Kategorie-Listing Element das Layout Deiner Produkte global einstellen.

Du wirst möglicherweise eine Kopie des Standard Kategorie-Layouts erstellen müssen, da sich diese nicht bearbeiten lassen.

Layout-Typ
Anzeigemodus¹
Seitenverhältnis

Standard

Standard (default)

einstellbares² Seitenverhältnis

Großes Bild

Füllen (cover³)

einstellbare² Höhe

Minimaler Inhalt

Standard (default)

einstellbares² Seitenverhältnis

¹ Der Anzeigemodus ist im Listing-Element nicht einstellbar - im Produkt-Slider hingegen schon.

² Du kannst das Seitenverhältnis und die Höhe in der Themen-Konfiguration einstellen.

³ Der Layout-Typ Großes Bild verwendet die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe. Dabei wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Bild-Format oben, unten, links oder rechts angeschnitten werden.

Anzeigemodus

  • Bei Standard/Original (default) passt sich das Bild bis zu seiner nativen Größe an die das Bild einfassende Box an. Es wird hierbei nicht angeschnitten.

  • Bei Füllen/Zugeschnitten (cover) wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Format oben, unten, links oder rechts angeschnitten werden.

Produkt Layout-Typ in der Kategorie einstellen

Abweichend von der globalen Einstellung, kannst Du auch in jeder Kategorie das global eingestellte Layout überschreiben.

Produkt-Slider & Produkt-Boxen

Erlebniswelten Produkt-Slider und Produkt-Boxen haben neben dem Layout-Typ (2) auch die Wahl eines Anzeigemodus (1).

Anzeigemodus

An vielen Stellen in Shopware 6 kann der Anzeigemodus der Artikelbilder gewählt werden. Dabei stehen die Werte Standard, Füllen und Beinhalten zur Auswahl. Bei Anzeigemodus entscheidest Du, wie sich das Bild im Bildbereich der Produkt-Kachel verhält.

  • Bei Standard/Original (default) passt sich das Bild bis zu seiner nativen Größe an die das Bild einfassende Box an. Es wird hierbei nicht angeschnitten.

  • Bei Füllen/Zugeschnitten (cover) wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Format oben, unten, links oder rechts angeschnitten werden.

  • Bei Beinhalten/Feste Höhe (contain) wird das Bild auf die Größe der Box gestreckt und eingepasst. Es wird hierbei nicht angeschnitten.

Ist die Auflösung der Produktbilder zu klein für die Anzeigefläche, sodass diese nicht füllend dargestellt werden, kannst Du den Modus Beinhalten/Feste Höhe (contain) wählen. Die Bilder werden so über ihre eigentliche Größe hinaus gestreckt und füllend angezeigt.

Mehr Informationen zur Bildauflösung findest Du hier: Bildgrößen

Layout-Typ

ab Theme-Version 3.0.0

Anzeigemodus
Layout-Typ
Seitenverhältnis

Standard/Original (default)

Standard

einstellbares² Seitenverhältnis

Standard/Original (cover¹)

Großes Bild

einstellbare² feste Höhe

Standard/Original (default)

Minimaler Inhalt

einstellbares² Seitenverhältnis

Füllen/Zugeschnitten (cover)

Standard

einstellbares² Seitenverhältnis

Füllen/Zugeschnitten (cover)

Großes Bild

einstellbare² feste Höhe

Füllen/Zugeschnitten (cover)

Minimaler Inhalt

einstellbares² Seitenverhältnis

Beinhalten/Feste Höhe (contain)

Standard

einstellbares² Seitenverhältnis

Beinhalten/Feste Höhe (contain)

Großes Bild

einstellbare² feste Höhe

Beinhalten/Feste Höhe (contain)

Minimaler Inhalt

einstellbares² Seitenverhältnis

¹ Der Layout-Typ Großes Bild verwendet im Standard die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe im Modus Füllen/Zugeschnitten.

² Du kannst das Seitenverhältnis und die Höhe in der Themen-Konfiguration einstellen

📂
ab Minute 11:35
Layout-Type Standard
Auswahl des Layout-Typ
Standard, Füllen, Beinhalten
Anzeigemodus
Standard, Füllen, Beinhalten
Layout-Typ