# Grundlayout
### 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.
{% hint style="info" %}
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.
{% endhint %}
#### Suche (4)
Wähle zwischen der Ansicht als **Overlay-Suche**, **Ausklappbarer Suche** oder **Standard Suche**.
Beispiele:
#### Top Bar (5)
`Standard` | `Ausklappbar` | `Einklappbar` | `Offcanvas` | `ausgeblendet`
{% hint style="info" %}
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.
{% endhint %}
{% tabs %}
{% tab title="Standard" %}
Die Standardansicht der Top Bar. Permanent sichtbar.
{% endtab %}
{% tab title="Ausklappbar" %}
Top Bar beim initialen Laden der Seite eingeklappt. Über Menü-Button ausklappbar.
{% endtab %}
{% tab title="Einklappbar" %}
Top Bar beim initialen Laden der Seite ausgeklappt. Über Menü-Button einklappbar.
{% endtab %}
{% tab title="Offcanvas" %}
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.
.jpg?alt=media)
{% endtab %}
{% tab title="ausgeblendet" %}
{% hint style="info" %}
Diese Option steht ab Theme Version 2.1.0 zur Verfügung.
{% endhint %}
Diese Option blendet die Top Bar aus.
{% hint style="warning" %}
Nur möglich wenn keine zusätzlichen Sprachen, Währungen und Marketing Slider vorhanden sind - Offcanvas Top-Bar wird als Fallback eingeblendet.
{% endhint %}
{% endtab %}
{% endtabs %}
#### Icon Set (6)
Das Theme stellt verschiedene zusätzliche Icon-Sets zum [Standard-Icon Set](https://component-library.shopware.com/icons/) für die Storefront zur Verfügung. Es werden dabei unter Anderem die Icons für Konto, Suche, Warenkorb, Merkzettel uvm. ausgetauscht.
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.
{% hint style="success" %}
**Warum wird die Mengenauswahl zu einer Mengeneingabe?**
Das hängt mit der [maximale Auswahlmenge](https://docs.shopware.com/de/shopware-6-de/einstellungen/warenkorb#maximale-auswahlmenge) 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.
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.
{% endhint %}
Beispiele:
Standard Mengeneingabe
### 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.
.png?alt=media)
### 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:
