Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
In this article you will learn how to test ThemeWare®.
The ThemeWare® rental version includes a free trial month. Feel free to use this option to test different variants before making your final decision. The rental can be cancelled at any time on a monthly basis or is automatically extended at the prices stated at the time of booking.
Tip: If you purchase extensions in a test domain, you can later transfer the licences to the live domain via your Shopware account. You can find more information about this in the Shopware documentation.
Open the administration of your shop
Switch via the main navigation to the "Store" (1) (2) ("Extensions" => "Store")
Switch to the tab "Themes" (3)
Optional: Enter "ThemeWare" or e.g."Modern" into the search field
Now click the ThemeWare® theme you desire in the overview
The details page of the ThemeWare® theme will open up now
Click the button "Add theme" (4)
A pop-up will now open
Here you can find all the details about the costs after the trial month (5)
Please read and accept the Terms and Conditions (6)
Now confirm the booking with "Purchase this extension" (7)
Now you have subscribed to ThemeWare® with a free trial month.
In the next article you will find out how to install ThemeWare®.
If you have further questions or any problems, you can find more information in our detailed tutorial:
Welcome to the ThemeWare® Introduction
The ThemeWare® Introduction is a written form of the popular ThemeWare® Video Tutorial. As we are currently revising the video tutorial, the introduction is not yet complete, but it is growing bit by bit. If an article is still missing or incomplete, please have a look at the ThemeWare® Video Tutorial.
Note: The ThemeWare® Video Tutorial and the ThemeWare® Introduction are currently being revised or written and will soon be available in an english version.
The ThemeWare® demoshops present all ThemeWare® themes live and in colour.
For technical reasons, themes do not install categories or Shopping Experiences. You can use the free demo data plugin from Shopware, for example, to import sample products and categories.
We also explain how to create categories and the Shopping Experience on the home page in the free ThemeWare® Video Tutorial and step-by-step PDF instructions.
With ThemeWare® you benefit from extremely regular updates with new features and configurations. To avoid affecting the many ThemeWare® shops of our customers, new features and functions are of course deactivated when they are released. You can therefore decide for yourself whether and if so which new feature you want to use.
However, as we still want to present new features in our demoshops , the demoshops will differ slightly from the default configuration of our theme over time. But don't worry, the demoshops are based entirely on ThemeWare®, you can activate everything we show in the demoshops yourself with just a few clicks.
You can find all the information about our demoshops and configuration in the following article. However, we recommend that you complete the introduction first.
Note: Please note that there are, of course, technical differences between the Pro Edition and the Cloud Edition. They concern everything ThemeWare® additionally brings to the administration: the "CMS elements (Shopping Experiences)" as well as the ThemeWare® improvements to the administration such as the ThemeWare® Hub, the Config Finder and the improved presentation of the theme configuration. You can find more information .
In this article you will learn how to install ThemeWare®.
If you have purchased a Shopware extension via the Shopware Store and you have registered your Shopware account in your shop, you can easily install it via the Extension Management.
Tip: Log in to your Shopware account in order to access purchased licences:
Open the administration of your shop
Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My Extensions")
Switch to the tab "Themes" (3)
ThemeWare® is now being displayed in the overview
Now install the extension via the option "Install". (5)
ThemeWare® has now been installed.
In the next article you will learn how to activate ThemeWare®.
If you have further questions or any problems, you can find more information in our detailed tutorial:
In this article you will learn how to quickly find a specific setting in the theme manager.
The ThemeWare® Config Finder is built right into the theme configuration. You type in what you want to change and the theme manager hides everything that does not belong to it. Only the matching configuration fields remain – and you change them right there.
Note: The Config Finder in the theme manager is part of the ThemeWare® improvements to the theme configuration. These improvements are currently not possible in the Shopware Cloud.
Open the theme configuration of your ThemeWare® theme
Click the "Config Finder" button in the top right
Type in what you are looking for – for example "usp background colour" (1)
The theme manager now only shows the blocks and configuration fields that belong to your search term (2)
Tabs without results disappear from the tab bar, the remaining ones show the number of results (3)
Switch to the matching tab and change your setting right away
To end the search, click the cross in the search field. As long as the cursor is in the search field, the "Esc" key does the same. The full configuration is then back as usual.
The search starts from two characters and runs along with every keystroke. It is therefore worth narrowing your term word by word: "usp" shows you everything about the USP bar, "usp colour" noticeably less, "usp colour background" only the background colours.
The search covers both the label of a configuration field and its technical name. So if a tutorial, a changelog or a support reply mentions a technical name such as twt-header-type, you can find the field with that as well.
If you are looking for a whole block rather than a single field, simply enter its name: on a match in a block heading the Config Finder shows the complete block with all of its configuration fields.
The Config Finder can also be used from the search bar of the administration, so even when you are not in the theme manager at all. You will find this and all further details in the ThemeWare® Manual.
Besides the Config Finder in the administration it is still available as a field search engine in the browser. There you also see the technical name, an example value and the path to the setting for every configuration field:
In this article you will learn how to edit ThemeWare®, that is, how to configure it.
You edit themes, and therefore ThemeWare®, in the theme administration. There are two ways to get there:
The first way is to click on "Content" and then on "Themes". (Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.) You then see all installed themes. Click the theme in question, or ThemeWare®, to get to the theme configuration and edit the theme.
In this article you will learn how to configure the colours in your shop.
You can configure colours in several places:
Theme configuration
Shopping Experiences
In this article we show you how to configure your shop logo.
You configure the shop logo through the ThemeWare® configuration in the Shopware 6 theme manager of your administration.
Example: In our example we want to enlarge the logo a little.
Open the administration of your shop
With ThemeWare® and ThemeWare® Utilities you get everything you need for your first Shopping Experience:
You will get a free import plugin with which you can import the Shopping Experience of your theme into your shop (self-hosted) with just a few clicks.
As a Shopware Cloud user, you will get a step-by-step guide in PDF format on how to create the Shopping Experience for your theme.
Furthermore, you will get all the required graphic templates in open PSD format.
...
...
This article is about typography, that is, we show you how to configure the fonts in your shop.
You configure fonts through the ThemeWare® configuration in the Shopware 6 theme manager of your administration.
Example: In our example we change the font for headlines to the font "Helvetica".
Open the administration of your shop
In this article we show you how to add your logo to your online shop, what you should keep in mind and which optimisation options you have.
In this article we assume that you already have a logo for your shop or that you simply use our PSD template.
Besides the main colours and the font, the logo is one of the shop elements that is essential for your branding and corporate design.
Via the ThemeWare® Utilities you receive a matching logo template in PSD format for your theme.
The easiest way to add the shop logo is directly through the ThemeWare® configuration in the Shopware 6 theme manager of your administration.
Example: In our example we add the ThemeWare® logo to our shop.
You can absolutely use more than one ThemeWare® theme in your shop. It is also possible to use the Pro Edition and the Cloud Edition at the same time.
...
...
If you use more than one ThemeWare® theme in your shop, every CMS block and every CMS element exists only once in the administration, even if they are displayed several times. The blocks and elements then keep working until you deactivate the last ThemeWare® theme.
Note: This article is work in progress.
Important: Make sure that all ThemeWare® themes in your shop always have the same version number so that they work as intended!
In this article you will learn how to purchase ThemeWare® after the trial month has expired.
The ThemeWare® rental version includes a free trial month. The rental can be cancelled at any time on a monthly basis.
At the end of the trial month, ThemeWare® is automatically extended at the prices stated at the time of booking.
Example: The first thing you notice in the storefront is the USP bar. In this example we change the background colour of the USP bar.
Open the administration of your shop
Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
The USP bar is an extension, so we switch to the tab "Extensions" (3)
Scroll down a bit and open the block "USP bar" (4)
Scroll down a bit further to the section "Colour configuration"
Clicking the button to the left of the input field "Background colour (Header)" opens the "colour picker" (5)
We select the colour #e2f4fd
Save the theme configuration (6)
Switch to the storefront and reload the page
You have now changed the background colour of the USP bar.
After
If you have further questions or any problems, you can find more information in our detailed tutorial: Editing ThemeWare®
Tip: If a change does not take effect in the storefront, refresh the storefront once using the following tutorial:
Tip: You do not have to click your way through the tabs to find a setting. With the Config Finder you simply type "usp background colour" and immediately see only the matching configuration fields:
Note: There is a separate article about the USP bar later on.
Shopware core (very few, not relevant for the design)
Below we show you how to adapt the main colours in the theme configuration to your needs, introduce the colour configuration field and show you possible configuration values.
You will probably want to adapt the primary colour to your corporate design first.
Open the administration of your shop
Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Layout" (3)
Open the block "Main colours" (4)
As "Primary colour" (5) we choose the value #0e8ed3
In the field "Primary colour (light)" we choose the shade #6ac5f5
As "Primary colour (dark)" we choose #0c7ebb
Save the theme configuration
Switch to the storefront and reload the page
You have now successfully changed the primary colour.
Basic knowledge: You can find more information on the topic "colour configuration" in the article Color configuration.
Note: This does not change the colour of the logo or of design elements in banners of the Shopping Experience. Those are graphics which the browser cannot recolour. However, you can download all graphics in PSD format via the ThemeWare® Utilities and adapt them as you like.
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Header" (3)
Open the block "Logo" (4)
In the section "Basic configuration" select the option "Image logo" in the configuration field "Logo type" (5)
In the section "Logo type 'Image logo'" (6) you can configure, for example, the "Width", the "Height", the "Margin top @Desktop (≥992px)" or the "Hover effect" of the shop logo
We change the "Width" to 240
Save the theme configuration
Switch to the storefront and reload the page
You have now configured your shop logo.
In the block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" you will find the configuration for the logo of the sticky top navigation in the section "Logo".
TODO: Custom-Header
The logo for the "Shopping Experience header" has no separate configuration. It merely replaces the actual logo on pages which use the Shopping Experience header.
TODO: ...
Note: This article is work in progress.
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Layout" (3)
Open the block "Typography" (4)
In the section "Headlines" change the Fonttype to 'Helvetica', sans-serif
Scroll to the section "Font weight"
In our example it is configured as Light: 400, Normal: 400 and Bold: 600.
Select the font weights available in the font you have chosen.
Save the theme configuration
Switch to the storefront and reload the page
You have now changed the font for the headlines in your storefront.
Always configure the font first and only then the font size and the font weight.
Fonts are very individual and depending on the font the size and the weight take effect differently.
There are a few blocks in the theme configuration (for example the "Top navigation" in the tab "Header" or in the ThemeWare® CMS elements) where you can choose whether you want to use the font configured for "Text" or for "Headlines".
Basic knowledge: You can find more information on the topic "font configuration" in the article Font configuration
Tip: It makes sense to use a plain, clearly legible font for the text. If you want to use a more ornate font, then at most in the headline.
Open the administration of your shop
Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Layout" (3)
Open the block "Media" (4)
Click the button (5) to remove the current "Logo @Desktop (≥1200px)"
Upload or open the logo
Via the button "Upload file" (6) you can now upload and add your logo
Via the button "Open media" (7) you can select an image you have already uploaded and drag it into the media field by drag and drop (8)
Repeat steps 6 and 7 for all logos you want to replace
Save the theme configuration
Switch to the storefront and reload the page
You have now successfully replaced the shop logo.
Tip: Simply use our PSD files from the image template download package as a guide, which you receive via the .
Tip: If you find nothing, use the shorter word stem. The search checks whether your term is contained in the label – "image" therefore also finds "Images" and "Image detail", but not the other way round.
Note: This article is work in progress.
Note: With Shopware 6.5, an HTML sanitizer has been implemented. This sanitizer improves security, reliability and usability of the editor by removing unsafe HTML code.
It also sanitizes styles and attributes for consistent and correct code rendering regardless of platform and browser. (see HTML Sanitizer)
In this article you will learn how to activate ThemeWare®.
If you have installed an extension, it is basically "ready for use". In order to be able to use the extension, it must be activated.
Open the administration of your shop
Switch via the main navigation to "Extension Management" (1) (2) ("Extensions" => "My Extensions")
Switch to the "Themes" tab (3)
Activate ThemeWare® via the switch button (4) on the left of the ThemeWare® logo
ThemeWare® has now been activated.
In the next article you will learn how to assign ThemeWare®.
If you have further questions or any problems, you can find more information in our detailed tutorial:
Note: This article is work in progress.
In this article you will learn how to combine ThemeWare® themes.
Have a look at the other themes (demoshops)
Install an additional theme with a free trial month
make sure that both ThemeWare® versions are identical
the procedure is 100% free of charge (make sure to cancel the additional themes before the trial month ends!)
Optional: create a backup of your theme configuration
Compare the theme configurations
Adopt parts of the theme configuration
Compile the theme – done!
Uninstall the additional theme and delete it completely
In this article you will learn how to get free access to the popular ThemeWare® Utilities for your ThemeWare® theme.
Import plugin for a professional Shopping Experience with storytelling elements (Self-hosted)
Step-by-step instructions for a professional Shopping Experience with storytelling elements (Cloud)
All graphics in open PSD format
Logo set with 40 pagespeed optimised graphics for shipping methods
Logo set with 90 pagespeed optimised graphics for payment methods
Graphic sets with various templates and SSL seals
ThemeWare® Customizing Plugin for individual customisations (Self-hosted)
ThemeWare® Customizing App for individual customisations (Cloud)
Incl. 11 essential tips for more orders
Surprise: small gift as a thank-you
On the following page you will find a form which you can use to request the tools free of charge. These will be sent to you immediately by e-mail and will support you in designing your shop.
Select your Shopware version
Select your ThemeWare® theme
Enter your e-mail address
Choose whether you are a shop operator or an agency (freelancer) working for a customer
You have now successfully registered and will receive an e-mail with all the information, download links and more.
ThemeWare® is delivered with German and English snippets. Multilingualism itself is a basic function of Shopware, ThemeWare® integrates into it.
Open the administration of your shop
Switch via the main navigation to "Settings" => "Shop" => "Languages"
Create the desired language or check the existing languages
Open your Sales Channel via the main navigation
Switch to the tab "General"
Assign all languages that should be available in the shop under "Languages"
You translate categories, products, landing pages and Shopping Experiences directly at the respective record. Use the language selection at the top of the form to switch the language and maintain the translation.
All texts of ThemeWare® are available as snippets and are translated per snippet set.
Switch via the main navigation to "Settings" => "Shop" => "Snippets"
Select the desired snippet set
Search for the text and adjust it
You will find a detailed tutorial in the article .
So that your customers can switch the language, display the language selection:
Tab "Header" => Block "Top bar" => Section "Language menu" => "Show language menu"
Tab "Content" => Block "Offcanvas navigation" => Section "Language menu" for the mobile navigation
The section "Language menu" additionally offers the options "Load flag icons", "Load extended flag icons" and "Shopware Language Pack".
Tutorial:
Introduction:
If you would like to use a pure text logo, ThemeWare® of course offers a convenient option for that as well.
You configure the text logo through the ThemeWare® configuration in the Shopware 6 theme manager of your administration.
Example: In our example we activate the text logo in the ThemeWare® configuration.
Open the administration of your shop
Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Header" (3)
Open the block "Logo" (4)
In the section "Basic configuration" select the option "Text logo" in the configuration field "Logo type" (5)
In the section "Logo type 'Text logo'" (6) you can configure, for example, the "Logo text", the "Font family", the "Font size" or the "Text colour" of the text logo
We change the "Text colour" to #0c7ebb
Save the theme configuration
Switch to the storefront and reload the page
You have now configured the text logo.
Snippets - editing texts in the theme
Almost all texts of ThemeWare® are snippets. You can change and translate them at any time without touching a single line of code. Snippets are a basic function of Shopware.
Open the administration of your shop
Switch via the main navigation to "Settings" => "Shop" => "Snippets"
Select the desired snippet set (usually "BASE en-GB")
Search for the text you want to change
Adjust the snippet
Save your change
Switch to the storefront and reload the page
Many configurations in the theme configuration name the matching snippet directly in the help text, for example for the service menu or the USP bar. Use the link in the help text to jump directly to the snippet.
If you cannot find a text, try varying the search term. It may be that some texts contain hyperlinks whose HTML code then "disturbs" the search term.
Example: Let us assume that you are looking for a snippet of the USP bar and that the text in the storefront reads "Excellent support".
It may be that you find the snippet directly, but it may also be that the snippet contains a link: for example Excellent <a href="...">support</a>.
In this case a search for Excellent support would not lead to a result. If you search only for "Excellent" instead, you will find the snippet.
For more information on texts, snippets and translations, see the following tutorial:
One of the biggest advantages of ThemeWare® is its continuous development. You regularly receive new features, sales-promoting features, updates, improvements and, of course, fixes.
Tip: Have a regular look at the "" page in our Service Portal to stay informed about news and upcoming changes!
There are several ways to find out which changes you can look forward to in which release:
The most convenient way is to stay up to date right inside your administration. The ThemeWare® Hub has two dedicated tabs for this: "News" with the news and announcements, and "Changelog" with the complete version history of your theme. You reach the Hub via the main navigation "Content" => "ThemeWare® {your theme}".
Note: The ThemeWare® Hub is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition. You will find all details in the .
The ThemeWare® Update Newsletter is part of the ThemeWare® Utilities. So you won't miss any more news!
The ThemeWare® theme changelog can be found on the Shopware store page of your theme in the "Changes" tab:
And also in the "Changelogs" section of the ThemeWare® Service Portal:
Our update guide explains step by step how to carry out Shopware and ThemeWare® updates safely:
The ThemeWare® demo shops present all ThemeWare® themes live and in colour.
In the upcoming article, you can find more information on how to configure the home page of your theme. In this article, we briefly explain the configuration differences between the Demoshops and the default configuration of ThemeWare®.
With ThemeWare® you benefit from extremely regular updates with new features and configurations. To avoid affecting the many ThemeWare® shops of our customers, new features and functions are of course deactivated when they are released. You can therefore decide for yourself whether and if so which new feature you want to use.
However, as we still want to present new features in our Demoshops, the Demoshops will differ slightly from the default configuration of our theme over time. But don't worry, the Demoshops are based entirely on ThemeWare®, you can activate everything we show in the Demoshops yourself with just a few clicks.
Note: Please note that there are, of course, technical differences between the Pro Edition and the Cloud Edition. However, these relate entirely to the topic "CMS elements (Shopping Experiences)". You can find more information .
You can find all the information about our Demoshops and configuration in the following article. However, we recommend that you complete the introduction first.
DemoshopsThe shop navigation (main navigation) is the category navigation in the header. You create the categories in Shopware, ThemeWare® defines the display.
Open the administration of your shop
Switch via the main navigation to "Catalogues" => "Categories"
In this article we give you an overview of the theme configuration in the theme manager.
The theme manager is the theme administration in the administration. You reach it via the main navigation "Content" => "Themes". (Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.)
In the theme overview you will find all installed and activated themes of your system.
Click the theme in question to get to its theme configuration.
The ThemeWare® theme configuration differs from the standard theme configuration in Shopware 6. We have integrated a number of useful improvements and improved the presentation of the configuration. (Note: In the Shopware Cloud these improvements are currently not possible.)
The service navigation is a second navigation in the footer area, typically with entries such as "Help", "Contact" or "Shipping and payment". Shopware calls it "Footer service navigation".
You create the navigation itself in Shopware via categories and assign it to your Sales Channel. The ThemeWare® configuration then controls where and how it is displayed.
Open the administration of your shop
Switch via the main navigation to "Catalogues" => "Categories"
In this article you will learn how to assign ThemeWare®. This means how you make sure that ThemeWare® is represented in your storefront.
First of all, it is important to understand that the basis for delivering a theme is always a Sales Channel. This Sales Channel must be of the type "Storefront" .
If you create a Sales Channel, you can select different types. And "Storefront" would then be the type that is necessary for the theme to be "delivered".
Open the administration of your shop
Shop pages are content pages without a product listing, for example "About us", "Contact", "Shipping and payment" or "Imprint". They consist of a Shopping Experience with the layout type "Shop page" and a category to which this Shopping Experience is assigned.
Open the administration of your shop
Switch via the main navigation to "Content" => "Shopping Experiences"
Tip: The ThemeWare® Hub has dedicated tabs for steps 3 and 5. In the tab "Backup" you secure the configuration of a theme with a single click, in the tab "Variants" you bring along the customisations from another ThemeWare® theme via "Take over configuration". You reach the Hub via the main navigation "Content" => "ThemeWare® {your theme}". The Hub is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition (Manual).
Create a separate domain URL for every language in the area "Domains"
Select the "Language" and the matching "Snippet" set for every domain
Save the Sales Channel
Attention: Every language needs its own domain in the Sales Channel. Without a domain the language cannot be reached in the storefront.
Note: The theme configuration applies per Sales Channel and is not language-dependent. Colours, images and also texts that you enter directly in the theme configuration (for example the "Logo text") are therefore identical in all languages. Texts that should be translatable are maintained with snippets.
Tip: The own snippets of ThemeWare® start with twt.. If you search for this prefix, you will see them at a glance. Besides that ThemeWare® also uses and extends snippets of Shopware.
Note: If your change is not displayed, clear the Shopware cache and your browser cache once.
Create a new category on the top level, for example "Service"
In the card "General" select the option "Structuring element / Entry point" for the "Category type"
Create the individual entries below this category, for example "Help", "Contact", "Shipping and payment"
Category type "Page / List": a separate page with an assigned layout (Shopping Experience)
Category type "Link": a reference to a product, another category, a landing page or an external site
Make sure that all categories are set to "Active"
Save your categories
So that Shopware knows which category is the service navigation, it has to be assigned as an entry point. There are two ways to do this, the result is identical.
Open the category "Service"
Open the card "Navigation"
Select the option "Footer service navigation" for the "Entry point"
Select your Sales Channel under "Sales Channel assignment"
Save the category
Open your Sales Channel via the main navigation
Switch to the tab "General"
In the card "Navigation" select your category "Service" in the field "Entry point footer service navigation"
Save the Sales Channel
ThemeWare® can output the service navigation in several places.
Open the administration of your shop
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Configure the desired areas:
Tab "Footer" => Block "Copyright footer" => Section "Basic configuration" => "Show service navigation until..."
Here you define up to which viewport the service navigation is displayed in the footer.
Tab "Header" => Block "Top bar" => Section "Service menu [Pro Edition]" => "Show service menu"
You can choose between "don't show", "show as dropdown" and "show as list".
Tab "Content" => Block "Offcanvas navigation" => Section "Service menu [Pro Edition]" => "Show service menu"
This way the service navigation additionally appears in the mobile navigation.
Save the theme configuration
Switch to the storefront and reload the page
You have now set up the service navigation.
You can edit or translate the label of the service menu with the snippet header.indexLinkService.
Introduction: Editing texts in the theme
Note: Only the categories on the level directly below are displayed in the service navigation.
Note: Shopware has removed the service menu in the header with version 6.5 and provides this only as "Footer service navigation". With this configuration you can display it in the top bar again.
Select the layout type "Shop page" and a starting layout
Enter a "Layout name", for example "About us"
Build the page from sections, blocks and elements
Save the layout
The page needs a category so that it can be reached in the shop.
Switch via the main navigation to "Catalogues" => "Categories"
Create a new category, for example "About us"
It makes sense to create it below your footer or service navigation
In the card "General" select the option "Page / List" for the "Category type"
Activate the category with the switch "Active"
Save the category
Open the category
Switch to the tab "Layout"
Click on "Assign layout" and select your Shopping Experience
Save the category
So that your customers find the page, link it in a navigation:
Configuring the footer navigation for the columns in the footer
Configuring the service navigation for the service links
You configure the overall display of the CMS content in the theme configuration:
Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => "Load ThemeWare® CMS styling (CMS shop pages)"
Tab "Shopping Experiences" => Block "All types (Shop pages, Landing pages, Listing pages, Product pages)" for spacings and CSS scroll animations
Introduction: Understanding Shopping Experiences
Note: Alternatively you can link the layout with one or more categories directly in the Shopping Experience via the layout assignment.
Read and confirm the privacy policy
Click on the "Register now for free" button
Note: You can also benefit from our new update newsletter and receive information about updates, changes and new features of ThemeWare®.
Tip: You can also request the Utilities straight from your administration. The ThemeWare® Hub has a "Utilities" tab for this – you reach it via the main navigation "Content" => "ThemeWare® {your theme}". The Hub is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition (Manual).
Tip: Check your spam folder if you have not received the e-mail promptly or request the utilities again if in doubt.
Note: The ThemeWare® Utilities are updated from time to time. If you are missing a link, just repeat the registration process to receive the ThemeWare® Utilities e-mail again.
Category type "Page / List": a category with associated products and a layout
Category type "Structuring element / Entry point": only used for outlining purposes and not callable by itself
Category type "Link": a reference to a product, another category, a landing page or an external site
Make sure that all categories are set to "Active"
Save your categories
Open your Sales Channel via the main navigation
Switch to the tab "General"
Check the field "Entry point main navigation" in the card "Navigation"
Define with the "Navigation levels" how many category levels are loaded
Save the Sales Channel
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Header"
Open the block "Top navigation"
Select at "Top navigation" how the navigation is displayed:
"don't show"
"show list"
In the section "Basic configuration" you configure among others "Show home link", "Show arrows", the "Hover effect" and the "Height"
In the sections "Colour configuration" and "Typography" you adjust colours, font family, font size and text formatting
Open the block "Top navigation flyout"
Select at "Top navigation flyout" the display of the submenus:
"Shopware default"
"ThemeWare® Flyout"
"ThemeWare® Dropdown"
"ThemeWare® Flyout with cards"
"ThemeWare® Flyout with sidebar"
"ThemeWare® Flyout with teasers"
In the section "Basic configuration" define with the "Navigation levels" how many category levels are displayed
In the section "Design" you select the desired design for the "Flyout" and the "Dropdown navigation"
You configure the mobile navigation separately:
Tab "Content" => Block "Offcanvas navigation"
Save the theme configuration
Switch to the storefront and reload the page
You have now configured the shop navigation.
Introduction: Configuring the service navigation
Introduction: Adapting the design of the category page
Attention: The "Navigation levels" of the Sales Channel are the upper limit. Categories below that level are not loaded into the storefront at all and therefore cannot be displayed by ThemeWare® either.
Tip: Each category can override the global setting "Top navigation flyout" individually via the category custom field "Top navigation flyout".
The first level are the tabs (1) at the top of the configuration. Here you see the rough structure of the storefront – such as "Header", "Footer", "Content", "Shopping Experiences" and so on.
The next level are the blocks (2). These are the expandable cards which group the configuration by individual elements – such as the "Logo", the "Top navigation", the "Cookie permission" and so on.
Within a block the configuration fields are grouped once more into sections (3), such as the "Basic configuration", the "Colour configuration", the "Image configuration", the "Font configuration" and so on.
Within these sections you will then find the actual configuration fields (4).
In principle the ThemeWare® configuration is divided by tabs into the most important parts of the Shopware 6 storefront of a shop.
It starts with the "Layout", which affects the entire shop. Then comes the tab "Header", the top area of your storefront. This is followed by the "Footer", the bottom area of your shop, which you can configure extensively.
In the tab "Content" you will find cross-page content elements such as the "Breadcrumb" or the "Cookie permission". The tab "Shopping Experiences" contains configuration fields around the design of your Shopping Experiences.
The tabs "Listing pages" and "Product pages" contain the configuration for the corresponding page types of your shop.
In addition there are a few special tabs:
First there is the tab "Widgets". Here you will find the configuration for the ThemeWare® widgets. Widgets are a feature of ThemeWare® for Shopware 6. They are content elements which can be output at various places in the storefront (for example payment and shipping methods, social icons). The footer, for instance, consists of these widgets. This means that you configure the footer itself in the tab "Footer" and the widgets you use in it in the tab "Widgets".
Second there is the tab "Extensions". Here you will find larger and completely independent additional features of ThemeWare® which are usually output at a particular place in the storefront (for example the USP bar).
Finally there is the tab "Others". It contains various general configurations for advanced users, beta features and compatibility configurations of the ThemeWare® HC-Architecture®.
The theme configuration is extensive. If you know what you want to change but not which tab it is in, search for it – with the ThemeWare® Config Finder.
It exists twice: as a field search engine in the browser and right inside the theme manager. In the browser you look things up, in the theme manager you change them straight away. The next article shows you how to work with it:
When you save the configuration, do not be surprised that the theme manager jumps back to the first tab. Unfortunately this is a behaviour of Shopware which we cannot influence. Perhaps it will be fixed with a future Shopware update.
So simply remember which tab you were in. When you switch back to that tab, the corresponding block is always open again.
Make rather small changes, or few changes at a time. Then save and have a look at the effect in the storefront.
If you proceed slowly and in small steps, you can better keep track of what you edited last, which makes further changes or corrections easier.
Perhaps also save or copy which value you changed and what the previous value was, so that you can simply revert the change if you do not like it.
Note: In our documentation, in the changelog and in our support replies we always state the path to a setting in exactly this order: Tab => Block => Section => Configuration. An example: Tab "Extensions" => Block "USP bar" => Section "Colour configuration" => "Background colour (Header)".
Tip: Many configuration fields have help texts . These are very important. Always have a look at them, they explain exactly what the individual options or the configuration mean and give you valuable guidance.
Tip: Experience shows that many small steps get you to your goal faster.
Switch via the main navigation to the sales channel of your storefront in the section "Sales Channels" (1)
Switch to tab "Theme" (2)
Now click on the "Change theme" button in the "Theme assignment" section (3)
Select your ThemeWare® theme in the "Select theme" pop-up (4) and click on the "Change theme" button (5)
Click on "Save" at the top so that the theme will be assigned and compiled (6)
ThemeWare® has now been assigned to your storefront.
If you have further questions or any problems, you can find more information in our detailed tutorial: Activating ThemeWare®
Tip: You do not need to create a Sales Channel of the type "Storefront" if you already have a corresponding Sales Channel.
With the default installation, Shopware usually creates a suitable Sales Channel that is titled with the shop name selected during the installation.
Category pages (listing pages) show your products in a listing. ThemeWare® gives you extensive options to adapt their design, from the number of columns to the content of every product box.
The layout type of the product boxes is defined in the Shopping Experience of the category page.
Open the administration of your shop
Switch via the main navigation to "Content" => "Shopping Experiences"
Open the layout of your category page (layout type "Listing page")
Select the element "Product listing"
Select the "Layout type" of the product boxes:
"Standard"
"Big image"
Save the layout
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Tab "Listing pages" => Block "Product box"
In the section "Basic configuration" you will find among others:
"Layout type": "Border colour (default)" or "Drop shadow"
"Hover effect"
"Text alignment"
In the section "Content" you define which information is displayed, for example "Show product description", "Show manufacturer", "Show product number", "Show variant characteristics", "Show price unit" or "Show list price".
The sections "Colour configuration" and "Typography" contain the colours and fonts of the product box.
Tab "Listing pages" => Block "Product badges (in the product box)"
Save the theme configuration
Switch to the storefront and reload the page
Introduction:
Introduction:
The USP bar is a bar with your most important selling points, for example "Free shipping" or "30 day money back guarantee". It can be displayed in the header and in the footer.
Open the administration of your shop
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Extensions"
Open the block "USP bar"
Activate "Show USP bar in header" and/or "Show USP bar in footer"
The section "Basic configuration" offers among others:
"Position (Header)" and "Position (Footer)": where the bar is output
"Layout type (Header)" and "Layout type (Footer)": for example with small or large icons
"Show subtitle (Large icons)"
You configure the colours in the section "Colour configuration", fonts and icon sizes in the section "Typography".
In the section "USPs" you define for every benefit from which viewport it is displayed ("Show benefit #1 from..." and following). This way you only show the most important points on small screens.
You maintain the content of the USP bar with snippets:
For the other benefits use usp2, usp3 and so on accordingly.
You will find an overview of all Shopware 6 icons via the following link. In the theme configuration and in snippets of ThemeWare® you can use the icons from the icon set "default".
Introduction:
The footer navigation is the multi-column navigation in the footer, for example with the columns "Service", "Information" or "About us".
You create the navigation itself in Shopware via categories and assign it to your Sales Channel. In the ThemeWare® configuration you then define where it is output in the footer and how it looks.
Open the administration of your shop
Switch via the main navigation to "Catalogues" => "Categories"
Create a new category on the top level, for example "Footer"
In the card "General" select the option "Structuring element / Entry point" for the "Category type"
Create the columns below this category, for example "Service", "Information", "About us"
The category type "Structuring element / Entry point" makes sense here as well
Create the individual links below each column, for example "Contact", "Shipping and payment", "Terms and conditions"
Category type "Page / List": a separate page with an assigned layout (Shopping Experience)
Category type "Link": a reference to a product, another category, a landing page or an external site
Make sure that all categories are set to "Active"
Save your categories
There are two ways to do this, the result is identical.
Open the category "Footer"
Open the card "Navigation"
Select the option "Footer navigation" for the "Entry point"
Open your Sales Channel via the main navigation
Switch to the tab "General"
In the card "Navigation" select your category "Footer" in the field "Entry point footer navigation"
In ThemeWare® the footer navigation is a widget that you assign to one of the footer elements.
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Tab "Widgets" => Block "Footer navigation"
In the section "Basic configuration" you configure the "List-style" and the "Padding left (list with marker)"
In the section "Colour configuration" the "Link colour", the "Link colour @hover", the "Marker colour (list with marker)
Afterwards save the theme configuration and reload the storefront once.
Introduction:
Introduction:
Shopping Experiences are the modular content system of Shopware 6 (CMS). With it you design pages freely, without any programming knowledge. ThemeWare® extends this system with numerous additional blocks and elements.
ThemeWare® can output the logos of your payment and shipping methods in the footer and on the product page. The logos come directly from the payment and shipping methods of Shopware.
Open the administration of your shop
Switch via the main navigation to "Settings" => "Payment methods"
Open the block that matches your layout type:
"Layout (Layout type 'Standard')"
"Layout (Layout type 'Big image')"
"Layout (Layout type 'Minimal content')"
In the section "Columns per row" you define the number of products per row for every viewport
In the section "Columns per row (with Sidebar)" you do the same for pages with a sidebar
Note: The selected layout type defines which ThemeWare® configuration block applies to the product boxes.
Save the category
Open the block "Assigning and arranging content"
In a free section (for example "Element 1") select the option "Footer navigation" for the "Content (Widget)"
Define the "Section" (for example "Main section") and the "Order"
Save the theme configuration
In the section "Typography" the "Text formatting" and whether "Underline links" is active
Note: The categories on the level directly below become columns, the category name is output as the column headline. All categories below that appear as rows within the column.
"Height (Small icons)" and "Height (Large icons)"
"Benefit alignment (Small icons)" and "Benefit alignment (Large icons)"
"Content (Widget)": an additional widget in the USP bar
twt.extension.uspBar.usp1.tooltip
An optional tooltip
twt.extension.uspBar.usp1.title
The text of the first benefit
twt.extension.uspBar.usp1.icon
The icon of the first benefit
twt.extension.uspBar.usp1.subtitle
The subtitle (with large icons)
Note: If you do not want to output a benefit at all, set the field "Show benefit #X from..." in the section "USPs" to "don't show". An empty snippet does not hide the benefit.
Block
A building block within a section, for example an image text block or a product slider
Element
The actual content within a block, for example an image, a text or a product slider
When creating a Shopping Experience you select the "Layout type". It defines what the layout can be used for:
"Shop page": for pages such as "About us", "Contact" or "Shipping and payment"
"Landing page": for campaign and promotion pages
"Listing page": for categories including the product listing
"Product page": for product detail pages
Open the administration of your shop
Switch via the main navigation to "Content" => "Shopping Experiences"
Click on "Create new layout"
Select the "Layout type" and a starting layout
Enter a "Layout name"
Build your layout from sections, blocks and elements
Save the layout
A layout only becomes visible once you assign it. The assignment always takes place at the respective object:
Shop page
At a category of the type "Page / List" in the tab "Layout"
Landing page
At the landing page in the tab "Layout"
Listing page
At the category in the tab "Layout"
Use the button "Assign layout" or "Change layout" to select the desired layout.
When editing a Shopping Experience you will find the categories of ThemeWare® next to the Shopware categories in the block selection:
ThemeWare® General
ThemeWare® Category teasers
ThemeWare® Banners
ThemeWare® Columns
ThemeWare® Grids
ThemeWare® Text & images
ThemeWare® Listing page
ThemeWare® Product page
ThemeWare® Sale
ThemeWare® Sidebar
ThemeWare® Other
You will find the general settings for Shopping Experiences in the theme configuration:
Tab "Shopping Experiences" => Block "All types (Shop pages, Landing pages, Listing pages, Product pages)": spacings and CSS scroll animations
Tab "Shopping Experiences" => Block "ThemeWare® CMS styling": here you define among others whether the "ThemeWare® CMS styling" is loaded for CMS shop pages, CMS landing pages, CMS listing pages and CMS product pages, and configure spacings, background and border colours of CMS sections and CMS blocks
There are additional separate blocks for individual ThemeWare® blocks, for example "Image slider (Category 'Images')", "Image gallery (Category 'Images')" or "Product slider (Category 'Commerce')".
Introduction: Editing and creating shop pages
Layout
The entire Shopping Experience, with a layout type (for example "Shop page")
Section
A horizontal area within the layout, either full width or with a sidebar
Note: You can change the layout type afterwards in the layout settings. The layout type "Product page" is an exception, it cannot be changed anymore.
Tip: A layout can be assigned several times. If you change the layout, all pages that use it change as well.
Store an image from your media library in the field "Logo"
Save the payment method and repeat the process for all other payment methods
Switch via the main navigation to "Settings" => "Shipping"
Open a shipping method
Store an image in the field "Upload logo"
Save the shipping method and repeat the process for all other shipping methods
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Now click on your ThemeWare® theme to start editing
Switch to the tab "Footer"
Open the block "Assigning and arranging content"
In a free section (for example "Element 1") select one of the following options for the "Content (Widget)":
"Payment methods"
"Shipping methods"
Define the "Section" and the "Order"
Tab "Widgets" => Block "Payment logos" or "Shipping logos"
The section "Basic configuration" offers among others:
"Maximum height": limits the height of the logos
"Corner type": the corner shape of the logos
"Link logos": links the logos
"Show fallback badges": outputs the name as a badge if no logo is stored for a payment or shipping method
"Show only custom images": ignores the logos from Shopware and outputs only your own images
In the section "Colour configuration" you configure the "Coloration", the "Border colour" and the colours of the fallback badge.
If you want to output logos for which there is no payment or shipping method (for example a buyer protection seal), use the custom images.
Tab "Widgets" => Block "Payment logos" or "Shipping logos" => Section "Images" => "Custom image 1" to "Custom image 3"
You can additionally output the payment logos in the buy box of the product page.
Tab "Product pages" => Block "Payment logos (in the buy box)"
Introduction: Configuring the footer
Note: Only payment and shipping methods that are assigned to your Sales Channel and are active are output.
Tip: You can edit the titles and alt texts of the custom images with the snippets twt.widget.payment.customImage1.title and twt.widget.shipping.customImage1.title (accordingly for image 2 and 3).
If you have any questions or problems, our popular ThemeWare® Service Portal is available around the clock. There you will find all the links to ThemeWare®, useful tools, answers to the most frequently asked questions, solutions to every known problem and news about ThemeWare® and Shopware 6.
The Service Portal is therefore always the first point of contact for all matters relating to ThemeWare®:
The ThemeWare® Hub is even faster: it brings the Service Portal right into your administration, so you do not have to leave your shop at all. You reach it via the main navigation "Content" => "ThemeWare® {your theme}".
The "Support" tab bundles:
the live chat for questions without any waiting time
all self-help sources: Knowledge Base, Manual, Shopware documentation, video tutorial, Config Finder, frequently asked questions and the update guide
Create a ticket, Improvement suggestion and Complaint
our Services as well as news, changelog and the compatibility overview
Thanks to thousands of tickets, we have already answered most of the questions and most of the bugs have long been known and solved. So that all customers can benefit from this knowledge, we have documented our knowledge in the ThemeWare® Knowledge Base, the ThemeWare® Manual and the ThemeWare® Video Tutorial.
In addition, you can find almost all information about Shopware 6 in the Shopware Documentation.
This allows you to solve almost all questions and problems yourself without having to wait for our answer.
ThemeWare® Video Tutorial (translation will follow)
If you still need support, you can open a ticket via the ThemeWare® Service Portal or directly via your Shopware Account to get quick help.
Have a look at the
Check the for problems/errors
Have a look at the ThemeWare® Documentation
We answer all tickets as quickly as possible. If you do not receive an answer within 24 hours, there was probably a technical problem with your enquiry. Just try again.
If you need an estimate of effort and cost from our ThemeWare® experts for an individual Shopware design, landing page designs, individual customisations or other Shopware services, always use the ThemeWare® Service Portal:
Do you have an idea for a feature that is still missing and from which many other shop operators would benefit as well? Are you unhappy with ThemeWare® or with one of our services? Do you have wishes or feedback on articles or videos? Then let us know!
We are always happy to receive suggestions and hints that help us improve our products even further.
Every piece of feedback is reviewed and answered by our developers. We are also happy to inform you as soon as your feedback has made its way into ThemeWare®.
The footer of ThemeWare® has a modular structure. You decide which content (widgets) appears in the footer, in which section it is placed and in which order it is output.
Upper section
First zone for widgets, for example newsletter or benefits
Main section
Open the administration of your shop
Switch via the main navigation to the "theme administration" ("Content" => "Themes")
Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
Open the block "Assigning and arranging content"
Here you will find the sections "Element 1" to "Element 11", each with the same configurations:
"Content (Widget)": the widget that is output in this place
The following widgets are available:
About us
Awards, seals or certificates
Benefits
Communities or social media
The blocks "Upper section", "Main section", "Lower section" and "Copyright footer" each offer the same sections:
"Basic configuration": paddings and margins, alignment of the columns
"Colour configuration": text, link and background colours
"Background image": your own background image including image size, position, repeat and attachment
You will find the overall settings (background colour, background image, font families and font sizes of the entire footer) in the block "Layout".
Save the theme configuration
Switch to the storefront and reload the page
You have now configured the footer.
Introduction:
Introduction:
Introduction:
Product page
At the product in the tab "Layout"
Switch to the tab "Footer"
Open the block "Layout"
In the section "Columns" define the "Number of columns @Tablet (≥768px)" and the "Number of columns @Desktop (≥1200px)"
"Section": "Upper section", "Main section" or "Lower section"
"Order": the sorting within the section (a lower number comes first)
"Element width": the width of the element
"Mobile view": the behaviour in the mobile view (for example collapsible)
Set the "Content (Widget)" of the elements you do not need to "don't show"
Custom text
Footer navigation
Service hotline
Location or retail store
Newsletter
Payment and shipping methods
Payment methods
Revocation
Shipping methods
Main zone for widgets, for example footer navigation, about us, service hotline
Lower section
Third zone for widgets, for example payment and shipping methods
Logos footer
Separate area below, for example for awards
Copyright footer
Bottom line with copyright, service navigation and branding
Note: A reduced footer is output in the checkout. You configure it in the block "Minimal footer (in the Checkout)".
Tip: You configure the content of the widgets themselves in the tab "Widgets". There you will find a separate block for every widget.
ThemeWare® Video Tutorial (translation will follow)
Use the ThemeWare® Search to search the entire ThemeWare® documentation
Optional: ThemeWare® Service Portal
Go to the Service Portal: service.themeware.design/en
Click on "Request support" in the blue navigation (at the top of the screen)
Scroll to the "Create a ticket" section
Open the "Request ThemeWare® support" tab
Shopware Account
Log in to your Shopware Account
Switch to the "Merchant" area
Open the section "Support"
Click on "Request Support" at the top right of the navigation bar
Select your shop
Select the option "Extension Support"
Select the extension for which you require support
Note: The ThemeWare® Hub is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition. You will find all details in the Manual.
Tip: Make sure to submit your reply address correctly. Unfortunately it happens occasionally that answers cannot be delivered.
