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
  • Grundeinstellungen
  • Globale Body Abstände
  • Container Abstände
  • Abgerundete Ecken

Was this helpful?

  1. Styling
  2. Allgemein

Grundlayout

In den Grundeinstellungen kannst Du das wesentliche Aussehen Deines Shop gestalten. Diese Einstellung verändern das Layout grundlegend.

Last updated 5 months ago

Was this helpful?

Grundeinstellungen

Grundlayout (1):

Boxed | Full Width Boxed | Full Width Header | Full Width Header & Footer | Full Width

Die Breite des Layouts wird durch das Grundlayout bestimmt. Full Width streckt die Webseite mit allen Inhalten an den Browserrand, während Boxed das Layout inklusive Hintergründe an die maximale Layout Breite festlegt. Full Width Boxed hingegen lässt alle Hintergründe an den Browserrand laufen, die Inhalte orientieren sich jedoch an der maximalen Layout Breite. Full Width Header setzt ausschließlich den Header und dessen Inhalte bis an den Browserrand. Die restlichen Bereiche des Shops verhalten sich wie in Full Width Boxed.

Layout Breite (2)

Breite des Shop-Containers in Pixeln. In allen Grundlayouts außer Full Width wird dieser Wert als maximale Breite der Inhalte und Elemente verwendet.

Header (mobil) (3):

Einzeiliger Header | Mehrzeiliger Header

Der Header kann auf mobilen Geräten einzeilig dargestellt werden. Je nach Größe und Ausrichtung des Logos eignet sich jedoch eine mehrzeilige Darstellung besser.

Beispiel:

Header (3):

Einzeiliger Header | Zweizeiliger Header | Mehrzeiliger Header

Entscheide zwischen drei grundlegende Header-Erscheinungen. Nicht jede Header-Einstellung passt zu Dir und zu Deinen Produkt-Kategorien. Daher gibt es hier ein paar grundlegende Tipps:

  • Der einzeilige Header eignet sich besonders gut für minimalistische Onlineshops, welche nur wenige Oberkategorien besitzen. Der Header wirkt aufgeräumt und klar.

  • Hast Du eine Vielzahl an Oberkategorien (ca. 6-8 Stück), ist wohl eher der zweizeiliger Header die Einstellung Deiner Wahl. Die Kategorien haben hier ausreichen Platz und bieten Deinem Kunden die nötige Übersicht. Im zweizeiligen Header wird die Top Bar als eigene Zeile entfernt und in die Logo-Zeile integriert.

  • Der mehrzeilige Header eignet sich ebenfalls immer dann, wenn eine Vielzahl an Oberkategorien dargestellt werden soll. Im Unterschied zum zweizeiligen Header behält die Top Bar ihre normale Darstellung.

Die Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die Top Bar in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.

Suche (4)

Wähle zwischen der Ansicht als Overlay-Suche, Ausklappbarer Suche oder Standard Suche.

Beispiele:

Top Bar (5)

Standard | Ausklappbar | Einklappbar | Offcanvas | ausgeblendet

Die Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die Top Bar in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.

Die Standardansicht der Top Bar. Permanent sichtbar.

Top Bar beim initialen Laden der Seite eingeklappt. Über Menü-Button ausklappbar.

Top Bar beim initialen Laden der Seite ausgeklappt. Über Menü-Button einklappbar.

Die Top Bar des Shops kann für einen minimalistischen Look auch als sogenanntes Offcanvas Element dargestellt werden. Die Inhalte der Top Bar sind dann über das allseits bekannte Menü-Icon erreichbar.

Diese Option steht ab Theme Version 2.1.0 zur Verfügung.

Diese Option blendet die Top Bar aus.

Nur möglich wenn keine zusätzlichen Sprachen, Währungen und Marketing Slider vorhanden sind - Offcanvas Top-Bar wird als Fallback eingeblendet.

Icon Set (6)

Entypo Icons (solid):

Feather Old Icons:

Feather Icons:

Fluent (outlined):

Fluent (solid):

Heroicons (outlined):

Heroicons (solid):

Iconic (outlined):

Iconly Broken:

Iconly Bulk:

Iconly Light:

Ionicons (outline)

Ionicons (solid):

Material Icons:

Simple Line Icons:

Tonicons Icons:

Main Navigation als Offcanvas

Die Hauptnavigation mit den Kategorien des Shops geht ab einem bestimmten Viewport in die mobile Darstellung über. Über die Einstellung Main Navigation als Offcanvas (1) kannst Du bestimmten, in welchem Viewportbereich das mobile Menü angezeigt wird. Mit Hilfe dieser Option ist es sogar möglich auch für die Desktop-Ansicht das mobile Menü darzustellen.

Beispiele:

Bestellmengenfeld

Mengenauswahl | Mengeneingabe -/+

Das Feld für die Bestellmenge kann global auf ein Eingabefeld mit Plus- und Minus-Buttons umgestellt werden. Die Einstellung ist global und betrifft alle weiteren Eingabefelder, z.B. in Warenkorb oder Kasse.

  • Standard: Dieser Wert setzt alle Bestellmengenfelder in den Standard. Ab Showpare 6.5 ist das Standard-Bestellmengenfeld eine Mengeneingabe -/+

  • Mengenauswahl: Es wird die Standard-Mengenauswahl verwendet. Ab einer maximalen Auswahlmenge > 100 wird die Mengeneingabe -/+ des Themes dargestellt.

  • Mengeneingabe -/+: Anstelle der Mengenauswahl wird eine Mengeneingabe mit Plus- und Minus-Buttons angezeigt.

Warum wird die Mengenauswahl zu einer Mengeneingabe?

Der Browser muss für jeden Artikel im Listing (im Warenkorb, Kasse usw.) eine solche Mengenauswahl rendern. Wird die maximale Auswahlmenge auf einen sehr hohen Wert gesetzt, führt dies zu langen Ladezeiten.

Werte jenseits der 10.000 oder sogar 100.000 führen nicht nur zu langen Ladezeiten, sondern können zum Absturz des Browsers führen. In einem solchen Extremfall (maximale Auswahlmenge = 100.000) muss der Browser 1 - 100.000 Option-Zeilen der Mengenauswahl rendern. Bei z.B. 24 Produkten pro Listing sind das 2.400.000 Zeilen.

Beispiele:

Globale Body Abstände

Im Theme können globale Abstände gesetzt werden um bei vollflächigen Layouts eine Rahmung zu erzielen. Auf mobilen Geräten sollten diese Abstände verringert werden. Allgemein eignen sich hier Werte zwischen 0 - 100 Pixeln.

Container Abstände

Die Abstände des Containers für die Hauptinhalte kann über das Theme angepasst werden. Auf mobilen Geräten werden die Werte halbiert.

Beispiel:

Abgerundete Ecken

Der Ecken-Radius definiert das Aussehen von Buttons, Eingabe-Feldern und verschiedenen anderen Elementen, wie Produktboxen, Produkt Slider Thumbnails, Tabs, Modals (Popups) uvm.

Beispiel:

Das Theme stellt verschiedene zusätzliche Icon-Sets zum für die Storefront zur Verfügung. Es werden dabei unter Anderem die Icons für Konto, Suche, Warenkorb, Merkzettel uvm. ausgetauscht.

Das hängt mit der zusammen, die Du in der Administration des Shops unter Einstellungen > Warenkorb einstellen kannst. Über die maximale Auswahlmenge kannst Du festlegen, wie viele Produkte über das Dropdown ausgewählt werden können.

🎨
Standard-Icon Set
maximale Auswahlmenge
Overlay Suche
Ausklappbare Suche
Standard Suche
Offcanvas-Menü auf Desktop-Ansicht
Standard Menü auf Desktop-Ansicht
Standard Mengeneingabe
Mengenauswahl
Mengeneingabe
Beispiel mit Abständen links und rechts bei einem Full Width Layout
Abstände oben (1) und unten (3)
Abstände rechts(2) und links(4)
Das Beispiel zeigt Buttons "Rund" in Kombination mit Inputs mit einem mittleren Ecken-Radius.