# Basic layout
### Basic configuration
#### Basic layout (1):
`Boxed` | `Full Width Boxed` | `Full Width Header` | `Full Width Header & Footer` | `Full Width`
The width of the layout is determined by the basic layout. **Full Width** stretches the web page with all content to the browsers viewport, while **Boxed** fixes the layout including backgrounds to the maximum layout width. **Full Width Boxed** on the other hand lets all backgrounds run to the browser viewport, but the content is oriented to the maximum layout width. **Full Width Header** sets only the header and its contents to the browser viewport. The remaining areas of the store behave as in Full Width Boxed.
#### Layout width (2)
Width of the shop container in pixels. In the basic layouts `Boxed`, `Full Width Boxed` und `Full Width Header` this value is used as the maximum width.
#### Header (mobile) (3):
`Single-line header` | `Multi-line header`
The header can be displayed in a single line on mobile devices. However, depending on the size and orientation of the logo, a multi-line display is more suitable.
Example:
#### Header (3):
`Single line header` | `Two-line Header` | `Multi-line Header`
Decide between three basic header appearances. Not every header setting suits you and your product categories.
* The **single-line header** is particularly suitable for minimalist online stores, which have only a few top categories. The header looks minimal and clear.
* If you have a large number of main categories (approx. 6-8 pieces), the **two-line header** is probably rather the value of your choice. The categories have enough space here and offer your customer the necessary overview. In the two-line header, the top bar is removed as a separate line and integrated into the logo line.
* The **multi-line header** is also suitable whenever a large number of main categories are to be displayed. Unlike the two-line header, the top bar retains its normal display.
{% hint style="info" %}
Top bar display settings are restricted when a two-line header is selected, because the **Top bar** is integrated into the logo line and does not act as a standalone top bar.
{% endhint %}
#### Search (4)
Choose between the appearance as **Overlay search**, **Expandable search** or **Standard search**.
Examples:
#### Top bar (5)
`Default` | `Expandable` | `Collapsible` | `Offcanvas` | `Hidden`
{% hint style="info" %}
Top bar display settings are restricted when a two-line header is selected, because the **Top bar** is integrated into the logo line and does not act as a standalone top bar.
{% endhint %}
{% tabs %}
{% tab title="Default" %}
The default view of the Top bar. Permanently visible.
{% endtab %}
{% tab title="Expandable" %}
Top bar collapsed when the page is initially loaded. Can be folded out via menu button.
{% endtab %}
{% tab title="Collapsible" %}
Top bar folds out when the page is initially loaded. Can be collapsed via menu button.
{% endtab %}
{% tab title="Offcanvas" %}
The top bar of the store can also be displayed as a so-called offcanvas element for a minimalist look. The contents of the top bar are then accessible via the familiar menu icon.
{% endtab %}
{% tab title="Hidden" %}
This option hides the Top Bar.
{% hint style="warning" %}
Only possible if no additional languages, currencies and marketing sliders are available - offcanvas top bar is shown as fallback.
{% endhint %}
{% endtab %}
{% endtabs %}
#### Icon Set (6)
The theme provides several additional icon sets to the [default icon set](https://component-library.shopware.com/icons/) for the storefront. Among other things, the icons for account, search, shopping cart, notepad and much more are exchanged..
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 as offcanvas
The main navigation with the categories of the store transitions to the mobile display from a certain viewport. Using the setting **Main Navigation as Offcanvas (1)** you can determine in which viewport area the mobile menu is displayed. With the help of this option it is even possible to display the mobile menu for the desktop view as well.
Examples:
#### Quantity field \[Default, Quantity selection | Quantity input -/+]
The field for the order quantity can be changed globally to an input field with plus and minus buttons. The setting is global and affects all other input fields, e.g. in shopping cart or checkout.
* **Default*****:*** This value sets all order quantity fields to standard. From shopware 6.5 the default quantity field is an quantity input -/+
* **Quantity selection:** The default quantity selection is used. From a maximum selection quantity > 100 the quantity input -/+ of the theme is displayed.
* **Quantity input -/+:** Instead of the quantity selection, a quantity input with plus and minus buttons is displayed.
{% hint style="success" %}
*Quantity selection:* **Why does the quantity selection become a quantity input?**
This is related to the [max order quantity](https://docs.shopware.com/en/shopware-6-en/settings/shopping-cart#maximum-selection-quantity), which you can set in the administration of the store under **Settings > Cart settings**. About the maximum selection quantity you can define how many products can be selected via the dropdown.
The browser must be render for **each** item in the listing (in the shopping cart, checkout, etc.) such a quantity selection. Setting the maximum selection quantity to a very high value will result in long loading times.
Values beyond 10,000 or even 100,000 not only lead to long loading times, but can also cause the browser to crash. In such an extreme case (maximum selection quantity = 100,000), the browser must render 1 - 100,000 option lines of the quantity selection. With e.g. 24 products per listing this is 2,400,000 lines.
{% endhint %}
Examples:
Default quantity input
Quantity selection
Quantity input -/+
### Global Body Paddings
Global spacing can be set in the theme to achieve framing on full-screen layouts. On mobile devices, these distances should be reduced. Generally, values between 0 - 100 pixels are suitable here.
### Container spacings
The spacing of the container for the main content can be adjusted via the theme. On mobile devices, the values are halved.
Example:
### Border radius
The border radius defines the appearance of buttons, input fields and various other elements, such as product boxes, product slider thumbnails, tabs, modals (popups) and more.
Example:
