The Theme Manager was created to make it even easier for you to customize your storefront. Follow Configuration > Theme Manager in your backend to access the module. Here you can assign device-specific logos, change the colors and configure various options for navigation and usability (i.e. off canvas menus, infinite scrolling, etc.).
Never define your changes within the original Bare or Responsive Template, as any adjustments can be overwritten by an Shopware update. Instead, create your own theme and define your template changes there.
Shop selection (1): select the shop for which you want to make changes or for which you want to change the theme.
Create theme (2): Create a new theme that deduces from either the Responsive or Bare theme. Further information on this topic can be found below.
Refresh themes (3): Refresh the theme listing.
Designed for Shopware 5 (5): This is an overview of all themes designed for Shopware 5.
Detailed information (6): Information about the selected theme is displayed here.
Select theme (7): The selected theme is assigned to the shop defined within "Select theme for shop" (1). After assigning a theme to the selected shop, a prompt will appear as a popup, which compiles the theme and empty the HTTP-cache. We recommend doing this immediately, because otherwise the theme cache is created on the first request of the frontend and this would significantly slow down the request.
Preview theme / Stop preview (8): A preview of the selected theme is opened; respectively the active preview is closed.
Configure theme (9): Choose from different settings related to the functionality and appearance of the selected theme (more details can be found below). The settings you choose here are inherited only by the selected shop (2). You do not have to create multiple themes for subshops, however please note that this behavior is only available for themes that have the Bare or Responsive theme as a basis.
Name: (2) The name that will appear within the directory name in the filesystem and source code.
Short description: (3) The reference name that will appear within the theme manager.
Long Description: (4) Add a description of the theme here.
Author: (5) Specifiy the author of the new theme here.
License: (6) You can enter the license type here.
After entering all the informations, click "Save" to finally create your theme.
Disable compiler caching: (2) When deactivated, the CSS and JS data will be regenerated with each page view. It is not necessary to rebuild the theme cache after each change.
Note: Activating this option will generate much load at frontend requests - this function should only be activated in development mode!
Create a CSS source map: (3) This function creates a connection between the compiled CSS and LESS code. This simplifies the process of debugging the LESS code.
The logo size is preset from the container, which keeps the space free. On the desktop breakpoint the logo can be maximum 300px wide and 80px high. Independent from the image size the image is always resized to the container size.
In some browsers like the Internet Explorer it may happen, that the image is shown blurry because these browsers doesn't support antialiasing, here you can upload the image in the needed size, so that the browser don't need to resize it.
Icons: (2) Assign icons for your shop.
Off-canvas shopping cart: (1) Activates the small shopping cart overlay on the right hand side. Default: active.
Overlay off-canvas menu: (2) When checked, the off-canvas shopping cart will be displayed as an overlay instead of shrinking the shop. Default: active.
Focus search: (3) When checked, the search bar will appear by default on the home page when in mobile view. Default: inactive.
Display sidebar: (4) When checked, the navigation structure will appear within in the product listing as a sidebar on the left. Default: active.
Show filter in sidebar: (5) When checked, the filter-options will appear under the left menu instead in topof the listing. Default: active
Show checkout step header: (6) When checked, a simplified header will appear during the checkout instead of the normal header. Default: active.
Show checkout step footer: (7) When checked, a minimal footer will appear during the checkout process, showing only the important information. Default: active.
Infinite Scrolling: (8) When checked, the listing will extend dynamically on scroll down instead of classical paging. This works by default in the product listing, manufacturer listing and the search result listing. Default: active.
Number of pages for infinite scrolling: (9) This defines the number of pages which will be automatically loaded. When the last page is reached, a button appears which loads the next page on click. Default: 4
Scale factor of the picture box (lightbox): (10) Define the limit of how far a customer can scale into the item images. Using Automatic, Shopware only allows scaling to the native size of the image. When using fixed settings, blurring may occur depending on the original image size. Due to this, we suggest leaving this setting on Automatic. Default: Automatic.
Apple Web App Title: (11) The title for the Apple Web App can be entered here. When this field is left empty, the name of the shop will be used.
Ajax variant switch: (12) When checked, the variants on the detail page will be changed using AJAX and without a whole page reload. Default: active
Load shopping worlds with ajax: (14) When active, changes in the shopping worlds will be loaded asyncronus in the frontend. Default active.
Additional CSS-Data: (15) This field can be used to embed the CSS data of external services, such as Google Fonts.
Configurator sets: (17) You can choose between various colour schemes.
The color configuration is LESS based, which allows you to work with LESS code in order to adjust the settings or reference fields among themselves.