> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/theme-manager/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/theme-manager/en/getting-started/editing-a-theme.md).

# Editing a Theme

Adjust the colours, fonts and logos of a theme, install the preset of a theme, reset settings or transfer them using a file.

In the **Edit theme** view you look after the theme of a sales channel: you set colours, fonts and logos, switch on HTML minification, install a theme preset – if your theme comes with one –, reset all settings of the sales channel or transfer them to another sales channel using a file.

You open the view under **Content › Theme - Settings › Dashboard** with **Edit theme** on the card of your sales channel. The button only exists for compatible themes – that is, the default Shopware theme and selected themes by RH-Webdesign.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-eedf772b9e05ea59e49e45ed7fc2f47bc5f9d75e%2Ftheme-bearbeiten-hero.webp?alt=media" alt="Edit theme view with tabs and theme colours"><figcaption><p>Editing the default Shopware theme for the sales channel “Storefront”.</p></figcaption></figure>

{% hint style="info" %}
The images on this page show the default Shopware theme. The layout is the same for all compatible themes. Which fields appear in the **Theme settings** tab is determined by the theme in question – a theme by RH-Webdesign can bring additional fields.
{% endhint %}

## The header area

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-eea79418097450811a32ef47cbaca1a7971e3872%2Ftheme-bearbeiten-kopfbereich.webp?alt=media" alt="Header area of the Edit theme view"><figcaption><p>Header area and tabs.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Back (1)</td><td>Takes you back to <strong>Manage Themes</strong>.</td></tr><tr><td>Theme (2)</td><td>The theme you are editing.</td></tr><tr><td>Sales channel (3)</td><td>The sales channel you are editing it for.</td></tr><tr><td>Compatible (4)</td><td>The theme works with the Theme - Manager.</td></tr><tr><td>Clear cache (5)</td><td>Empties Shopware's cache so that you see changes in the shop straight away.</td></tr><tr><td>Save &#x26; compile (6)</td><td>Saves the fields in the <strong>Theme settings</strong> tab and compiles the theme.<br><strong>Clear cache</strong> and <strong>Save &#x26; compile</strong> only appear in this tab – the other tabs take effect immediately.</td></tr><tr><td>Theme settings (7)</td><td>Colours, fonts, logos and HTML minification.</td></tr><tr><td>Preset (8)</td><td>Install a theme preset and reset all settings of the sales channel.</td></tr><tr><td>Import / Export (9)</td><td>Back up, view or import all settings as a file.</td></tr></tbody></table>

## “Theme settings” tab

At the top, the tab contains the switch for HTML minification and, below it, the settings of the theme: colours, fonts and logos.

{% hint style="warning" %}
**Theme settings belong to the theme, not to the sales channel.** If several sales channels use the same theme, colours, fonts and logos change in all of those sales channels. If you want your own colours for one sales channel, create a duplicate of the theme in Shopware and assign it to that sales channel – see **Dependent settings in Shopware**.
{% endhint %}

### Minifying HTML

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-1ca364210dd1ab84ad403fe815275da46e20ff84%2Ftheme-bearbeiten-minifizieren.webp?alt=media" alt="Switch Minify HTML for this sales channel"><figcaption><p>The switch for HTML minification, switched off here.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Minify HTML for this sales channel (1)</td><td>When switched on, the shop removes whitespace and comments from the HTML code of its pages. This makes the pages smaller; nothing changes in how they look.<br>The switch applies to this sales channel only and is saved immediately. A message confirms this, for example “HTML minification enabled for “Storefront”.”</td></tr></tbody></table>

### Colours

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-1be81298f66529042754c5bdf9d6ca1ba965e855%2Ftheme-bearbeiten-farben.webp?alt=media" alt="Theme colours and status messages"><figcaption><p>The “Theme colours” and “Status messages” areas.</p></figcaption></figure>

If you click the colour swatch on the left of an input field, a colour picker opens. You can also type the colour value directly, for example `#0042a0`. How the colour picker works is explained in the building block **Choosing Colours**.

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Primary colour (1)</td><td>The main colour of your shop, for example for the most important buttons.</td></tr><tr><td>Secondary colour (2)</td><td>The second accent colour, for example for less important buttons.</td></tr><tr><td>Border (3)</td><td>The colour of border lines, for example around input fields.</td></tr><tr><td>Background (4)</td><td>The background colour of the pages.</td></tr><tr><td>Success (5)</td><td>Colour for success messages in the shop.</td></tr><tr><td>Information (6)</td><td>Colour for notices with information.</td></tr><tr><td>Notice (7)</td><td>Colour for warnings.</td></tr><tr><td>Error (8)</td><td>Colour for error messages.</td></tr></tbody></table>

### Fonts and buying

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-533fa28d3b198606e2c89d1fedad44af48fe04e4%2Ftheme-bearbeiten-typografie.webp?alt=media" alt="Typography and E-Commerce"><figcaption><p>The “Typography” and “E-Commerce” areas.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Body text font (1)</td><td>The font for normal text. You enter it as a font family, for example <code>'Inter', sans-serif</code> – the second name is the fallback font in case the first cannot be loaded. You add your own fonts from Google under <a href="/theme-manager/en/features/advanced/google-fonts.md"><strong>Google Fonts</strong></a>.</td></tr><tr><td>Text colour (2)</td><td>The colour of normal text.</td></tr><tr><td>Headline font (3)</td><td>The font for headlines – entered like the body text font.</td></tr><tr><td>Headline color (4)</td><td>The colour of the headlines.</td></tr><tr><td>Price (5)</td><td>The colour of the prices.</td></tr><tr><td>Buy button (6)</td><td>The background colour of the buy button. Instead of a colour value, another theme colour can also be entered here: <code>$sw-color-brand-primary</code> means “same as the primary colour”.</td></tr><tr><td>Buy button text (7)</td><td>The text colour on the buy button.</td></tr></tbody></table>

### Logos and icons

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-37e3af0bdd83e44f77f92682a73e32d14422e542%2Ftheme-bearbeiten-medien.webp?alt=media" alt="Media area with logos and favicon"><figcaption><p>The “Media” area.</p></figcaption></figure>

With the image icon on the right of a field, you upload a new image, choose an existing one from your media or remove the link – see the building block **Selecting Images and Files**.

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Desktop (1)</td><td>The logo for screens from 992 px wide. It also steps in for smaller screens if no logo of their own is stored there.</td></tr><tr><td>Tablet (2)</td><td>The logo for screen widths from 768 to 991 px.</td></tr><tr><td>Mobile (3)</td><td>The logo for screens up to 767 px wide.</td></tr><tr><td>App &#x26; share icon (4)</td><td>The icon that appears when customers add your shop to the home screen of their smartphone.</td></tr><tr><td>Favicon (5)</td><td>The small icon in the browser tab.</td></tr></tbody></table>

{% hint style="info" %}
Whether your shop shows the image logo from these fields or a text logo, and how big it is, you set under **Content › Theme - Settings › Layout › Logo**.
{% endhint %}

### Saving and compiling

Click **Save & compile** at the top right. Shopware saves the theme settings and compiles the theme for all sales channels that use it. That takes a few seconds. A message then confirms the process, for example “Theme settings for “Shopware default theme” saved.”

You do not need to save the switch for HTML minification separately.

## “Preset” tab

If a theme by RH-Webdesign comes with a **theme preset**, you transfer it here to your sales channel with one click. The preset contains the settings that RH-Webdesign recommends for this theme – for example for the header, icons, forms, product box, listing and detail page. The default Shopware theme does not come with a preset. In the same tab you can also reset all settings of the sales channel.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-a4dff960d49815877457e614355025da6f385e31%2Ftheme-bearbeiten-tab-vorlage.webp?alt=media" alt="Preset tab with theme preset and reset"><figcaption><p>The “Preset” tab.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Select theme … (1)</td><td>Shows all installed and active themes for which a preset is available. If you choose a theme other than the current one, installing the preset assigns that theme to the sales channel.<br>If there is no suitable preset, it says “No presets are available for the installed themes.”</td></tr><tr><td>Install preset (2)</td><td>Opens the confirmation prompt for the installation – see <strong>Installing a preset</strong>.</td></tr><tr><td>Reset (3)</td><td>Opens the confirmation prompt for resetting – see <strong>Resetting to defaults</strong>.</td></tr></tbody></table>

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-65c21aceda342bf5ea04c2618aeddd4a484b350e%2Ftheme-bearbeiten-vorlage-auswahl.webp?alt=media" alt="Selecting the preset" width="480"><figcaption><p>The selection shows the presets of your installed themes – here the preset of an example theme.</p></figcaption></figure>

### Installing a preset

{% hint style="warning" %}
The preset overwrites the settings it contains. Export your settings beforehand as a backup – see **“Import / Export” tab**.
{% endhint %}

1. Under **Select theme …**, choose the theme.
2. Click **Install preset**. A window summarises what will happen.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-ef7f22aee2e3def20d3da6316777a331625bd4d6%2Ftheme-bearbeiten-vorlage-zuweisen.webp?alt=media" alt="Install preset prompt with preview of the theme" width="500"><figcaption><p>The prompt in the sales channel “Storefront”, which still uses the default Shopware theme: the preset brings its theme with it.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Preview (1)</td><td>The preview image of the theme the preset belongs to. It only appears if the sales channel still uses a different theme.</td></tr><tr><td>Notice (2)</td><td>Announces that the theme will be assigned to the sales channel and which settings will be set.<br>If the theme is already assigned to the sales channel, the preview is omitted and the notice reads, for example, “The preset “Theme - Example” sets all contained settings for the sales channel “Storefront”. The theme is already assigned to this sales channel.”</td></tr><tr><td>I understand (3)</td><td>The <strong>Install</strong> button can only be clicked once this box is ticked.</td></tr><tr><td>Install (4)</td><td>Installs the preset.</td></tr></tbody></table>

3. Tick **I understand** (3) and click **Install** (4). A message confirms the installation, for example “Preset “Theme - Example” installed in “Storefront”.” The view then switches to the newly assigned theme.

**What the installation does exactly:**

* It assigns the theme of the preset to the sales channel if it uses a different one, and compiles it.
* It takes over the settings of the preset for this sales channel. These values then apply to it – even if you have set something different under “All Sales Channels”. Settings that the preset does not contain stay unchanged.
* It skips premium features that you have not unlocked.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-297ac81d24907ce08fe733ebea74a4a606cdd3a1%2Ftheme-bearbeiten-shop-vorher.webp?alt=media" alt="Shop with the default Shopware theme before the preset"><figcaption><p>Before: the sales channel with the default Shopware theme.</p></figcaption></figure>

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-49799220ea0160f1560669358cba4628eec0e777%2Ftheme-bearbeiten-shop-nachher.webp?alt=media" alt="Shop with the example theme after the preset"><figcaption><p>After: the example theme with the settings of its preset – its own colour, a different icon set, a house icon in front of “Home”, quick view buttons, availability dots next to the prices, a quantity selection at the buy button and a faded sold-out product.</p></figcaption></figure>

{% hint style="info" %}
If your sales channel uses a **duplicate** of a theme, the preset assigns the original theme – the window announces this. If you want to stay with the duplicate, assign it again afterwards under **Manage Themes**. The settings taken over are kept.
{% endhint %}

### Resetting to defaults

With **Reset** you remove all Theme - Manager settings that you have saved for this sales channel. The sales channel then follows what is set under “All Sales Channels” again and otherwise the default state.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-00348147d94d42f074128b2982e1539df595ff55%2Ftheme-bearbeiten-zuruecksetzen.webp?alt=media" alt="Reset to defaults prompt" width="500"><figcaption><p>The prompt for resetting.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Notice (1)</td><td>Appears if there are settings under “All Sales Channels”. They continue to apply after the reset – for this sales channel too.</td></tr><tr><td>I understand (2)</td><td>The <strong>Reset</strong> button can only be clicked once this box is ticked.</td></tr><tr><td>Reset (3)</td><td>Resets the settings. A message confirms this, for example “Settings of “Storefront” reset to defaults.”</td></tr></tbody></table>

The theme assignment, the theme settings (colours, fonts, logos), the switch for HTML minification and the order under **Theme Inheritance** remain unchanged.

## “Import / Export” tab

Here you back up all settings of a sales channel in a file – or import such a file, for example to transfer the settings to another sales channel.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-637fab1c92abba07495145b71a2691aee7f7a841%2Ftheme-bearbeiten-tab-import-export.webp?alt=media" alt="Import / Export tab"><figcaption><p>The “Import / Export” tab.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Export as JSON (1)</td><td>Downloads a file, for example <code>theme-storefront-shopware-default-theme.json</code>. It contains the theme settings (colours, fonts, logos) and all Theme - Manager settings that apply to this sales channel – including those under “All Sales Channels”.</td></tr><tr><td>Show JSON (2)</td><td>Shows the same content in a window, without a download.</td></tr><tr><td>Choose file … (3)</td><td>Imports a previously exported file – see <strong>Importing settings</strong>.</td></tr></tbody></table>

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-85ba06890a45031b7fbdb9a04233cf2c86caa3d8%2Ftheme-bearbeiten-json.webp?alt=media" alt="Theme settings as JSON window" width="700"><figcaption><p>The “Theme settings as JSON” window.</p></figcaption></figure>

In the window you see the content of the file (1). **Close** (2) closes the window, **Copy** (3) puts the content on the clipboard – the button then briefly shows “Copied”.

{% hint style="info" %}
Images such as logos appear in the file only as a reference to your media. The image files themselves are not included.
{% endhint %}

### Importing settings

1. Open the editing view of the sales channel that should receive the settings and switch to the **Import / Export** tab.
2. Click **Choose file …** and select the exported file. The import starts immediately.
3. A message confirms the import, for example “Theme settings imported into “B2B Shop”.”

The import takes over the Theme - Manager settings for this sales channel and the theme settings for the theme of this sales channel – with an effect on all sales channels that use this theme. If the file is not an export from the Theme - Manager, “This file is not a valid theme export.” appears and nothing changes.

## Saving and cache

The **Preset** and **Import / Export** tabs save immediately. In the **Theme settings** tab, you save with **Save & compile**.

{% hint style="info" %}
**Do you not see the change in the shop yet?** Shopware delivers pages from a cache and renews it automatically – after a few minutes, depending on how your shop is set up. With **Clear cache** at the top right you see the result immediately.
{% endhint %}

{% content-ref url="/pages/Gzdxdnu6wf1J33zGM8aY" %}
[Working with Settings](/theme-manager/en/getting-started/working-with-settings.md)
{% endcontent-ref %}

## Dependent settings in Shopware

### Duplicating a theme

A duplicate is a copy of a theme with its own theme settings. This way you use the same look with different colours or logos in another sales channel.

1. In the administration, open **Content › Themes**.
2. Move the mouse over the theme, click the menu (**…**) and choose **Duplicate** (1).

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-37c3b6ad729e87f5d1b316d461e4ba4ce58f91ed%2Ftheme-bearbeiten-duplizieren-menue.webp?alt=media" alt="Menu of a theme with the Duplicate entry" width="380"><figcaption><p>The menu of the default Shopware theme under “Content › Themes”.</p></figcaption></figure>

3. In the **Create duplicate** window, enter a name (1), for example “Shopware default theme B2B”, and click **Duplicate** (2). Shopware then opens the new duplicate.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-4edcd7294131cb7d5bc6a80d60549a0febd19909%2Ftheme-bearbeiten-duplizieren-fenster.webp?alt=media" alt="Create duplicate window" width="500"><figcaption><p>The “Create duplicate” window.</p></figcaption></figure>

4. Assign the duplicate to your sales channel – in the Theme - Manager through **Change theme** on the card of the sales channel.
5. Open the editing view through **Edit theme** and adjust the theme settings of the duplicate.

## Further reading

{% content-ref url="/pages/NDvMtgALwnlN6wTt9FRc" %}
[Themes & Sales Channels](/theme-manager/en/getting-started/themes-and-sales-channels.md)
{% endcontent-ref %}

{% content-ref url="/pages/AeGTg0foKHlKZjoteWL0" %}
[Logo](/theme-manager/en/features/layout/logo.md)
{% endcontent-ref %}

{% content-ref url="/pages/8gmMNQDhHrUhe7fnlebb" %}
[Google Fonts](/theme-manager/en/features/advanced/google-fonts.md)
{% endcontent-ref %}

{% content-ref url="/pages/HoJTb4t8nddyzL1KYXQS" %}
[Choosing Colours](/theme-manager/en/building-blocks/colours.md)
{% endcontent-ref %}

{% content-ref url="/pages/QnAMK5xweTAOmlS6ADKX" %}
[Selecting Images and Files](/theme-manager/en/building-blocks/media.md)
{% endcontent-ref %}

{% content-ref url="/pages/r44SCrkuuIC9itgFOkuJ" %}
[Premium Features](/theme-manager/en/premium.md)
{% endcontent-ref %}