General
In the basic settings of the layout you can design the essential appearance of your store. These settings are settings with the most impact on the storefront.
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:
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:
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.
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 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:
Product images
The theme supports determining the aspect ratio of your product images. The determination of the aspect ratio is done by preset aspect ratios (1) or by specifying exact image width (2) and image height (3), which are used for product listings and the product image gallery.
As soon as exact image dimensions in fields Width product image (2) and Height product image (3) are entered, they will be used instead of the Aspect ratio product images (1).
Why and especially how you determine the optimal image format of your product images, we have you in the article under CONTENTS > Product images > Imageformat summarized in detail.
The theme provides with the option background color overlay (5) a function to colorize product images by a background color. This way, even non-cropped product images in JPG format can be mapped to a background color.
pageProduct image backgroundProdukt Layout-Typ
In the categories, the layout type for the product boxes is set globally in the configuration of the shopping experiences under Shopping Experiences > Listing pages in the category listing element. However, the search results page, the wishlist and crossselling are areas that cannot be controlled, or only partially, via the shpping experiences. You can therefore define a layout type for the individual areas.
In addition to the Standard, Big image and Minimal content layout types, the Wishlist (2) has an additional Wishlist layout, which also shows the manufacturer and the delivery time.
Global background
In these settings, a global background image (1) can be uploaded and configured for the entire online-shop.
Determine about the Repeat (2) whether the image should repeat like a pattern. You can determine whether it should repeat vertically, horizontally or in both axes.
Attachment (3) lets you choose between an fixed or scroll image. If the image is fixed, it remains visibly fixed in the window even when scrolling. If the image is scrolling, it disappears when scrolling and moves upwards with the document flow.
With position (4) and size (5) you determine how the image should fit and position in the background of the store.
Valid values for position (4) are size values according to the CSS Specification:
e.g. auto | cover | contain | 100% 100% | 100px 100px
Example:
Preloader
The preloader is an animation when loading the page. This fades the often unattractive structure of the page to the viewer with a small animation. The store logo can also be integrated here in an animated way.
Display (1) allows you to choose to display the animation on every page or only when the home page is loaded. In addition to background and color, there is a possibility to set a hide animation (3) to animate the hiding of the preloader.
Timeout (4) specifies the time in milliseconds how long the preloader is at least visible. Otherwise, with very short loading times, the preloader may only flare up briefly.
Example:
Accent line
Accent line at the top of the page. The accent line is not displayed with a value of 0.
Example:
Scroll animation
The shopping experiences scroll animations are triggered when scrolling the page. In this case, the contents are faded in by an animation as soon as they come into the visible area by scrolling.
To apply the scroll animations follow our documentation on the Shopping experience animation.
The duration (1) specifies how long the animation lasts in seconds. The delay (2) describes the duration until the animation starts. So if an element reaches the visible area by scrolling, the animation waits another 0.25 seconds until the animation starts.
You can animate the product listing (3), the individual product boxes in the listing are shown in animated form one after the other.
Last updated
