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.

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.

Search (4)

Choose between the appearance as Overlay search, Expandable search or Standard search.

Examples:

Overlay search
Expandable search
Default search

Top bar (5)

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.

Icon Set (6)

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:

Offcanvas menu on desktops viewports
Default menu on desktop viewports

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.

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.

Example with global body paddings and full width layout

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:

Abstände oben (1) und unten (3)
Abstände rechts(2) und links(4)

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:

Das Beispiel zeigt Buttons "Rund" in Kombination mit Inputs mit einem mittleren Ecken-Radius.

Last updated

Was this helpful?