CMS elements
Last updated
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
In this section of the documentation you will find all the ThemeWare® CMS elements that you can add to CMS blocks.
ThemeWare® provides you with an extensive and growing selection of CMS elements to customise your shop. The ThemeWare® CMS elements are available in the Pro Edition from version 0.5.0.
More elements are already in the pipeline and will follow soon. Be curious!
Tip: If you have further ideas or wishes for existing or new blocks, please send us your suggestions for improvement via our Service Portal.
Important: CMS elements are unfortunately not currently possible in the Shopware Cloud! The ThemeWare® Cloud Edition therefore does not currently contain any CMS elements.
To be able to place 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 find out more about this in the section CMS blocks.
Move the mouse over the CMS block
Click on the "Replace" icon (1)
The pop-up "Select element" opens
Select the desired CMS element (2)
Click on the corresponding CMS block to activate the "edit mode"
Hover the mouse over the desired CMS element
The "Element Settings" pop-up will open (2)
Make the desired changes
Save your changes
Tip: Make sure that all mandatory fields "*" are filled in, otherwise you will not be able to save the Shopping Experience. ThemeWare® shows you all mandatory fields with a small blue asterisk behind the field name.
Note: With Shopware 6.5, an HTML sanitizer has been implemented. This sanitizer improves security, reliability and usability of the editor by removing unsafe HTML code.
It also sanitizes styles and attributes for consistent and correct code rendering regardless of platform and browser. (see HTML sanitizer)
Many CMS elements from ThemeWare® have a similar structure. They consist of different "layers".
The bottom layer is often the image or background image (1). A "Coloured overlay" (2) can often be placed on top of this. Another layer above this is the "Content overlay" (3). This is the actual content, i.e. the text or labelling of the element.
There are also similarities in the configuration of CMS elements. Below you will find settings that can be found in many CMS elements:
In many CMS elements, you will find the "SEO & Pagespeed" tab. Here you can define the HTML tag (p, h1, h2, ...) of headlines and use it to optimise the HTML hierarchy of your Shopping Experiences.
Tip: You can define the "alt text" and the "title" attribute of images in Shopware 6 in the media manager.
In the "Pagespeed" section, you have the option to configure "Lazy loading" for images.
eager – Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".
lazy – Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".
In almost every CMS element you will find the "Advanced" tab. Here you can configure CSS classes and use expert settings.
You can select each HTML element in a CMS element using the appropriate CSS classes. However, if you want to use your own CSS classes, you can insert them in the "Advanced" tab.
In the section "CSS classes", you can add your own CSS classes to various components of a CMS element. Separate multiple CSS classes with a space (blank).
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!
Note: You can find more information on how to use these in the ThemeWare® Knowledge Base in the "Profi knowledge" section.
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.
Further information and basics about "Shopware 6 Shopping Experiences" and "CMS elements" can be found in the ThemeWare® Knowledge Base:
Click on the "gear" icon (1) to configure the CMS element
