Basic layout
Last updated
Last updated
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.
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.
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:
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.
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.
Choose between the appearance as Overlay search, Expandable search or Standard search.
Examples:
Default | Expandable | Collapsible | Offcanvas | Hidden
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.
The default view of the Top bar. Permanently visible.
The theme provides several additional icon sets to the default icon set 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:
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:
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.
Quantity selection: Why does the quantity selection become a quantity input?
This is related to the max order 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.
Examples:
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.
The spacing of the container for the main content can be adjusted via the theme. On mobile devices, the values are halved.
Example:
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:
