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.

Example

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.

1. Open the administration of your shop

2. 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.

3. Now click on your ThemeWare® theme to start editing

4. Switch to the tab "Layout" (3)

5. Open the block "Media" (4)

6. Click the button (5) to remove the current "Logo @Desktop (≥1200px)"

7. 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)

8. Repeat steps 6 and 7 for all logos you want to replace

9. Save the theme configuration

10. Switch to the storefront and reload the page

You have now successfully replaced the shop logo.

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the tab "Themes" (3)

4. Deactivate ThemeWare® via the switch button (4) on the left of the ThemeWare® logo

   • ℹ️ Note: To deactivate a theme, it must no longer be assigned to any Sales Channel!

5. Clear the entire Shopware cache and reload the administration

ThemeWare® has now been deactivated.

In dieser Anleitung erfährst du, wie du eine Kategorie-Seite anlegen kannst.

Kategorie anlegen

1. Wechsel über die Hauptnavigation in die "Kategorie-Verwaltung" (1) (2) deines Shops ("Kataloge" => "Kategorien")

2. Wähle die gewünschte Kategorie aus in welcher die neue Kategorie erscheinen soll

3. Klicke auf den Kontext-Button (3) um das Kontextmenü zu öffnen und eine neue Kategorie anzulegen

4. Wähle ob die neue Kategorie vor, nach oder als Subkategorie innerhalb der ausgewählten Kategorie erstellt werden soll (4)

5. Benne die Seite (5) und lege die Seite an (6)

6. Nun kannst du die Kategorie-Seite bearbeiten

7. Aktiviere die Seite damit Sie auch in der Storefront angezeigt wird (7)

Du hast nun eine Kategorie erstellt.

Weitere Informationen zu Kategorien in Shopware 6 findest du in der Shopware Dokumentation:

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.

1. Open the administration of your shop

2. Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")

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.

1. Open the administration of your shop

2. Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")

In the ThemeWare® configuration you will find two font configuration fields (text fields of the type ) in tab "Layout" => block "Typography" - one in section "Text" and one in section "Headlines".

You will find more on the topic of "font configuration" in the ThemeWare® introduction: and in the basic knowledge article: .

In the so-called ThemeWare® Shopping Experiences Header, the header overlays the Shopping Experience on the main page or on selected category pages. This is a configurable effect to enable a particular look in ThemeWare®.

In themes like ThemeWare® Exquisite, ThemeWare® Lights or ThemeWare® Outdoor the "Shopping Experiences Header" is already configured. The corresponding look you may have a look at in the corresponding demo shops:

• ThemeWare® Exquisite

You are able to de-/activate the "Shopping Experiences Header" via the ThemeWare® configuration.

The corresponding configuration is available in the Tab "Header" => Block "Shopping Experiences Header" => Field "Shopping Experiences Header".

1. Option "don't apply (default)":

   • This option virtually is the default header representation.

   • The Shopping Experience is placed after the header. The header does not overlay the Shopping Experience.

In order that the "ThemeWare® Shopping Experiences Header" can develop its full effect, the Shopping Experience on your main page needs a suitable Shopping Experience element in the first place. Especially suitable are blocks like "Image, full-sized" or "Image slider" out of the block category "Image".

The images used should be sufficiently large (e.g. 1920x1024px) and thus compressed as well as possible. In addition, you should choose or create motifs in which as little as possible "happens" in the upper area of the image, in order that the logo, buttons and navigation are still easily recognizable.

Screenshots

Custom fields are a core feature of Shopware 6 and let you extend products, categories or manufacturers individually. With custom fields you flexibly store additional information and output it in the storefront when needed.

The following step-by-step guide shows how to create a custom field, using a GPSR "safety notice" as an example.

Go to the custom field management:

"Settings" => "System" => "Custom fields" => "Create set"

Click "Create set" and create a new custom field set.

• Technical name: e.g. custom_gpsr

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:

1. 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.

2. The other way is to select your sales channel. Then click on the tab "Theme" and there on "Edit theme". This takes you straight to the theme configuration and you can edit the theme.

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

1. 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.

2. Now click on your ThemeWare® theme to start editing

3. The USP bar is an extension, so we switch to the tab "

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:

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".

1. Open the administration of your shop

How to make product boxes in product listing or sliders more compact is explained in the following article:

Before you start with our tutorials, we recommend you take a look at our and the . There you can learn all the important basics which will help you a lot with the guides.

In addition, we strongly recommend that you take a look at the official Shopware documentation, because many of the things you configure in the guides relate to some of Shopware's core features:

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.

Editing texts

1. Open the administration of your shop

2. Switch via the main navigation to "Settings" => "Shop" => "Snippets"

3. Select the desired snippet set (usually "BASE en-GB")

4. Search for the text you want to change

5. Adjust the snippet

6. Save your change

7. 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:

In dieser Anleitung erfährst du, wie du ein Kategorie-Layout erstellen kannst.

Layout erstellen

1. Wechsel über die Hauptnavigation in die "Erlebniswelt-Verwaltung" (1) (2) deines Shops ("Inhalte" => "Erlebniswelten")

2. Optional: Du kannst die Layouts über den Reiter "Kategorieseiten" auf diesen Seitentyp eingrenzen (3)

3. Klicke auf den Button "Neues Layout anlegen" (4)

4. Wähle im folgenden Schritt den Typ "Volle Breite" aus (5)

   • Hinwies: Die Auswahl dient lediglich als Basis, du kannst später beliebig Sektionen hinzufügen und entfernen

5. Zum Abschluss der Erstellung musst du deinem Layout einen Namen vergeben (6)

6. Erstelle das Layout nun mit dem Button "Layout erstellen" (7)

Du hast nun ein Erlebniswelt-Layout vom Typ "Kategorieseite" angelegt. Fülle dies nun mit deinem gewünschten Inhalt.

Weitere Informationen zu Kategorien in Shopware 6 findest du in der Shopware Dokumentation:

With ThemeWare® you highlight a single category in the top navigation with colour – for example your sale, new arrivals or promotion category. This way you deliberately draw your customers' attention to the menu item that matters most to you.

Requirements

• a category you want to highlight in the top navigation

• the "Top navigation" layout type in the header (the highlighting does not apply to the "Entry point main navigation")

Step 1: Define the appearance of the highlighting

"Theme Manager" => your ThemeWare® theme => "Header" tab => "Top navigation" block => "Link (highlighted)" section

Define here how a highlighted menu item should look – for example via the "Text colour (highlighted)", "Background colour (highlighted)" and "Icon colour (highlighted)" (each also for the @hover and @active state). Save your changes.

"Catalogues" => "Categories" => select category => "Custom fields"

Set the option in the "Highlight category" custom field to "yes" and save the category.

The selected category now appears in the chosen look in the top navigation. If the highlighting does not show up, clear the Shopware cache once.

You can find all configuration options and the custom field in detail in the ThemeWare® manual:

Before reporting an issue, you can easily check yourself whether your theme might be responsible for the problem.

Assigning Shopware Standard Theme

Assign the "Shopware default theme" once to your storefront . Does the problem also exists in the default theme, it is 99.9% likely that ThemeWare® is not responsible for the trouble.

Further information:

In this section you will find useful instructions around the topic "Categories"

Before starting to edit your categories or category layouts we recommend you to take a look at our video tutorial. In the video"Adapting the design of the category page" we explain important basics which will help you a lot when creating and editing.

In addition, we recommend to have a look at the official Shopware documentation:

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.

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My Extensions")

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.

With ThemeWare® you benefit from continuous development. From time to time, therefore, we may remove or replace configuration fields.

If "orphaned configuration fields" remain in the configuration, you can remove them as follows:

1. Open the administration of your shop

2. Switch via the main navigation to "Theme Management" (1) (2) ("Content" => "Themes")

   • Note: In the Shopware Cloud, you will find the "Themes" section directly in the main navigation.

3. Now click on your ThemeWare® theme to start editing

4. Click on the dropdown icon at the "Save"-Button

5. Save your configuration with the option "Clean Save" (4)

ThemeWare® has now been cleaned up.

In this article you will learn how to get free access to the popular ThemeWare® Utilities for your ThemeWare® theme.

ThemeWare® Utilities: Helpful tools and extras for the design of your store

• 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.

1. Select your Shopware version

2. Select your ThemeWare® theme

3. Enter your e-mail address

4. 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.

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.

Find configuration

1. Open the theme configuration of your ThemeWare® theme

2. Click the "Config Finder" button in the top right

3. Type in what you are looking for – for example "usp background colour" (1)

4. The theme manager now only shows the blocks and configuration fields that belong to your search term (2)

5. Tabs without results disappear from the tab bar, the remaining ones show the number of results (3)

6. 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 the ThemeWare® plugin configuration (not theme configuration) you have the option to enable the ThemeWare® "Debug mode".

If "Debug mode" is enabled, the "Expert settings", for example, are no longer taken into account.

Debugging

If you have issues in your shop, activate "Debug mode" once, clear the Shopware cache and your browser cache and then check the Storefront again.

This allows you to check whether there are any problems with your "Expert Settings" with just one click.

Deactivate "Debug mode" when you have finished debugging.

Welcome to the ThemeWare® Knowledge Base and thank you for choosing ThemeWare®!

The ThemeWare® documentation for Shopware 6 is based on 3 "pillars":

1. The Service Portal

   • The Service Portal is always the first place to go for all your ThemeWare® needs. It is your personal dashboard for ThemeWare®.

   • There you will always find all the relevant links and information about ThemeWare®, the ThemeWare® Video Tutorial, the ThemeWare® Utilities, the ThemeWare® Search, the ThemeWare® Config Finder, wizards, promotions, useful tools, feedback and contact forms and much more.

   • You can find the Service Portal here:

2. The ThemeWare® Knowledge Base

   • In the ThemeWare® Knowledge Base you will find the ThemeWare® Introduction, many guides and tutorials, the ThemeWare® Lexicon, answers to the most frequently asked questions, solutions to the most common issues, professional knowledge for agencies and freelancers and lots of useful information about Shopware 6.

   • You can find the ThemeWare® Knowledge Base here:

3. The ThemeWare® Manual

   • In the ThemeWare® Manual you will find information about all the features and functions of ThemeWare®.

   • You can find the ThemeWare® Manual here:

You are currently in the ThemeWare® Knowledge Base. Here you will find an answer to most questions immediately and don't even have to wait for our e-mail.

If you don't find an answer, create a new ticket via our Service Portal. This is the quickest way to get our support.

The ThemeWare® Knowledge Base primarily contains articles on ThemeWare® features. There are of course several overlaps with features of Shopware 6.

If you need more information about the features of Shopware 6, we recommend you take a look at the and the section.

In the configuration of the theme in the Theme Management you have different types of fields available. In the following we will provide you with an overview and explain the use of each field type and the values it can contain.

The number field can only contain numbers. The possible numbers may be limited by the field.

Example values: 10, 0, -10, etc.

You can easily select a colour using the colour picker. Alternatively, you can also enter a directly.

Example values:

ThemeWare® provides you with the option of importing Google Fonts automatically.

1. Choose a of your preference

2. Click the "+ Select this style" button next to a style of the font. (1)

You can find out how we created the "Craft & Tradition" category in our demo shops in the following step-by-step guide:

Before reporting an issue, you can easily check whether your individual configuration has an error.

Just use the "Validate" feature in Shopware.

This is useful if you receive an error message such as Invalid configuration – The configuration is faulty. The theme cannot be saved. or the theme could not be saved.

To validate your configuration, open the theme configuration and click on the arrow next to the Save button. There you will find the "Validate" option.

The validation should give you an indication of which value is incorrect.

Learn how to find/fix invalid fields in the following instructions:

You can find out how we created the "Cooking pleasure & Provence" category in our demo shops in the following step-by-step guide:

There are no child themes in Shopware 6 as there were in Shopware 5. Shopware 6 offers you the possibility to create a duplicate of the base theme. With this duplicate you can create a separate configuration, for example for an additional Sales Channel.

For more information on theme duplicates, click here: ThemeWare® duplicates

Template customizations

Template customizations are not possible with theme duplicates, because duplicates do not have their own file level. Template files must therefore be implemented in their own themes or with extensions.

For more information, click here: Individual template customizations (Twig, HTML)

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.

Particularities

Duplicate content in the theme configuration

...

Custom fields

...

CMS blocks and CMS elements

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.

ThemeWare® is delivered with German and English snippets. Multilingualism itself is a basic function of Shopware, ThemeWare® integrates into it.

Step 1: Set up the language

1. Open the administration of your shop

2. Switch via the main navigation to "Settings" => "Shop" => "Languages"

3. Create the desired language or check the existing languages

Step 2: Configure the Sales Channel

1. Open your Sales Channel via the main navigation

2. Switch to the tab "General"

3. Assign all languages that should be available in the shop under "Languages"

4. Define the "Default language"

5. Create a separate domain URL for every language in the area "Domains"

   • Select the "Language" and the matching "Snippet" set for every domain

6. Save the Sales Channel

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.

1. Switch via the main navigation to "Settings" => "Shop" => "Snippets"

2. Select the desired snippet set

3. 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:

1. Open the administration of your shop

2. Switch via the main navigation to the "Theme Management" ("Content" => "Themes")

   • Note: In the Shopware Cloud, you will find the section "Themes" directly in the main navigation.

3. In order to open the context menu, click onto the Context button in the top right-hand corner of the ThemeWare® duplicate preview image.

4. Click "Rename"

5. A pop-up will appear again in which you can change the name of the duplicate

6. Confirm the change with "Save".

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.

1. Open the administration of your shop

2. Switch via the main navigation to "Settings" => "Payment methods"

3. Open a payment method

With ThemeWare® you show a second product image in the product listing as soon as your customers move the mouse over a product tile. This lets you reveal the back, a detail or the product in use – without opening the product page.

• a product you want to assign a second image to

• a suitable image for the hover effect in the Shopware media manager

"Theme Manager" => your ThemeWare® theme => "Listing pages" tab => "Product box" block => "Product image" section

With ThemeWare® you give your category pages a large "Hero section" – an inviting header area with the category name, a background image and an optional breadcrumb. Give your categories a premium look, strengthen your brand and guide customers straight into your assortment.

• a category you want to add a "Hero section" to

• optionally a background image (recommended image size: 1920 x 1080 pixels)

"Theme Manager" => your ThemeWare® theme => "Extensions" tab => "Hero section (on listing pages)" block

In this article you will learn how to combine ThemeWare® themes.

1. Have a look at the other themes ()

2. Install an additional theme with a free trial month

   • make sure that both ThemeWare® versions are identical

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the tab "Themes" (3)

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".

1. Open the administration of your shop

2. Switch via the main navigation to the "theme administration" (1) (2) ("Content" => "Themes")

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.

You can find all the information about our Demoshops and configuration in the following article. However, we recommend that you complete the introduction first.

You can find out how we created the "Cooking pleasure & Provence" category in our demo shops in the following step-by-step guide:

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.

Activating ThemeWare®

1. Open the administration of your shop

2. Switch via the main navigation to "Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the "Themes" tab (3)

4. 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:

1. Open the administration of your shop

2. Switch via the main navigation to "Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the "Themes" tab (3)

4. Activate ThemeWare® via the switch button (4) on the left of the ThemeWare® logo

5. Clear the entire Shopware cache and reload the administration

ThemeWare® has now been activated.

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.

ThemeWare® demoshops

The ThemeWare® demoshops present all ThemeWare® themes live and in colour.

Are there any differences to the freshly installed theme?

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.

Configuration

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.

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 ThemeWare® configuration is divided into several levels.

The first level are the tabs

The theme configuration of ThemeWare® can be achieved in two possible ways:

1. Via the corresponding (recommended)

2. Via the

In the following we show you both ways in detail.

The shop navigation (main navigation) is the category navigation in the header. You create the categories in Shopware, ThemeWare® defines the display.

1. Open the administration of your shop

2. Switch via the main navigation to "Catalogues" => "Categories"

3. Create your categories and subcategories

The theme configuration of ThemeWare® can be reached in two ways:

1. Via (recommended)

2. Via the corresponding

In the following we will show you both ways in detail.

You can find out how we created the "Mountain air & Adventure" category in our demo shops in the following step-by-step guide:

Wie du die Startseite deines Themes erstellen kannst, erfährst du in folgendem Artikel:

You can find out how we created the "Mountain air & Adventure" category in our demo shops in the following step-by-step guide:

We are always happy to receive an honest rating. The rating does not have to be long, 1-2 sentences are sufficient.

There are two methods of rating ThemeWare®:

1. Using your Shopware Account (recommended)

2. Using your Shop administration

In the following we show you both methods in detail.

1. Log in to your

2. Switch to the "Merchant Area" (1) via the selection field in the upper left.

3. In the navigation, click "Shops" (2)

1. Open the administration of your shop

2. Switch via the main navigation to the"Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the tab "Themes" (3)

4. Click the

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.

Step 1: Select the layout type

The layout type of the product boxes is defined in the Shopping Experience of the category page.

1. Open the administration of your shop

2. Switch via the main navigation to "Content" => "Shopping Experiences"

3. Open the layout of your category page (layout type "Listing page")

4. Select the element "Product listing"

5. Select the "Layout type" of the product boxes:

   • "Standard"

   • "Big image"

   • "Minimal content"

6. Save the layout

1. 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.

2. Now click on your ThemeWare® theme to start editing

3. Switch to the tab "Listing pages

• 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"

• "Compact product box"

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)"

1. Save the theme configuration

2. Switch to the storefront and reload the page

• Introduction:

• Introduction:

The ThemeWare® rental version includes a free trial month. 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.

1. Open the administration of your shop

2. Switch via the main navigation to the "Store" (1) (2) ("Extensions" => "Store")

3. Switch to the tab "Themes" (3)

4. Optional: Enter "ThemeWare" or e.g. "Outdoor" into the search field

5. Now click onto the desired ThemeWare® theme in the overview

6. The details page of the ThemeWare® themes will now open up

7. Click on the button "Add theme" (4)

8. A pop-up will open now

9. Here you can find all the details about the costs after the trial month (5)

10. Please read and accept the Terms and Conditions (6)

11. Now confirm the "booking" with "Subscribe to extension" (7)

Now you have subscribed to ThemeWare®.

1. Open the administration of your shop

2. Change via the main navigation to the "Theme Management" ("Content" => "Themes")

   • Note: In the Shopware Cloud, please find the section "Themes" directly in the main navigation.

3. Now click onto the Context button in the upper right of the preview image of your ThemeWare® base theme in order to open the Context Menu.

4. Click "Create duplicate"

5. A pop-up will appear again allowing you to enter the name for the duplicate

6. Confirm the creation with "Create duplicate".

Now you have created a ThemeWare® theme duplicate and you are free to configure it independently from the Parent Theme.

The ThemeWare® rental version includes a free trial month. 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.

1. Open the administration of your shop

2. Switch via the main navigation to the "Store" (1) (2) ("Extensions" => "Store")

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.

1. Open the administration of your shop

2. Switch via the main navigation to the "Store" (1) (2) ("Extensions" => "Store")

In this section you will find many useful instructions around the topic fonts.

Before starting with the font configuration we recommend you to have a look at our video tutorial. In the video "" we explain important basics.

• – store your own or purchased fonts on your web server

• – the same route, but without a template customisation of your own

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions"=> "My extensions")

3. Switch to the tab "Themes" (3)

You can find out how we created the "Craft & Tradition" category in our demo shops in the following step-by-step guide:

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My extensions")

3. Switch to the tab "Themes" (3)

With ThemeWare® you benefit from continuous further development. Therefore, from time to time we might remove or replace configuration fields.

Unfortunately, the Shopware update routine does not automatically remove deleted configuration fields.

On our hint (NEXT-14571) Shopware has extended the "Save" button in the theme configuration in Shopware 6.4.8.0 and added a "Clean" function. With this you are able to delete "Orphaned configuration fields".

"The current values are completely re-saved. To be used when fields have been deleted or have changed their type."

"Orphaned configuration fields" occur when a configuration field has been edited and this configuration field is deleted with a theme update.

In this case, your configuration will remain in the database and this configuration will end up as a configuration field in the tab "General".

Typically, this field then has the technical name and not the original label as its name.

In the ThemeWare® configuration you will find various color configuration fields (). In tab "Layout", for example, you will find the block "Main colours".

You will find more on the topic of "color configuration" in the ThemeWare® introduction: and in the basic knowledge article: .

Before reporting an issue, you can easily check yourself whether a specific extension (plugin or app) causes the problem.

Deactivate (not uninstall!) all used extension (plugins or apps). If the problem does no more exist after deactivating all extensions, the problem is probably due to an extension.

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

• any HTML elements (inline styles)

When Shopware is running in production mode, usually only general messages like "Theme could not be assigned to sales channel." are being displayed. Based on these general messages, it unfortunately is not possible to identify the cause of the error more precisely.

The first step in case of error messages in the administration is to receive a more detailed error message.

To receive a more detailed error message use one or both of the following options:

• Check your PHP error log for further information.

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.

Structure of the footer

1. Open the administration of your shop

2. 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.

3. Now click on your ThemeWare® theme to start editing

1. Open the block "Assigning and arranging content"

2. 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

• "Typography": text alignment

You will find the overall settings (background colour, background image, font families and font sizes of the entire footer) in the block "Layout".

1. Save the theme configuration

2. Switch to the storefront and reload the page

You have now configured the footer.

• Introduction:

• Introduction:

• Introduction:

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management" (1) (2) ("Extensions" => "My Extensions")

3. Switch to the tab "Themes" (3)

4. Click on the Context-Button (4) next to the theme to open the context menu and click on "Uninstall" (5)

   • ℹ️ Note: Deactivate the theme before updating, and once it’s deactivated, clear the Shopware cache.

5. In the following pop-up you have to confirm the uninstallation with the "Uninstall" button once again

6. Clear the entire Shopware cache and reload the administration

ThemeWare® has now been uninstalled.

When uninstalling ThemeWare® the option "Remove all app data permanently" can be used. This deletes all ThemeWare® data such as the theme configuration, ThemeWare® duplicates and the ThemeWare® Custom Fields.

Therefore, if you want to remove ThemeWare® residue-free, use this option.

If this option is not being used, all the data will remain in the system and can be used again as soon as you reinstall ThemeWare®.

With ThemeWare® you show a category's subcategories as tiles or links above the product listing. This guides your customers to the right range faster, improves internal linking and makes your category menu visible right on the page.

Requirements

• a category that has visible subcategories

• optionally a display image per subcategory

Step 1: Enable subcategories in the theme

"Theme Manager" => your ThemeWare® theme => "Extensions" tab => "Listing subcategories (on listing pages)" block

At "Show 'Listing subcategories' (CMS listing pages)" pick one of the options and save your changes:

• show – on all listing pages

• show (via custom field) – only in categories you enable via a custom field (see step 3)

• don't show – default, the feature stays off

"Catalogues" => "Categories" => select category => "General" tab

In the "General" block you edit the Name, in the "Menu settings" block the Display image of the respective subcategory. This information appears in the tiles later on. Save the category.

"Catalogues" => "Categories" => select category => "Custom fields"

Use the custom field "Show 'Listing subcategories'" to control the display per category:

• yes – shows the subcategories in this category (required for the "show (via custom field)" option)

• no – hides them in this category (even with the global "show" option)

• inherit from theme configuration – follows the global setting from step 1

Save the category.

The subcategories now appear as tiles above the product listing. If nothing shows up, check that the category has visible subcategories and clear the Shopware cache once.

You can find all configuration options and the custom field in detail in the ThemeWare® manual:

In the theme configuration you may also use simple SCSS functions in color fields in addition to theme variables. With such functions you can darken or lighten colors, for instance.

Using SCSS functions

A error-free syntax is important to avoid errors in the storefront, therefore these functions are recommended for experienced users.

Useful SCSS functions

In the following we will introduce a few useful SCSS functions. Please find more information in the official SASS Documentation.

To darken colors you may use the "darken" function:

darken(#0c7ebb, 10%)
darken($sw-color-brand-primary, 10%)

To lighten colors, use the "lighten" function:

lighten(#111, 10%)
lighten($sw-text-color, 10%)

In addition, there are other SCSS functions which can be used:

complement($color) // RGB complementary color of $color
grayscale($color) // Gray value with same brightness as $color
      
darken($color, $amount) // Darkens the color $color (e.g. 10%)
lighten($color, $amount) // Lightens $color (e.g. 10%)
      
desaturate($color, $amount) // Reduces the saturation of $color (e.g. 10%).
saturate($color, $amount) // Increases the saturation of $color (e.g. 10%).
      
fade-in($color, $amount) // Makes $color more opaque (e.g. 0.1)

fade-out($color, $amount) // Makes $color more transparent (e.g. 0.1)

Several SCSS functions can also be combined in one color field. In the following example, the secondary color is lightened by 15% and the saturation is reduced by 5%:

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.

Step 1: Create the Shopping Experience

1. Open the administration of your shop

2. Switch via the main navigation to "Content" => "Shopping Experiences"

3. Click on "Create new layout"

4. Select the layout type "Shop page" and a starting layout

5. Enter a "Layout name", for example "About us"

6. Build the page from sections, blocks and elements

7. Save the layout

The page needs a category so that it can be reached in the shop.

1. Switch via the main navigation to "Catalogues" => "Categories"

2. Create a new category, for example "About us"

   • It makes sense to create it below your footer or service navigation

3. In the card "General" select the option "

1. Open the category

2. Switch to the tab "Layout"

3. Click on "Assign layout" and select your Shopping Experience

4. Save the category

So that your customers find the page, link it in a navigation:

• for the columns in the footer

• 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:

1. Open the administration of your shop

2. Switch via the main navigation to the "Extension Management"(1) (2) ("Extensions" => "My extensions")

3. Switch to the tab "Themes" (3)

4. Find your theme in the list of your extensions

   • Click "Update" (4) or

   • Click onto the Context-Button next to the theme in order to open the context menu and click onto "Update to x.y.z" (4)

   • ✅ Tip: Deactivate the theme before updating, and once it’s deactivated, clear the Shopware cache.

5. Clear the entire Shopware cache and reload the administration

ThemeWare® has now been updated.

Always refer to our update guide when updating ThemeWare®:

In this article you will learn how to self-host your own fonts or Google Fonts respectively how to store them locally on your webserver and how to embed them in your Shopware 6 shop (self-hosted).

In order to easily deposit the font files and the corresponding CSS customizations you should use a separate extension (plugin or app) for individual customizations.

• Please check if there already exists a suitable extension in the .

• Alternatively, you may use the following manual method.

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.

1. Open the administration of your shop

2. Switch via the main navigation to "Catalogues" => "Categories"

In the theme configuration you will occasionally find variables in color fields. This unifies the color image of your Storefront and makes it easier to customize the color image to your preferences.

There are two relevant notations for variables:

1. Shopware variables:

   • $sw-color-brand-primary = Primary color in the Storefront

In dieser Anleitung erfährst du, wie du ein Kategorie-Layout mit Sidebar erstellen kannst.

1. Wechsel über die Hauptnavigation in die "Erlebniswelt-Verwaltung" (1) (2) deines Shops ("Inhalte" => "Erlebniswelten")

2. Optional: Du kannst die Layouts über den Reiter "Kategorieseiten" auf diesen Seitentyp eingrenzen (3)