Theme Manager
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.
Summary
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.
Settings (4): Here you can activate/deactivate the CSS and JavaScript compiler and set snippets to always reload in the frontend. More information about possible settings are descripted in detail below.
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.
Creating a theme
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.
Settings
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.
Compress JavaScript: (5) When activate, all whitespaces and comments are removed when compiling the JS data.
Theme configuration
Logos & icons
Logos(1):
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.
Configuration
Global Configuration
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
Asynchronouse JavaScript loading: (13) In order to continuos performance improvements JavaScript now can be loaded asynchronously. Default: active
Asynchronouse JavaScript loading
Starting from Shopware 5.3, the compiled and minified javascript code can be loaded asynchronously to improve perceived loading times. That means that the user already sees your page and everything concearning Javascript will be loaded and rendered by the browser afterwards. This way of loading can have positive effects on your Pagespeed rating. If you install 5.3 directly, this setting is active by default, if you did an update, this setting is deactivated.
If you use custom javascript in your theme and include it by running it through the Shopware theme compiler you don't need to change anything, your code will still work as expected. If you include your scripts directly into the template (by using script tags for example), you might get javascript errors if your script has dependecies on Shopware's javascript or e.g. jQuery, as your custom code might be executed before the asynchronous script has even been loaded. To mitigate the risk of a race condition like this, you can execute your code after the asynchronous loading has completed. To make this easier we added a global callback function you can subscribe to in your own code. For more information, please visit our DevDocs.
Load shopping worlds with ajax: (14) When active, changes in the shopping worlds will be loaded asyncronus in the frontend. Default active.
Advanced settings
Additional CSS-Data: (15) This field can be used to embed the CSS data of external services, such as Google Fonts.
Additional JavaScript libraries: (16) Here you can embed external scripts like Google Analytics or other services. Local JavaScript components should be embedded though the $javascript array.
Configurator sets: (17) You can choose between various colour schemes.
Color configuration
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.