ThemeWare® 3.2.0

ThemeWare® 3.2.0 is now available! 🎉

As with all updates and especially with updates as extensive as this one, we recommend that you install the update in a test system in advance. This allows you to check any changes at your leisure and make any necessary adjustments. We also recommend making a complete backup of your shop before the update.

Please also note that beta functions are still in the testing phase and may change in an upcoming release.

The new release includes the following changes:

Highlights

• CMS block "Grid 'Modern' (swapped)" added [Pro Edition] #PremiumRequest
• CMS block/element "Product description & reviews (Accordion)" added [Pro Edition] #FeatureRequest
• CMS blocks "Image gallery and buy box" with additional slots added [Pro Edition] #FeatureRequest #beta
• CMS element "Image gallery (Grid)" added [Pro Edition] #beta
• New tab "Datasheets" added
• New CSS "spacing classes" for column and grid blocks added
• New extension "Hero section" added
• New extension "Quickview" added #FeatureRequest #beta
• New feature "Dropdown top navigation" added #FeatureRequest #beta
• New feature "Quantity selection in product boxes" added #beta
• New feature "Product image resizing" added #beta
• New feature "Datasheets" added to the "Description" tab
• New feature "Downloads" added to the "Description" tab
• New feature "HTML5 videos" added to the "Description" tab
• New feature "HTML5 video" added to the "Product videos" tab
• New feature "Comment" added to the "Description" tab
• New feature "Related links" added to the "Description" tab
• New configuration for a heading of the "Category navigation" (Sidebar) added
• New option "Listview" added to the listing element [Pro Edition] #beta
• New product custom fields for "Datasheets" added #FeatureRequest
• New product custom fields for "Downloads" added
• New product custom fields for "HTML5-Videos" added #FeatureRequest
• New product custom fields for "Related links" added
• New product custom field for a "Comment" added
• New category custom fields "Columns per row" added
• New category custom field for "Hero section" added
• New category custom field for "Listing subcategories" added

Changes

• Blur effect for the "Cookie permission" overlay can be configured
• Blur effect for the "Fullscreen search" overlay can be configured
• Blur effect for modal backdrops can be configured
• CSS "spacing classes" for column and grid blocks updated and fixed
• Layout of tables on product pages improved
• Extension "Listing subcategories" reworked
• Colour contrast of the "Product badges" improved
• Five-column option added for "Listing" layouts #FeatureRequest #beta
• Five-column option added to the "Listing subcategories" extension #beta
• Hover effect "slide up (NEW)" of the "Buy button" improved
• Hover effect of links in the "Flyout" of the "Top navigation" improved
• Icon for external links in the "Flyout" of the "Top navigation" added #beta
• Configuration of the spacings of the "Sidebar widgets" extended and improved
• Padding of the "Copyright footer" in mobile viewports improved
• Tab "Description" reworked
• Tab "Custom content" reworked
• Tab "Manufacturer" reworked
• Tab "Product videos" reworked
• Preview of some CMS elements improved [Pro Edition]
• Bugfix: Alignment of footer headlines in mobile viewports improved
• Bugfix: The backdrop colour of the "Cookie permission" can be configured again
• Bugfix: Properties headline and infotext in the "Description" tab fixed
• Bugfix: Background colour of modals fixed

Notes

• The extension "Listing subcategories" has been moved to another template file
• The template files for the "Custom tab" have been reworked
• The template files for the "Video tab" have been reworked
• The "Fullscreen search" has a new configuration for the background colour of the overlay
• Modals have a new configuration for the background colour of the backdrop

---

Highlights

ThemeWare® 3.2.0 is packed with many new features. Below you will find an overview of the new functions and options that you will receive with this update:

CMS block "Grid 'Modern' (swapped)" added [Pro Edition] #PremiumRequest

We have created a new CMS block as part of a customer project. The "Grid 'Modern' (swapped)" block is, as the name suggests, an "inverted" version of the "Grid 'Modern'" block.

CMS blocks "Image gallery and buy box" with additional slots added [Pro Edition] #FeatureRequest #beta

Feel free to test our new CMS element "Product description & reviews (Accordion)". This displays the product description on product pages as an "accordion" instead of tabs.

CMS block/element "Product description & reviews (Accordion)" added [Pro Edition] #FeatureRequest

A feature request for a assignable slot in the "Gallery and Buybox" CMS blocks has been implemented. This makes it easy to add further elements under the gallery or under the buybox.

CMS element "Image gallery (Grid)" added [Pro Edition] #beta

Feel free to test our new CMS element "Gallery (Grid)". This offers you new and customised layout options for the gallery on your product pages.

New tab "Datasheets" added

A new tab for "Datasheets" has been added. You can store data sheets in the form of PDFs via new custom fields in the respective product.

Tab "Product pages" => Block "Tab "Datasheets"" => Show datasheets tab

New CSS "spacing classes" for column and grid blocks added

With this ThemeWare® release, we have added new spacing classes for Shopping Experiences. These define the spacing of the individual CMS elements in grid and column blocks.

The CSS class .twt-cms-gap-10, for example, ensures a gap of 10px. This corresponds to a padding left/right of 5px and a margin-bottom of 10px in grids.

This also applies to the spacing (margin-bottom) of "columns" in mobile viewports. You can now use one CSS class for all spacing.

New extension "Hero section" added

With this ThemeWare® theme release we have added a new theme extension "Hero section". This represents the category name and text in an appealing "banner".

If you have also defined a category image, this will be used as the background image. However, you can also use a customised background image via a corresponding category custom field.

Furthermore, you have the option of integrating the breadcrumb into the banner.

Tab "Extensions" => Block "Hero section (on listing pages)" => Show 'Hero section' (CMS listing pages)

New extension "Quickview" added #FeatureRequest #beta

Feel free to test the new "Quickview" theme extension. This is a quick view for products in product listings.

Tab "Others" => Block "Beta" => Quickview

New feature "Dropdown top navigation" added #FeatureRequest #beta

Feel free to test the new "Dropdown top navigation". This replaces the default Shopware flyout with compact dropdown menus.

Tab "Others" => Block "Beta" => Section "Dropdown top navigation" => Dropdown top navigation

New feature "Quantity selection in product boxes" added #beta

Feel free to test the new "Quantity selection" in product boxes. This allows more than one product to be added to the shopping basket in the product listing.

Tab "Others" => Block "Beta" => Quantity selection (in product boxes)

New feature "Product image resizing" added #beta

Feel free to test the new "Product image resizing" feature. With this feature, product images adapt better in mobile and are therefore represented larger.

Tab "Others" => Block "Beta" => Section "Product box" => Product image resizing

New feature "Datasheets" added to the "Description" tab

You can now display "Datasheets" in the "Description" tab. You can store the data sheets in the form of PDFs via new custom fields in the respective product.

Tab "Product pages" => Block "Tab "Description"" => Section "Datasheets" => Show datasheets

New feature "Downloads" added to the "Description" tab

You can now display "Downloads" in the "Description" tab. You can store downloads in the form of PDFs via new custom fields in the respective product.

Tab "Product pages" => Block "Tab "Description"" => Section "Downloads" => Show downloads

New feature "HTML5 videos" added to the "Description" tab

You can now display "HTML5 videos" from the media management in the "Description" tab. You can store the videos with new custom fields in the respective product.

New feature "HTML5 video" added to the "Product videos" tab

You can now display "HTML5 videos" from the media management in the "Product videos"’ tab. You can store the videos with new custom fields in the respective product.

New feature "Comment" added to the "Description" tab

You can now display a "Comment" in the "Description" tab. You can enter the comment in a new custom field in the respective product.

Tab "Product pages" => Block "Tab "Description"" => Section "Comment" => Show comment

New feature "Related links" added to the "Description" tab

You can now display "Related links" in the "Description" tab. You can store the links via new custom fields in the respective product.

Tab "Product pages" => Block "Tab "Description"" => Section "Related links" => Show related links

New configuration for a heading of the "Category navigation" (Sidebar) added

A configuration for displaying a heading for the "Category navigation" in the sidebar has been added.

Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Basic configuration" => Show "Category navigation" headline

New option "Listview" added to the listing element [Pro Edition] #beta

Feel free to test the new "List view" option in the listing element of Shopware. This is used to represent the "List view" listing layout.

New product custom fields for "Datasheets" added

You can now add "datasheets" in the form of PDFs via new custom fields in the respective product and display them on product pages.

New product custom fields for "Downloads" added

You can now add "downloads" in the form of PDFs via new custom fields in the respective product and display them on product pages.

New product custom fields for "HTML5-Videos" added #FeatureRequest

You can now add "HTML5 videos" from the media management via new custom fields in the respective product and display them on product pages.

New product custom fields for "Related links" added

You can now add "Related links" via new custom fields in the respective product and display them on product pages.

New product custom field for a "Comment" added

You can now add a "comment" via a new custom field in the respective product and display it on product pages.

New category custom fields "Columns per row" added

With this release, you can configure the "Columns per row" (or the number of products per row) for the respective category individually – i.e. in deviation from the "global" configuration – via new category custom fields.

New category custom field for "Hero section" added

You can configure the new theme extension "Hero section" individually for the respective category via the category custom field – i.e. in deviation from the "global" configuration.

New category custom field for "Listing subcategories" added

With this ThemeWare® theme release, you can use a new category custom field to set whether the theme extension "Listing subcategories" should be displayed in the respective category – as a deviation from the "global" configuration. (This affects the theme extension - not the CMS extension).

---

Änderungen im Detail

In addition to the many new features, there are also some improvements in ThemeWare® 3.2.0. Below you will find an overview of the changes:

Blur effect for the "Cookie permission" overlay can be configured

Modern browsers support a blur effect for overlaying elements. You can now configure this effect for the "Cookie notice" overlay.

Tab "Content" => Block "Cookie permission" => Section "Basic configuration" => Blur effect [px] (Overlay)

Blur effect for the "Fullscreen search" overlay can be configured

You can now configure a blur effect for the "Fullscreen search" overlay.

Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'" => Blur effect [px] (Backdrop)

Blur effect for modal backdrops can be configured

You can now configure a blur effect for the overlay of modals or the offcanvas cart.

Tab "Layout" => Block "Modals" => Section "Colour configuration" => Blur effect [px] (Backdrop)

CSS "spacing classes" for column and grid blocks updated and fixed

We have updated and fixed the CSS spacing classes for column and grid blocks in this release. This affects the spacing classes .twt-cms-col-padding-* and .twt-cms-col-margin-*.

Layout of tables on product pages improved

The price and properties table now have an improved spacing.

Extension "Listing subcategories" reworked

The "Listing subcategories" extension has been revised and improved.

Colour contrast of the "Product badges" improved

The colour contrast of the product badges has been improved with regard to the Web Content Accessibility Guidelines (WCAG).

Five-column option added for "Listing" layouts #beta

Feel free to test the new "five-column" option for listing layouts. The Bootstrap grid does not offer 5 columns by default, so we have extended the grid in this respect.

e.g. Tab "Listing pages" => Block "Layout (Layout type "Standard")" => Section "Columns per row" => Desktop (≥1200px)

Five-column option added to the "Listing subcategories" extension #beta

You can also test the new "five-column" option in the "Listing subcategories" extension.

Hover effect "slide up (NEW)" of the "Buy button" improved

The hover effect "slide up (NEW)" of the buy button has been revised and improved. The text no longer "covers" the product image.

Hover effect of links in the "Flyout" of the "Top navigation" improved

The hover effect of links in the "flyout" of the top navigation has been revised and improved.

Icon for external links in the "Flyout" of the "Top navigation" added #beta

An icon for indicating external links in the "flyout" of the top navigation has been added.

Tab "Others" => Block "Beta" => Section "Top navigation flyout" => Show icon for external links

Configuration of the spacings of the "Sidebar widgets" extended and improved

The configuration of the spacing of sidebar widgets has been extended and improved. Check the spacing of your widgets once after the update and adjust the spacing if necessary.

Padding of the "Copyright footer" in mobile viewports improved

Improved the padding of the "Copyright footer" in mobile viewports. The footer is now more compact.

Tab "Description" reworked

The ‘Description’ tab has been reworked. Various features have been added and many template changes have been made.

Tab "Custom content" reworked

The template files from the ‘Custom content’ tab have been reworked and expanded.

Tab "Product videos" reworked

The template files from the ‘Product videos’ tab have been reworked and expanded.

Preview of some CMS elements improved [Pro Edition]

The preview of some CMS elements in the Shopping Experience editor has been improved.

Bugfix: Alignment of footer headlines in mobile viewports improved

The centring of footer headlines in mobile viewports has been improved.

Bugfix: The backdrop colour of the "Cookie permission" can be configured again

The colour configuration of the "Cookie permission" overlay had no effect. This has been fixed in this update.

Bugfix: Properties headline and infotext in the "Description" tab fixed

The representation of the property headline and the property info text in the "Description" tab has been corrected.

Bugfix: Background colour of modals fixed

Modals now have the correct background colour again.

---

Notes

As part of the addition of new tabs and the development of the new CMS element ‘Product description & reviews (Accordion)’, all template files of the tabs provided by ThemeWare® have been reworked, tidied up and improved. If you have made individual customisations in this block, please check your customisations in a test system before updating.

In addition, the snippets of the tabs on product pages have been revised, standardised and changed:

• The snippet twt.detail.headlineProperties has been split into two separate snippets:
  • Headline in the "Description" tab: twt.detail.properties.title
  • Headline in the "Properties" tab: twt.detail.tabProperties.headline
• There is now a separate snippet for the headline in the "Custom tab"
  • twt.detail.tabCustom.headline
• The snippet twt.detail.tabManufacturer.headlineManufacturer has been replaced by the snippet twt.detail.tabManufacturer.headline
• The snippet twt.detail.tabVideos.headlineVideos has been replaced by the snippet twt.detail.tabVideos.headline
• The snippet twt.detail.customFields.productVideos.title has been replaced by the snippet twt.detail.productVideos.title

The extension "Listing subcategories" has been moved to another template file

The extension "Listing subcategories" has been moved to another template file.

The template files for the "Custom tab" have been reworked

The "Custom content" has been moved from the twt-product-detail-tab-custom.html.twig file to the new includes/twt-product-custom-content.html.twig file.

The template files for the "Video tab" have been reworked

The template files for the "Video tab" have been reworked. Various features have been added and many template changes have been made.

The "Fullscreen search" has a new configuration for the background colour of the overlay

Please check the configuration of the background colour of the full screen search overlay (Tab "Header" -> Block "Search"). There is now a new configuration . You can still find the old configuration for a few weeks in the Tab "Others" -> Block "Deprecated".

Modals have a new configuration for the background colour of the backdrop

Please check the configuration of the background colour of modal overlays (Tab "Layout" -> Block "Modal"). There is now a new configuration . You can still find the old configuration in the Tab "Others" -> Block "Deprecated" for a few weeks for comparison.

---

These are the changes in ThemeWare® 3.2 for Shopware 6.6.

Best regards, Sebastian and the ThemeWare® team