Backing up and restoring the theme configuration is currently basically the same as importing or exporting the theme configuration. You can find out more about this in the article:

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.

Whether you are an agency, freelancer or advanced user, here you will find everything you need to create professional and sales-promoting Shops faster than ever with ThemeWare® for Shopware 6.

In this article you will find out what the expert settings in the ThemeWare® CMS elements are all about.

In some CMS elements, you will find the "Expert settings" section in the "Advanced" tab.

These settings are intended for experts who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system.

CSS class (column)

Others will follow...

In this article, you will learn how to make a manual backup of the theme configuration.

Manual approach (for experienced users)

Manual editing of the database is suitable for experienced users who are familiar with the database.

Backup for safety

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

Backup of the theme configuration

1. Open the database (e.g. Adminer or phpMyAdmin)

2. Use the search field to find the table "themes" (1)

3. Open the table with "select" (2)

4. Edit the data set of the desired theme (e.g. "TcinnThemeWareModern") with "edit" (3)

5. Save the content of the column "config_values" (4) in a *.txt or *.json file to perform a "backup" of the current configuration

6. Leave the database without saving changes

The "Expert mode" defines whether your "individual customisations" from the "Expert settings" of the theme configuration are delivered to the storefront or not.

Tab "Others" => Block "Expert settings" => Expert mode

• If the "Expert mode" is active, the corresponding codes or files of the "Expert settings" are delivered to the storefront.

• If "Expert mode" is not active, the "Expert settings" are not delivered to the storefront.

This is useful for debugging to solve issues with your "individual customisations" in the "Expert settings".

In this article, you will learn how to deactivate ThemeWare® via the database.

If you want to disable an extension or ThemeWare®, for example because you have mistakenly installed an incompatible version and the administration is not accessible, you have to disable this extension via the database.

Backup for safety

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

Manual approach (for experienced users)

Deactivate extension

1. Open the database (e.g. Adminer or phpMyAdmin)

2. Use the search field to find the table "plugin" (1)

3. Open the table

4. Edit the entry for the desired extension (e.g. "TcinnThemeWareModern") with "edit" (3)

5. Change the contents of the "active" column (4) from 1 to 0

6. Save this change and exit the database

You have now disabled the extension from the database.

The Shopware 6 storefront uses SCSS code for styling (unlike Shopware 5 which used LESS).

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

– sass-lang.com

SCSS files can be supplied with themes or plugins to the compiler, which compiles all the SCSS code of the storefront into the "all.css".

Further information

In this article you will learn how to install ThemeWare® for Shopware 6 manually.

1. Download a zip of ThemeWare® via your Shopware account

2. Open the administration of your shop

In this section, you can add your own CSS and/or JavaScript code. As this are "individual customisations", we can only provide limited support here as part of the plugin support.

Tab "Others" => Block "Expert settings"

The "Expert settings" in the theme configuration are – as the name implies – aimed at experts or professionals who are experienced in dealing with individual customisations.

You can find out how to use these configuration fields in the ‘Individual customisations’ section:

In the ThemeWare® plugin configuration (not theme configuration) you have the option of activating the ThemeWare® "Debug mode".

If the "Debug mode" is active, the "Expert configuration", for example, is no longer taken into account. This means that any issues in these "individual customisations" can be avoided with a single click.

Since "Debug mode" disables some configurations to make debugging easier, we do not recommend using this mode in production.

To prevent you from accidentally activating "Debug mode", a corresponding indicator appears in the storefront.

If you are asked to activate "Debug mode" temporarily during debugging or by ThemeWare® Support, you can also use the option "Yes (without storefront indicator)". This activates "Debug mode’" but the indicator is not displayed. Make sure to deactivate this mode afterwards!

In this article you will learn how to edit the database with the Adminer extension for Shopware 6.

We recommend the free extension "Adminer for the Admin" for easy access to the database.

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

1. Download the as a zip file

You can find ThemeWare® on your FTP server like any other extension you have installed. No external content is loaded; everything you need is stored locally on your FTP server.

Shopware installs extensions depending on their type. In general, you will find apps and plugins under the same path (/custom). Only the subfolder varies:

Twig is a modern template engine for PHP. It compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code is reduced to the very minimum.

In this article you will learn how to reset the ThemeWare® configuration.

Unfortunately, Shopware currently does not offer the possibility to reset the theme configuration via the administration. Nor are we aware of a corresponding extension so far.

Backup for safety

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

Manual approach (for experienced users)

Resetting the ThemeWare® configuration manually

1. Open database (e.g. Adminer or phpMyAdmin)

2. Search table "themes" (1) using the search field

3. Open the table with "select" (2)

4. Edit the data set of the desired theme (e.g. "TcinnThemeWareModern") with "edit" (3)

5. Save the content of the column "config_values" (4) in a *.txt file to perform a "backup" of the current configuration

6. Empty the content of the column "config_values" and set the column to "NULL" (5)

7. Save the change of the data set (6) and exit the database

The change will be loaded into your theme the next time you open the theme configuration.

ThemeWare® offers you a start as fast as lightning thanks to its preset configurations, its many Utilities, the video tutorial and the many instructions. This way you are able to implement professional and sales-promoting shops faster than ever.

At the same time, ThemeWare® never sets any boundaries for you. In addition to the most extensive configurations, you will be able to make limitless individualizations at any time.

In the following you will find a summary of the most important articles for experienced users and professionals.

1. Basic knowledge

In the first step you will find some articles that will give you a basic understanding of themes in Shopware 6. Of course, you can also find a lot of helpful information in the Shopware Documentation.

Description of the field types in the theme configuration

In the configuration of the theme you have several field types at your disposal. In this article we will provide you with an overview and explain how to use which field type and what values it may contain.

Determining the ThemeWare® version

With this guide you will be able to find out which ThemeWare® Version is being used by your customer in Shopware 6.

In this article you will discover how to update the theme.

In this article you will discover how to update the theme.

The articles in this section will take it a step further and provide you with background knowledge on the topic of "configuration" and how to deal with the configuration in the database.

In this article we will explain where the theme configuration is saved in Shopware 6.

For easy access to the database we recommend the free extension "Adminer for the Admin".

By exporting and importing the configuration values, you can save a configuration, restore a saved configuration, transfer configurations between a theme and its derivatives, and transfer theme configurations to another installation.

How to restore a theme to its original state you will get to know in this article.

In the following you will find articles that show you how to quickly and easily create a professionally designed shop with ThemeWare®.

In this video, Thorsten demonstrates how easily you can use other ThemeWare® themes as templates in order to combine parts of them with each other. This way you can quickly and easily get a customized and professionally designed theme, which exactly fits your wishes.

In this article we will explain how to use theme variables to unify the color scheme of the Storefront and more quickly customize it to your wishes.

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

In this article you will find an overview of all additional CSS classes that we provide with ThemeWare® for Shopping Experiences.

In the so-called ThemeWare® "Shopping Experience Header", the header overlays the Shopping Experience on the starting page. In Themes such as ThemeWare® Outdoor, ThemeWare® Exquisite or ThemeWare® Lights, the "Shopping Experience Header" is already preconfigured.

In this article you will learn how to recreate the category Shopping Experiences from our Shopware 6 demoshops.

Our popular utilities include all Theme graphics in PSD format for you.

In case you have experience with CSS and HTML and would like to further customize the appearance or make adjustments to templates, we have also compiled some extensive articles for you.

With ThemeWare® you have various possibilities to add your own CSS styling to your shop. More about this please find in this article.

How to make visual adjustments using SCSS please discover in this article.

In case you wish to customize the appearance of ThemeWare® by means of a template customization, this article enables you to implement this customization in Shopware 6 (Self-hosted).

This article explains how to integrate your own fonts or a Google Font locally into a Shopware 6 Shop (self-hosted).

Last but not least, we demonstrate how the underlying Bootstrap framework of Shopware 6 gives you even more options for customization.

The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC Architecture®, ThemeWare® is also completely compatible with Bootstrap. How to use Bootstrap CSS classes and HTML elements for client projects you will discover in these articles.

In this tutorial, you'll learn how to create responsive Shopping Experiences using Bootstrap CSS classes.

And now we would like to wish you a lot of fun while rummaging and always great business with ThemeWare®.

In this article you will learn how to manually update ThemeWare® for Shopware 6.

1. Download the latest ThemeWare® zip file from your Shopware account.

2. Open the administration of your shop

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

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

5. Upload the zip using the button "Upload extension" (4) into your shop.

6. Look for your theme in the list of your extensions

   • Click onto "Update" (5) 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" (5)

ThemeWare® has now been updated.

In this article you will learn how to upload ThemeWare® for Shopware 6 via FTP.

First of all, we would like to point out that purchased extensions automatically appear in the Extension Management. A manual upload is therefore not necessary.

The manual upload of extensions is possible in two ways:

• Upload via the Extension Management

• Upload via

Coming soon...

In this article, you will learn how to use Bootstrap HTML elements in the Shopware 6 Storefront.

Coming soon...

In this article you will find out where Shopware 6 stores the theme configuration in the database.

The configured values of the themes are saved in Shopware 6 in the database table "theme" (2) in the column "config_values" (4) for each theme or theme duplicate separately.

However, this column does not contain the complete set of configuration values, but only those that differ from the default configuration in the column "base_config".

You can save the content of the column "config_values" (4) and/or transfer it to another theme, to a theme duplicate in the same table or even to other Shopware installations.

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

In this article, you will learn how to use Bootstrap CSS classes in the Shopware 6 Storefront.

Coming soon...

In this article you will learn how to export and import the ThemeWare® configuration.

Export and import of the theme configuration

Unfortunately, currently there is no possibility to export and import the theme configuration from Shopware via the administration. Nor are we aware of a corresponding extension so far.

Using an export and import of the configuration values you can:

• save your configuration

• restore a saved configuration

• transfer configurations between a theme and its duplicate

• transfer theme configurations to another installation

Manual editing of the database is suitable for experienced users who are familiar with the database. Get help if this does not apply to you.

1. Open the database (e.g. Adminer or phpMyAdmin)

2. Use the search field to find the table "themes" (1)

3. Open the table with "select" (2)

1. Open the database (e.g. Adminer or phpMyAdmin)

2. Use the search field to find the table "themes" (1)

3. Open the table with "select" (2) open

• When transferring a theme configuration, make sure that the themes are compatible with each other! For example, you should avoid depositing a ThemeWare® configuration in the default "Storefront" theme, or vice versa.

• When transferring a theme configuration, make sure that the version number of the source and target theme is the same!

• If the configuration is to be transferred to another Shopware installation, then all media (background image, etc.) must be re-uploaded and reassigned.

In this article, you will learn how to use the "CSS class (column)" configuration in CMS elements from ThemeWare®.

Column CSS classes

Certain CMS blocks of ThemeWare® (e.g. "Six columns (Custom)") can adopt the expert configuration "CSS class (column)" of certain CMS elements (e.g. "Round teaser").

This allows you to define the number of columns in different viewports, provided you are sufficiently familiar with Bootstrap's grid system.

Example

By default, the "custom" CMS blocks have their intended column layout. Here, for example, a six column block:

With the expert setting "CSS class (column)" in the "Advanced" tab of the CMS element (here "Round teaser"), you can use Bootstrap classes (e.g. col-3) to define a column width for the corresponding element.

The block now looks as follows:

As you will have noticed, all columns are usually aligned to the left. You can also influence this.

In addition to the CSS classes that you can use in the CMS elements, you can also use CSS classes on the CMS blocks, for example, to define the horizontal alignment of the columns in the CMS block.

To do this, just use the corresponding Bootstrap CSS classes (justify-content-...) in the corresponding CMS block. As the block classes are not placed in the right place please use the prefix twt- (i.e. twt-justify-content-...) . These classes are then automatically recognised by the "individual" CMS blocks and passed to the row.

Verwendest du die CSS-Klasse twt-justify-content-center im CMS-Block sieht unser Beispiel nun wie folgt aus:

If you do not want to define column widths and only want to work with the maximum width of the corresponding CMS elements, for example, you can use the css class twt-flex-columns in the CMS block.

In our example, the thumbnails of the images are 227px in size. This leads to the following result:

Using the "Maximum width" configuration in the "General" section of the "Layout" tab, you can define the maximum width of a teaser. If you set 140px here, for example, the teasers in our example will be represented as follows:

The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC Architecture®, ThemeWare® is also completely compatible with Bootstrap.

Bootstrap CSS classes

In this tutorial you will find an overview of the most important Bootstrap CSS classes, you can use in your Shopping Experiences.

You can easily add the following CSS Classes via the section or block settings.

Of course, you can also use the Shopware 6 HTML editor (e.g. in a CMS element) to integrate your own HTML code. Please note that the editor will automatically clean up your code – for security reasons – and not all HTML tags and CSS classes will work.

Text

For aligning texts Bootstrap provides CSS Classes you can use.

For coloring texts, Bootstrap already provides some classes for different colors. The following you will find examples of the available color variants.

The Bootstrap framework also provides you with classes for coloring backgrounds of Shopping Experience elements in different colors. For dark backgrounds it is recommended to choose a light text color (see above).

Bootstrap Classes can also be used to define the borders of Shopping Experience elements. The class "border-0" removes borders from elements, for example.

With the following Bootstrap Classes, spacings can be defined for Shopping Experience elements. There are also spacing classes for different viewports.

The classes are named according to the format {property}{page}-{size} for xs and {property}{page}-{breakpoint}-{size} for sm, md, lg and xl.

• m - margin (outer spacing)

• p - padding (Inner spacing)

• t - top

• b - bottom

• l - left

• sm - ab 576px

• md - ab 768px

• lg - ab 992px

• 0 - Setting spacing to 0

• 1 - setting spacing to $spacer * .25

• 2 - setting spacing to $spacer * .5

The Shopware 6 Storefront is based on the Bootstrap Framework. Due to our HC Architecture®, ThemeWare® is also completely compatible with Bootstrap.

Bootstrap HTML elements

In this tutorial you will discover the most common Bootstrap HTML elements you can use in your Shopping Experiences. These elements can be placed in your Shopping Experience via the HTML editor of text elements.

Buttons

Bootstrap offers you several predefined button styles you can use in your Shopping Experiences, each of which serves its own semantic purpose. In the following you will find all available button styles with code examples.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Tables

The Bootstrap Framework includes several predefined table styles. There are, for example, light and dark layouts. In the following please find an example of a light variant.

Modals are also already included in Bootstrap and thus also in Shopware and ThemeWare®. In the following please find an example of a standard modal.

An accordion is an element you can use for your Shopping Experience. The Accordion is used to display extensive content in a space-saving way. This also is possible with the Bootstrap Framework.