Don't be afraid of updates! This guide will help you to perform Shopware and/or ThemeWare® updates efficiently while minimising potential errors and problems.
By updating regularly, creating backups, checking changelogs and deactivating incompatible extensions, you can make the update process more secure and smooth.
Perform updates as regularly as possible in order to always receive new features, improvements and fixes and to avoid issues with large version skips.
Wait a few days with updates if possible.
Font configuration
Create default folder for media
In the Shopware 6 Media Manager, you will usually find various default folders for different media types. If one or more of these folders are missing, you can easily create them yourself.
Go to Media Management in Admin under Content > Media. (1) (2)
Click on "Add new folder" in the top right-hand corner. (3)
Note: This article is work in progress.
Test updates in advance in a test system.
Always create a complete backup before every Shopware update.
Tip: Many hosters offer backup options via the administration interface.
Tip: With ThemeWare® Backup Manager, you can back up your theme configuration separately before the update and restore it if necessary.
Deactivate incompatible extensions before the update and only activate them once you have made sure that the version in your shop is compatible. (see Shopware Compatibility)
Tip: Clear the entire Shopware cache and reload the administration.
Clear the entire Shopware cache after updates and reload the administration.
Reload the storefront and the administration once with a "cache refresh".
Windows: Ctrl + F5
Mac: Command (⌘) + Shift (⇧) + R or Command (⌘) + Option/Alt (⌥) + R
You can find out which ThemeWare® version is compatible with which Shopware version in the ThemeWare® Service Portal:
Your update guide
We are always happy to receive on our updates and features, as well as constructive suggestions on how to further improve our products.
Further information
Give the folder a suitable name (e.g. "CMS Media").
Select the "Settings" option in the context menu of the new folder. (4) (5)
In the "Default media location for" field, select for which kind of media the folder should be used – e.g. "cms_page (Layout)". (6)
Save the change. (7)
The new folder will now be used automatically for the selected block – e.g. when uploading images in CMS elements.
Create default folder for CMS media
Shipping methods
You can find the settings for shipping and payment methods in the Shopware admin:
Go to Settings in the admin
Open the Shop section
Select Shipping
Here you can create new shipping methods or edit existing ones:
These configurations are applied directly in the footer and in the checkout of your storefront.
ThemeWare® does not change the functionality of shipping or payment methods – it only improves the visual display in the footer.
Matching, pagespeed-friendly logos are included in the ThemeWare® Utilities.
They are sent to you immediately and free of charge via email and help you create a more professional storefront design.
Here’s how to assign a logo in Shopware:
Go to Settings > Shop > Shipping
Click on the method you want to edit
In the "Media" section, select the appropriate logo from your media library and assign it
The assigned logos will be automatically displayed in the footer of your shop – as long as this feature is enabled in your theme settings.
Display mode of images
The "Display mode" determines how an image should be adjusted in size in order to fit into its image container.
The image keeps its aspect ratio, but will be adjusted to fit within the given height of the image container.
This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.
The size of the image is adjusted so that the aspect ratio is retained and the entire image container is filled. Any overflow is cropped.
In this mode, the image container is filled in each viewport. This results in the image being 'cut off' on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.
Images / Media
In Shopware 6, you organise images using the Media Manager. You can find this via the main navigation Content > Media in your administration.
File upload in the Media Manager supports the following file types:
The Media Manager comes with a number of pre-installed folders in which you can organise your images.
If you upload images via upload fields (for example in Shopping Experiences), Shopware will automatically sort the images for you.
In the settings of each folder, you have the option to define thumbnail sizes and the quality of the thumbnails for all images in that folder.
The image is scaled to the width of the image container without any height restrictions.
This means that there may be gaps on the top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.
Photo by Jeremy Bezanger on Unsplash
The image size will not be changed.
Photo by Jeremy Bezanger on Unsplash
The image will be scaled down to the smallest version of 'none' or 'container'.
This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.
Photo by Jeremy Bezanger on Unsplash
contain
also called "Fixed height"
cover
also called "Cropped"
stretch
also called "Scaled"
Photo by Jeremy Bezanger on Unsplash
Photo by Jeremy Bezanger on Unsplash
none
also called "Original" or "Standard"
scale-down
Shopware uses thumbnails of 400x400, 800x800 and 1920x1920 pixels by default. For product images, thumbnails with 280x280 pixels are also generated.
Manufacturer logos are available as 200x200, 360x360 and 1920x1920 pixel thumbnails.
If you select an image, you can edit the file name in the "Meta data" section. However, we would like to draw particular attention to the "Alt text" and "Title" here. You can use these to change the alt text and meta title of the medium.
Meta data
There is no general answer to the question of the perfect image size in fluid web design. It always depends on what an image is used for and how large it is displayed.
You can find more information on this in the following article:
You can find more information about Media Manager in the Shopware documentation:
Get ThemeWare® Utilities now! Register for free at service.themeware.design/en and get access to all premium resources – including logo sets, icons, and more!
Tip: For a consistent and professional look, we recommend using our page speed-optimized logos for all shipping methods.
This theme starts with a free trial month. The rent can be canceled at any time on a monthly basis or will be automatically renewed at the indicated prices.
Updates and support
For this extension, you receive free support directly from the manufacturer with an active rent. Additionally, all updates are free of charge.
Annually
Free trial month
This theme starts with a free trial month. The rent can be canceled at any time on an annual basis or will be automatically renewed at the indicated prices.
Updates and support
For this extension, you receive free support directly from the manufacturer with an active rent. Additionally, all updates are free of charge.
Note: If you have any questions or problems regarding bookings/licenses/subscriptions, please contact Shopware directly, as we as the manufacturer cannot influence this. >
Purchase
Note: Shopware changed the billing options for extensions in the store on 28 December 2023. Extensions can now only be rented.
Existing purchase licences must switch to a rental licence as soon as the licence has expired: .
FAQ
Multiple use - Do I have to purchase ThemeWare® again for another Sales Channel or domain?
Licences are linked to your shop, i.e. your Shopware installation. If you use several Sales Channels in this, you only need to purchase ThemeWare® once.
How can I transfer licenses?
Domains or licences can be transferred to another account or within this account. For exactly these scenarios you can request a license transfer in your customer account. You can find more information about this in the Shopware documentation:
Please note the following article:
You can find more information about licences in the "Shopware Account" section of the Knowledge Base or in the .
Identifying the current ThemeWare® Version
There are several ways to find out which is the latest ThemeWare® version.
The current version number of ThemeWare® is the first entry in the list, including the date of release.
Open the in the browser of your preference
Find and open the product page of your Theme
The current version number of ThemeWare® is shown here in two positions:
CMS layout
Each Shopping Experience is based on a "layout". There are different layout types (landing page, shop page, category page and product page).
Layouts can be assigned to a category or product via the category or product management.
A Shopping Experience layout consists of one or more CMS sections.
CMS layout in editor: (1) CMS section - (2) CMS block - (3) CMS element
Layout settings
You can access the settings for the selected CMS layout via the "cog" icon on the right-hand side of the window. Clicking on it opens the sidebar in which you can find the layout settings. Here you can change the name for the layout and the type of layout.
Layout settings
Settings
You can give each layout a name and assign CSS classes. You can also change the layout type (Shop page, Landing page, Category page).
You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:
Default media folder
In the Shopware 6 Media Manager, you will usually find various default folders for different media types – e.g. for products, categories, CMS content, etc.
Folder
Location for
Thumbnails
Settings
CMS element
A CMS element is a content element in a Shopping Experience, more precisely in a CMS block. Shopware offers you a selection of CMS elements, and with the ThemeWare® Pro Edition you also get an extensive collection of sales-promoting CMS elements.
To add a CMS element you need a suitable CMS block in your Shopping Experience. You can then assign a CMS element to this CMS block. You can read more about this in the section .
Move the mouse over the CMS block
Supported browsers
The Shopware 6 storefront is based on the Bootstrap framework. This results in the following range of supported browsers:
Note: In case the extension management does not offer you any updates, even though there is a newer version of ThemeWare® available, you may find possible solutions in the article ThemeWare® update not available
| | User Media | user (User) | Thumbnail quality: 80 |
Generate thumbnails for this folder
Keep aspect ratio
|
Category Media
Default media folders in Shopware 6
category (Category)
Click on the "Replace" icon (1)
The pop-up "Select element" will open
Select the desired CMS element here (2)
Add or replace CMS element
CMS element selection
Click on the corresponding CMS block to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "cog" icon (1) to configure the CMS element
The "Element settings" pop-up will open (2)
Save your changes
Configure or edit CMS element
CMS element settings
If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.
Shopping Experience: Switch language
You can find more information about ThemeWare® CMS elements in the ThemeWare® Manual:
You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:
In this section you will find important basics about working with Shopping Experiences in Shopware 6.
Shopping Experiences are a core feature of Shopware 6 and replace the Shopping Worlds from Shopware 5. With Shopping Experiences you can create and design content pages like landing pages, shop pages, category pages and product pages.
Note: You can find all the information about ThemeWare® features and extensions for Shopping Experiences in Shopware 6 in the ThemeWare® Manual: .
Basics
Each Shopping Experience is based on a "layout". There are different layout types (landing page, shop page, category page and product page).
Shopping Experience management
You can create or open a layout using the Shopware 6 Shopping Experiences management. You can access this via the menu item Content => Shopping Experiences in your administration.
Shopping Experience management
CMS editor (Shopping Experience editor)
When you create or open a layout, you will be taken to the Shopping Experience editor (CMS editor for short). In this WYSIWYG editor (1), you can edit your Shopping Experience layout and get a rough preview at the same time.
You can also make general settings in the sidebar (2), such as the name of the layout or the CSS class of the experience world in the storefront.
A layout (see ) consists of one or more sections (1, see ) into which individual blocks (2, see ) are added, which themselves consist of one or more elements (3, see ) such as texts or images.
Below you can see a layout of type "Landingpage" in the Shopping Experience editor of Shopware 6:
A CMS section (1) consists of one or more CMS blocks. You can make basic settings (2) for each section in the sidebar, such as the name of the section, the CSS class or the background colour of the section in the storefront.
A CMS block (1) contains one or more CMS elements. You can make basic settings (2) for each block in the sidebar, such as the name of the block, the CSS class, the background colour or the spacing of the block in the storefront.
You can configure a CMS element (1) by clicking on the corresponding element and then on the cogwheel symbol (2) (top right of the element).
Configuring a CMS element is fairly intuitive. Like our theme itself, ThemeWare® CMS elements offer you a wide range of configuration options. Just try them out or look at the relevant help texts. You can also find more information about our elements in the ThemeWare® Manual.
With ThemeWare® you get an extensive collection of sales promoting CMS blocks and CMS elements.
Since an element does not have to belong to every block and vice versa, we speak of CMS extensions.
You can configure a background colour and/or a background image for CMS sections as well as for CMS blocks. This already offers you various design options. Even more design options are provided by the corresponding CMS elements from Shopware and ThemeWare® Pro.
If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.
You can find all information about features and extensions of ThemeWare® for Shopping Experiences in Shopware 6 in the ThemeWare® Manual:
You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:
CMS block
CMS blocks have one or more slots. The slots (often columns) are each filled with one CMS element.
CMS block
Add CMS block
Click on the plus icon to select a CMS block
Select the desired CMS block in the "Block category" dropdown
Drag'n'drop the CMS block into your Shopping Experience
The CMS blocks in Shopware 6 have different configuration fields. In the section "Layout", for example, you will find the option to add "CSS classes" and to define the margins of the block.
You can give each block a name and add CSS classes. You can also define margins (technically it is the padding) of the block and assign a background colour and a background image. In the "Visibility" section you can also define on which device the block should be displayed.
In the block settings you also have the option of defining CSS classes for the corresponding CMS block. ThemeWare® offers you a number of CSS classes that you can use in your Shopping Experiences.
For all CMS blocks the following CSS classes are interesting:
You can find more classes in the following section "Tutorials" > "Shopping Experiences":
In addition, you can also use CSS classes: from , since the storefront in Shopware 6 is based on Bootstrap 5.
You can replace the CMS elements in most CMS blocks. You can learn more about this in the article .
You can find more information about ThemeWare® CMS blocks in the ThemeWare® Manual:
You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:
HTML code
In this tutorial you will learn how to insert and edit HTML code (for example in Shopping Experience).
In some places within the Shopware administration you will find a "WYSIWYG" editor ( i.e. "What You See Is What You Get"). This is a special form of editor in which the output of content corresponds to what is later displayed on the web.
In this editor you can enter text (1) and format it in a rudimentary way (2). The editor converts your formatting into valid HTML code in the background.
You will find "WYSIWYG" editors in the category and product management and especially when editing CMS elements in the Shopping Experience editor.
If the formatting options provided are not sufficient or if you want to add your own HTML code, you can switch to HTML mode (3).
WYSIWYG-Editor
WYSIWYG mode
HTML mode
WYSIWYG mode
The WYSIWYG mode is quite self-explanatory. You can easily enter the text you want and format it in a similar way to Word, for example - without any knowledge of HTML. You can also create lists and tables with just a few clicks.
Shopware has implemented an HTML Sanitizer in version 6.5 that automatically cleans up your code. This means that some formatting or tags may be deleted automatically. You can find more information about this in the article .
Potentially harmful code will be sanitised and removed from the editor automatically.
This message below the editor informs you that the HTML Sanitizer will modify your HTML code.
In our experience, the HTML mode is a little clumsy. If you click on the "Done" button too quickly, the HTML Sanitizer may not have "cleaned up" the code yet and your changes will not be saved and discarded.
It is said that clicking on the info icon triggers the sanitizer manually, at least this procedure gives the sanitizer some time to work.
Some of your inputs have been sanitised. Please double check your content.
This message appears below the editor when the sanitizer has "cleaned up" your code. Check if your content still fits.
Confirm your changes with the "Done" button.
Snippets (Languages)
The texts in the Shopware 6 storefront are implemented with snippets in the vast majority of cases. Snippets make it possible to manage recurring texts and terms centrally and use them flexibly in the storefront. They are particularly useful for quickly changing content, supporting multilingualism or ensuring consistent communication throughout the shop without having to edit the templates directly.
The storefront uses snippets from the Shopware standard template as well as snippets from the installed extensions (Apps, Plugins and Themes).
You can find the snippet manager of Shopware 6 in the Shopware settings:
"Settings" => "Shop" => "Snippets"
Tip: As with all Shopware core features, we recommend you take a look at the Shopware documentation: .
Editing snippets
If you would like to change or translate a text, please take a look at our instructions:
You can find an overview of the ThemeWare® snippets in the ThemeWare® Manual:
If you want to use snippets in a Sales Channel that deviate from the standard, you can do this using your own snippet set.
This is particularly useful if you want to continue using the standard set unchanged, e.g. if you want to integrate different snippets in a Sales Channel via different URLs for Germany and Austria.
You can find out how to create a individual snippet set in the Shopware documentation:
You can assign your individual snippet set in the settings of the corresponding sales channel via the domain configuration in the "Domains" section.
You can find more information about the snippets in Shopware 6 in the Shopware documentation:
Plugin Compatibility (HC-Architecture®)
Due to our HC-Architecture®, ThemeWare® is from the ground up highly compatible with almost all Shopware extensions (plugins or apps). In case there might be any incompatibility, you can solve it yourself with a few clicks by simply disabling the respective function area and thereby setting it to the Shopware standard.
Note: Extensions and/or their producers who strive for verifiable compatibility with ThemeWare® please find in the article .
Problems with third-party extensions only occur when the custom theme and the extension modify the same Twig block. In ThemeWare® for Shopware 6, our focus was therefore to modify Twig blocks only when absolutely necessary and to bind these modifications to configuration fields so that these modifications can be disabled.
In this article we are going to show configuration fields which you may use to solve problems on your own:
Header
In case of problems with the header, we recommend to use one of the ThemeWare® "Default headers" ("Header 1" and "Header 2"). These are based on the Shopware default header and therefore offer maximum compatibility with third-party extensions.
In the Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header" you will also find configuration fields to reset individual elements in the header to the default.
Further information will follow...
In case of problems with extensions in the footer, you will find configuration fields in the Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Footer" to reset individual elements in the footer to the default.
Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Content" => Field "New badge (Product badges)"
In case of problems with extensions that modify the breadcrumb, you will find a configuration field "Breadcrumb" in the Tab "Others" => Block "Compatibility (HC-Architecture®)" => in the Section "Content" to reset the breadcrumb to the default.
You can find the settings for shipping and payment methods in the Shopware admin:
Go to Settings in the admin
Open the Shop section
Select Payment methods
Here you can create new payment methods or edit existing ones:
These configurations are applied directly in the footer and in the checkout of your storefront.
ThemeWare® does not change the functionality of shipping or payment methods – it only improves the visual display in the footer or adds it to the product detail page.
Matching, pagespeed-friendly logos are included in the ThemeWare® Utilities.
They are sent to you immediately and free of charge via email and help you create a more professional storefront design.
Here’s how to assign a logo in Shopware:
Go to Settings > Shop > Payment Methods
Click on the method you want to edit
In the "Media" section, select the appropriate logo from your media library and assign it
The assigned logos will be automatically displayed in the footer of your shop – as long as this feature is enabled in your theme settings.
Shopware Compatibility
We always care that ThemeWare® is compatible with the most current Shopware version.
Shopware versioning
Major-Release
Incompatible API changes are made (= breaking changes)
Functionality is added in a backward-compatible manner
z.B. 6.5.1 > 6.5.2
Patch-Release
Backward-compatible bug fixes are made
z.B. 6.5.1.1 > 6.5.1.2
In the case of smaller Shopware version updates, so-called "minor releases" or "bug fixes" (e.g. 6.4.3.0 to 6.4.3.1), major adjustments are generally not to be expected and ThemeWare® therefore is usually already compatible prior to the Shopware update.
In the case of larger version updates, so-called "major releases" (e.g. 6.4.x to 6.5.0), a compatible ThemeWare® version is usually available prior to the actual Shopware release or on the same day.
Compatibility updates
In the past years we have made the experience that it makes sense to take the time to test an extension (app, plugin or theme) in every Shopware release. We therefore intentionally take our time to install and test ThemeWare® in every Shopware version. We also check the theme update process itself.
Depending on how early we get access to the final release and how extensive the compatibility check is, it can sometimes take a few hours for ThemeWare® to be updated or flagged as compatible. In 99% of all cases, the compatibility was ensured on the same day or even before the Shopware release.
We consider this procedure to be necessary in order to ensure true, proper compatibility and therefore the smoothest possible update.
Special case "Breaking changes"
Due to technical changes in Shopware (e.g. in Shopware 6.4.0.0 or Shopware 6.4.11.0), there may not be a ThemeWare® version (this applies to all extensions, by the way) which is – at the same time – compatible with both the old and the new Shopware version. In this case, a ThemeWare® update may be slightly delayed, depending on how extensive the necessary customizations are.
Of course, it may happen that there are "breaking changes" in ThemeWare, but that is extremely rarely the case.
Both Shopware and we are trying to avoid "breaking changes" as much as possible, but sometimes unfortunately this is technically unavoidable!
Whether your ThemeWare® Theme is compatible with the latest Shopware version, you may check on the store page of your theme in the Shopware Community-Store.
ThemeWare® Product Page in the Shopware Store
Shopware's Compatibility Overview has got a "catch". Although you do see that ThemeWare® is generally compatible with different Shopware versions, you do not see which versions it is compatible with.
For example, if you are not using the latest Shopware version, you will see that there is a newer ThemeWare® version available, but it may not necessarily be available for you. It might be as explained above that a newer ThemeWare® version is no longer compatible with older Shopware versions. In this case, the extension management of Shopware 6 deliberately no longer offers you an update. You should never circumvent this manually!
In order to easily view which ThemeWare® version is available for which Shopware version, we have integrated an overview of the Shopware compatibility in our service portal:
Minor-Releases & Patch-Releases
Major-Releases
Note: When updating Shopware, be sure to read our article . There you will find all information regarding a smooth Shopware update.
Checking Compatibility
Important: Please always use the update option of the extension management and do not install extensions manually to avoid installing an incompatible extension.
Get ThemeWare® Utilities now! Register for free at service.themeware.design/en and get access to all premium resources – including logo sets, icons, and more!
Tip: For a consistent and professional look, we recommend using our page speed-optimized logos for all shipping methods.
Image sizes
The question about the perfect image size cannot be answered generally. It always depends on what an image is used for and how large it is displayed.
The ideal image size depends on your design and the level of detail you want.
In this article we will give you some useful tips.
Tip: We recommend using images of the same size or at least images with the same proportions for each type of image.
Tip: Use the ThemeWare® PSD files
Basically, we recommend you to use the PSD files provided for the Shopping Experiences and the shop logos.
Tip: Via the you can get all graphics as PSD files and access to our free online course "Graphic Design".
Note: In case of fundamental changes in the thumbnail generation of Shopware, we update the ThemeWare® PSD files. Look out for corresponding notes in our Service Portal.
General information
The Shopware 6 "Media Management" (Media Manager) uses the following thumbnail sizes by default:
400x400 pixel (W x H)
800x800 pixel (W x H)
1920x1920 pixel (W x H)
Just upload a sufficiently large image. Shopware automatically generates the corresponding thumbnails in the sizes mentioned above. The thumbnails are used in the storefront, depending on the viewport. 1920px or larger is therefore a good starting point.
Shopware 6 Media Manager uses the following thumbnail sizes for manufacturer logos by default:
200x200 pixel (W x H)
360x360 pixel (W x H)
1920x1920 pixel (W x H)
This means you should upload these logos in a size of 1920x1920px or larger so that sufficiently large thumbnails are loaded in every browser and every viewport.
Shopware 6 Media Manager uses the following thumbnail sizes for category images by default:
400x400 pixel (W x H)
800x800 pixel (W x H)
1920x1920 pixel (W x H)
This means you should upload these images in a size of 1920x1920px or larger so that sufficiently large thumbnails are loaded in every browser and every viewport.
To ensure good performance, you should not use unnecessarily large images. At the same time, it is important to optimize your product images sufficiently to ensure high image quality with the smallest possible file size. One advantage of Shopware is that suitable thumbnails for different viewports are automatically generated for each uploaded image (see above). This ensures that the optimal image size is always loaded, depending on the device and screen resolution, which improves both performance and the user experience.
Shopware 6 Media Manager uses the following thumbnail sizes for product images by default:
280x280 Pixel (B x H)
400x400 Pixel (B x H)
800x800 Pixel (B x H)
1920x1920 Pixel (B x H)
Shopware recommends an image size of 600x600px, but this size is not included in the standard thumbnail settings (see above). This means that Shopware has to upscale smaller images for the generated thumbnails, which leads to a loss of quality.
To ensure optimal image quality, we recommend:
Upload images in a suitable size
Best 1920x1920px, because Shopware generates a 1920px thumbnail by default.
Alternative 800x800px, if you deactivate the 1920px thumbnail.
We recommend uploading images with at least 1920x1920px, as this matches the thumbnail presets.
Product images in the listing are stretched by default. This means that the product images (red border) are scaled to the height or width (depending on whether the image is in portrait or landscape format) of the designated area (blue border) to make sure the image is fully visible. The designated area is not necessarily filled. The proportions of the product images are preserved.
In the "cover" display mode, product images (red border) are scaled so that the designated area (blue border) is completely filled. The smallest side is scaled to the width or height (depending on whether the image is in portrait or landscape format) of the designated area, the rest of the image will be hidden. The proportions of the product images are preserved.
You can find the ideal image size for your theme in the PSD files in the .
More information and useful tips on the topic "shop logo" can be found in the following articles:
The theme preview image for theme duplicates is displayed with 225x120px. This is the minimum size the image should have. The Shopware default theme uses a 228x138px sized image.
Larger images will be centred and scaled. Using the CSS Property "cover", the image retains its aspect ratio and is scaled so that it is displayed as small as possible but completely covers the available area of 225x120px.
We recommend that you use the proportion of 225x120 pixels. However, the automatic scaling also allows a larger image (e.g. 250x133px, 300x160px, 380x202px or 450x240px).
Feel free to use our pagespeed optimised logos for shipping providers. Over 40 logos in resource-saving SVG format are available in the download package.
Feel free to use our pagespeed optimised logos for payment providers. Over 90 logos in resource-saving SVG format are available in the download package.
CMS section
Each CMS layout is made up of one or more CMS sections. This allows many different designs to be implemented with fullwidth and/or boxed sections.
There are currently two types of CMS sections: "Sidebar" and "Full width". In other words, a section with a sidebar and a section without a sidebar.
Section types (Sizing mode)
A CMS section is filled with one or more CMS blocks. Read more about this in the following article.
CMS section
Add CMS section
A new layout already contains a CMS section. To add another section before an existing section, click on the "plus" icon (1) above the section. To add a section after an existing section, click on the "plus" icon (2) below the section.
Add a CMS section
Now you can choose between the two available types of CMS sections ("Sidebar" and "Full width").
You can access the settings for a CMS section via the "layout" icon (1) on the left edge of the corresponding section. Clicking on it opens the sidebar (2) in which you will find the section settings. Here you can change the name and the sizing mode of the section.
You can give each section a name and assign CSS classes. You can select the sizing mode for each section and set a background colour and a background image. In the "Visibility" section you can define on which device the section should be displayed.
The representation of CMS sections in the Shopping Experience editor in Shopware 6 differs slightly from the actual representation in the Storefront. A CMS section always extends over the full width (unless you use the ThemeWare® boxed layout) of the Shopping Experience. The content of a section can then be displayed "full width" or "boxed".
Below you can see a comparison of a CMS section in the Shopping Experience editor and in the Storefront.
CMS section (1) [Background colour: #ffd181]
CMS block (2) [Background colour: #ff8d30]
CMS element (3)
You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:
If you prefer an intermediate size, you can customize the thumbnail settings and add 1200x1200px as an additional size, for example.
Take performance into account
Product images should be neither too small nor unnecessarily large. Choose a size that offers a good balance between image quality and loading time.
Product images should be well compressed to keep the file size as small as possible.
Recommended image optimization
Optimize thumbnails: Go to Media Manager and adjust the thumbnail sizes to match your shop design, removing any unnecessary formats as necessary. This helps to prevent redundant data and ensures that images are loaded in the optimal size and quality.
Compress images: Uncompressed images can significantly slow down the loading time of the shop. Use tools like TinyPNG to reduce the file size without any visible loss of quality.
Use modern image formats: WebP offers significantly better compression than JPG or PNG with the same or even better image quality. Shopware natively supports WebP, making this format recommended for faster loading times and better performance.
Automatic image optimization: There are extensions in the Shopware Store that automatically optimize images as soon as they are uploaded. These tools take care of compression and conversion to WebP, so no manual processing is required.
Manufacturer logo
Category images
Product images
Image size
Tip: We recommend using all product images with the same proportions and in a consistent format (landscape, portrait or square).
Note: We use 1200x1200px product images in our demoshops.
Original (formerly "Standard") or "Fixed height" [contain]
Cropped [cover]
Note: More information about the display modes of images can be found in the article Display mode of images.
In diesem Artikel erfährst du welche Daten ThemeWare® installiert und was beim Installieren, Aktivieren, Deaktivieren bzw. Deinstallieren mit den Daten passiert.
Es gibt im Zusammenhang mit ThemeWare® drei verschiedene "Arten" von Daten:
Benutzerdaten
Plugin-Daten
Theme-Daten
Benutzerdaten sind Daten vom Benutzer ergänzt werden (z.B. Produktbilder, Zahlungs-, Versandlogos usw.). Benutzerdaten werden von ThemeWare® nicht entfernt.
"Plugin-Daten" sind quasi das Plugin selber, also Daten die im Plugin-Ordner liegen. Das wären beispielsweise, Twig-/Template-Dateien, SCSS-Dateien, Vorschaubilder für CMS-Elemente usw. Diese Daten werden erst beim "Löschen" entfernt.
Dazu kommen Daten die von der Erweiterungs-Verwaltung installiert und deinstalliert werden. Das wären beispielsweise Textbausteine, CMS-Blöcke/-Elemente und Zusatzfelder.
Textbausteine werden beim Installieren/Aktivieren hinzugefügt.
Deaktivieren:
Unbearbeitete Textbausteine werden in der Textbaustein-Verwaltung "ausgeblendet".
Zusatzfelder werden beim Installieren/Aktivieren hinzugefügt.
CMS-Erweiterungen werden beim Installieren/Aktivieren hinzugefügt
Deaktivieren:
CMS-Blöcke/-Elemente werden in deinen CMS-Layouts "ausgeblendet". Technisch gesehen verbleiben Sie aber in den CMS-Layouts.
Ergänzend dazu gibt es "Theme-Daten". Das sind Daten die der Shopware 6 Theme-Manager installiert (z.B. das Shop-Logo, die Theme-Konfiguration, oder Theme-Duplikate).
Das Theme nach dem Installieren/Aktivieren in der Theme-Verwaltung angezeigt.
Deaktivieren:
Das Theme wird nicht mehr in der Theme-Verwaltung angezeigt.
Theme-Duplikate müssen manuell in der Theme-Verwaltung erstellt werden.
Deaktivieren:
Das Duplikat wird nicht mehr in der Theme-Verwaltung angezeigt.
Die Theme-Konfiguration (bzw. die Konfiguration von Theme-Duplikaten) wird beim Installieren/Aktivieren angelegt.
