ThemeWare® 2.1.0

Published: 19. October, 2023

Back to overview

ThemeWare® 2.1.0

ThemeWare® 2.1.0 is here! 🎉 The new release includes the following changes:

Highlights

New extension "Checkout steps" added
New extension "Listing subcategories" added
CMS block/element "Listing subcategories" added [Pro Edition]
CMS block/element "Image teaser" added [Pro Edition]
CMS block "One column" added #FeatureRequest
CMS block "Three columns, 2-8-2" added [Cloud Edition]
CMS block "Three columns, 3-6-3" added [Cloud Edition]
CMS block "Three columns, 2-2-8" added
CMS block "Three columns, 3-3-6" added
CMS block "Three columns, 6-3-3" added
CMS block "Three columns, 8-2-2" added
CMS block "Hero slider (2x)" added [Pro Edition] #FeatureRequest
CMS block "Hero slider (4x)" added [Pro Edition] #FeatureRequest
CMS block "Two columns (swapped on phones)" added [Cloud Edition]
CMS element "Image slide (Hero slider)" added [Pro Edition] #FeatureRequest
Colour overlay added to "Call-to-Action slide (Hero slider)" [Pro Edition]
Colour overlay added to "Text slide (Hero slider)" [Pro Edition]
Added configuration for the general link colour
Added configuration for the width of the "Top bar"
Added configuration for the width of the "Top navigation"
Configuration for the display period in the "Call-to-Action slide (Hero slider)" added [Pro Edition]
Configuration for the display period in the "Text-Slide (Hero-Slider)" added [Pro Edition]
Configuration for the duration of the "Call-to-Action slide (Hero slider)" added [Pro Edition] #FeatureRequest
Configuration for the duration of the "Text slide (Hero slider)" added [Pro Edition] #FeatureRequest
Configuration for the image display mode in the "Text slide (Hero slider)" added [Pro Edition]
Configuration for the image display mode in the "Call-to-Action slide (Hero slider)" added [Pro Edition]
Configuration for the background colour of all teasers added [Pro Edition]
Configuration for the background colour of texts in the "Call-to-Action slide (Hero slider)" added [Pro Edition]
Configuration for the background colour of texts in the "Text slide (Hero slider)" added [Pro Edition]
Configuration for the overlay background effect in the "Call-to-Action" added [Pro Edition]
Configuration for the minimum height in the "Call-to-Action slide (Hero slider)" added [Pro Edition] #FeatureRequest
Configuration for the minimum height in the "Text slide (Hero slider)" added [Pro Edition] #FeatureRequest
Configuration for the indentation in the flyout of the top navigation added
Configuration for displaying the delivery time on detail pages added #FeatureRequest
Configuration to hide the product number on detail pages added #FeatureRequest
Label "Not available" on detail pages added
Label "Pre-order" on detail pages added
Labels "Delivery time" on detail pages added
Added more CSS classes for column margins
Added custom field to highlight a category in top navigation #FeatureRequest

Changes

CMS element "Button teaser" entirely clickable [Pro Edition]
CMS element "Call-to-Action" entirely clickable [Pro Edition] #FeatureRequest
CMS element "Call-to-Action slide (Hero slider)" entirely clickable [Pro Edition] #FeatureRequest
Improved appearance of all teasers in display mode "Standard" [Pro Edition]
Improved appearance of "Accept all cookies" button in cookie configuration
Product specifications visually grouped on the detail page
Text improvements in the theme configuration
Theme JS plugins updated
Preview of the column CMS blocks improved
Preview of the "Button teaser" improved [Pro Edition]
Preview of the "Call-to-Action" improved [Pro Edition]
Preview of the "Classic teaser" improved [Pro Edition]
Preview of the "Discount banner" improved [Pro Edition]
Preview of the "Hero slider" improvedt [Pro Edition]
Preview of the "Modern teaser" improved [Pro Edition]
Preview of the "Text teaser" improved [Pro Edition]
Preview of the "Text teaser (decorated)" improved [Pro Edition]
Preview of the "Hover box" improved [Pro Edition]
Bugfix: Selection of button colour in "Call-to-Action" fixed [Pro Edition]
Bugfix: Logo width in mobile viewport is applied correctly again
Bugfix: "Open media" button in "Hero countdown (Heading)" fixed [Pro Edition]
Bugfix: Font size in form inputs is applied correctly again
Bugfix: Sticky feature of the "Floating widget" fixed

Notes

Please check the configuration of the "Top Navigation" after the update.
Please check the configuration of your "Hero sliders" after the update. [Pro Edition]

Changes in detail

ThemeWare® 2.1.0 is packed with new features and new functions for existing features. Below you will find all changes in detail.

New extension "Checkout steps"

With ThemeWare® 2.1 there is a new (integrated) extension. The "Checkout Steps" known from ThemeWare® for Shopware 5 are now also part of ThemeWare® for Shopware 6.

New CMS blocks

ThemeWare® 2.1 contains four new CMS blocks, each with three columns. These are available in the Pro and Cloud Edition.

CMS block "Three columns, 2-8-2" added

ThemeWare® CMS-Block "Drei Spalten, 2-2-8"

CMS block "Three columns, 3-3-6" added

ThemeWare® CMS block "Three columns, 3-3-6"

CMS block "Three columns, 2-2-8" added

ThemeWare® CMS block "Three columns, 2-2-8"

CMS block "Three columns, 6-3-3" added

ThemeWare® CMS block "Three columns, 6-3-3"

New in the "Cloud Edition"

With ThemeWare® 2.1, the Cloud Edition gets three more column blocks from the Pro Edition:

CMS block "Three columns, 2-8-2"

CMS block "Three columns, 3-6-3"

CMS block "Two columns (swapped on phones)"

New in the "Pro Edition"

For the Pro Edition, ThemeWare® 2.1 has a few highlights in the "CMS Extensions" area:

CMS block "Hero slider (2x)"
CMS block "Hero slider (4x)"
CMS block/element "Image teaser"
CMS element "Image slide (Hero slider)"

In addition, we have made various improvements to existing CMS blocks and elements.

Hero slider

The representation of the Hero Slider in the Shopping Experience editor has been completely reworked. Thanks to the new slider feature, the representation in the editor now comes much closer to the representation in the storefront.

NEW: Hero slider 2x and 4x added

As we all know, all good things come in threes, and we have listened to the requests for a 2x and 4x slider and integrated them into ThemeWare®.

NEW: Coloured overlay for hero slides added

All "Hero slides" now have a coloured overlay, just like the teaser elements. You can activate this if necessary.

ThemeWare® "Hero slide" with coloured overlay

NEW: Image slide (Hero slider)

With the "Image slide (Hero slider)", a third CMS element is now available for the Hero slider - for all those who wanted a slide without text.

Call-to-Action slide (Hero slider)

The CMS element "Call-to-Action slide (Hero slider)" now has a configuration for the duration of the slide.

It is now possible to change the image display mode from "contain" to "cover". Along with this, there are configuration options for the breakpoint and the minimum height in display mode "cover".

In addition to the overlay colour, there is now a configuration for the "background colour" of the text that is displayed below the image and not overlaid.

The configuration ("Show from" and "Show until") for the display period of the slide is also new.

The "Call-to-Action slide (Hero slider) is entirely clickable if required.

Note: The feature of the breakpoint options 'none' and 'all' has been swapped.

Text-Slide (Hero-Slider)

The CMS element "Text slide (Hero slider)" now has a configuration for the duration of the slide.

In addition to the overlay colour, there is now a configuration for the "background colour" of the text that is displayed below the image and not overlaid.

The configuration ("Show from" and "Show until") for the display period of the slide is also new.

Note: The feature of the breakpoint options 'none' and 'all' has been swapped.

Button teaser

The "Button teaser" is entirely clickable if required.

Call-to-Action

The "Call-to-Action" teaser is entirely clickable if required.

There is also a new configuration for a background effect of the text overlay.

ThemeWare® "Call-to-Action" overlay background effect (right)

NEW: Added configuration for the background colour for all teasers

We have added a configuration for the background colour of all teasers. This will give you even more design options in the future.

Improved appearance of all teasers in display mode "Standard"

The alignment of the image and the text to each other and within the CMS block has been improved in all ThemeWare® Teasers.

Preview of the "Classic teaser" improved

The preview of the "Classic teaser" in the Shopping Experience editor has been improved and is now closer to the appearance in the Storefront.

Preview of the "Modern teaser" improved

The preview of the "Modern teaser" in the Shopping Experience editor has been improved and is now closer to the appearance in the Storefront.

Preview from "Discount banner" improved

The preview of the "Discount banner" in the Shopping Experience editor has been improved and is now closer to the appearance in the Storefront.

Preview of the column CMS blocks improved

The preview of the ThemeWare® column blocks in the Shopping Experience editor has been improved and is now much closer to the appearance in the Storefront. In addition, the ThemeWare® spacing classes now already have an effect on the CMS preview of the column blocks in the editor (see https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks).

NEW: Image teaser

With ThemeWare® 2.1 there is a new CMS extension (CMS block + CMS element). The "Image teaser" adds an exciting new layout option to the existing teasers. It is a simple but effective element with configurable hover effects.

NEW: Highlight a category in the top navigation

With ThemeWare® 2.1 we have added a custom field to highlight a category in the top navigation.

Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

New product specifications on detail pages

NEW: Added configuration to display the delivery time on the detail page

The delivery time can now be displayed in the product specifications.

Tab "Product pages" => Block "Product specifications (in the buybox)" => Show delivery time

NEW: Added configuration to hide the product number on the detail page

The product number can now be hidden in the product specifications.

Tab "Product pages" => Block "Product specifications (in the buybox)" => Show product number

NEW: Product specifications visually grouped on the detail page

For better readability, the product specifications have been grouped and have spaces between them.

Tab "Product pages" => Block "Product specifications (in the buybox)" => Spacing (Sections)

ThemeWare® "Product specifications" visually grouped on the detail page

New delivery information labels on detail pages

The sales-promoting ThemeWare® "Delivery information labels" replace (if configured) the default Shopware hints.

Tab "Product pages" => Block "Delivery information labels (in the buybox)"

NEW: Label "Not available" on detail pages added

The new "Not available" label can now be activated.

NEW: Label "Pre-order" on detail pages added

The new "Pre-order" label can now be activated.

NEW: Labels "Delivery time" on detail pages added

The new delivery time labels ("Delivery time (Available)" or "Delivery time (Restock)") can now be activated.

ThemeWare® labels added to the details page

Further news and changes

NEW: Added configuration for the general link colour

The general link colour can now be configured. This affects various links in the Storefront that do not use an individual colour.

Tab "Layout" => Block "Typography" => Section "Links" => Link colour

The hover colour is also generated from this colour, as intended by Bootstrap.

Beta: This configuration is in a testing phase, feel free to give it a try.

NEW: Added configuration for the width of the "Top bar"

The width of the "Top bar" can now be configured independently of the header width.

Tab "Header" => Block "Top bar" => Section "Basic headers "Header 1" and "Header 2"" => Width

NEW: Added configuration for the width of the "Top navigation"

The width of the "Top Navigation" can now be configured independently of the header width.

Tab "Header" => Block "Top navigation" => Section "Basic headers "Header 1" and "Header 2"" => Width

NEW: Added configuration for the indentation in the flyout of the top navigation

The indentation of the subcategories in the flyout of the top navigation can be configured.

Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration" => Indentation

Improved representation of the "Accept all cookies" button in the cookie configuration

Currently the "Accept all cookies" button in the cookie configuration of Shopware 6 is smaller and too close to the "Save" button. We have fixed this with ThemeWare®.

Text improvements in the theme configuration

Various texts in the theme configuration have been improved and new help texts have been added.

Theme JS plug-ins updated

We are currently working on rewriting the remaining JS plugins to vanilla JS (or plain JS).

For this release we have rewritten the "Full-Width Sticky-Header" plugin ("twtFullWidthStickyHeader"). The "Full-Width Sticky-Header" now works without jQuery and we also fixed a minor bug.

In addition, we have optimised plugins that have already been rewritten ("twtAnnouncementBannerPlugin", "twtScrollAnimation", "twtCookiePermission", "twtFloatingWidget" and "twtSlideoutCommunities") once again.

NEW: Added more CSS classes for column spacing

There are new CSS classes for the mobile representation of the column blocks (see https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks).

Bugfixes

Selection of the button colour in the "Call-to-Action" fixed [Pro Edition]

An error in the dropdown of the colour configuration of the button in the "Call-to-Action" was fixed.

Logo width in mobile viewport is applied correctly again

The configuration of the width of the shop logo in mobile viewports is applied correctly again.

"Open media" button in "Hero countdown (Heading)" fixed [Pro Edition]

An error in the CMS element "Hero countdown (Heading)" has been fixed which disturbed the "Open Media" button.

Font size in form fields is taken over correctly again

An error in the $input-font-size has been fixed. This is now correctly used in forms again.

Sticky feature of the "Floating widget" fixed

An error in the JS plug-in of the "Floating widget" has been fixed. The sticky feature now works correctly again.

One More Thing

New: Listing subcategories

Last but not least, we present the new extension "Listing subcategories".

The extension can be activated via the theme configuration and displays "tiles" for the corresponding subcategories on listing pages (if the category has subcategories). These "tiles" can contain category images, but can also just be text tiles or buttons. As usual, you have extensive configuration options at your disposal.

In the Pro Edition of ThemeWare® you also get a corresponding CMS extension (CMS block + CMS element) so that you can place the element freely in your listing layouts.

ThemeWare® "Listing subcategories" (CMS extension)

Notes

Please check the configuration of the "Top Navigation" after the update

This note applies to "Header 1" and "Header 2" and only if your basic layout is not "boxed".

The "width" of the top bar and the top navigation was originally based on the "width" of the header. In this regard, an error happened in an earlier update, which meant that the top navigation was always "full-width-boxed". We have now fixed this. After the update, the "width" of the top navigation is again based on the "width" of the header.

In order to enable both options, we have added a separate configuration of the "width" for the "Top navigation" and the "Top bar".

Header: Tab "Header" => Block "Layout" => Section "Basic headers "Header 1" and "Header 2"" => Width

Top bar: Tab "Header" => Block "Top bar" => Section "Basic headers "Header 1" and "Header 2"" => Width

Top navigation: Tab "Header" => Block "Top navigation" => Section "Basic headers "Header 1" and "Header 2"" => Width

Please check the configuration of your "Hero sliders" after the update [Pro Edition]

This note applies to the "Hero slider" in the Pro Edition of ThemeWare® if the breakpoint has been configured.

The functionality of the "none" and "all" breakpoint options of all "Hero slides" has been swapped. [Pro Edition]
The background colour of text (not overlaying the image) in "Hero slides" has its own configuration now. [Pro Edition]

Deprecated CSS classes removed

The outdated CSS classes twt-custom-cms-image-hover-1, twt-custom-cms-image-hover-2 and twt-cms-image-hover-gray-scale have been removed in ThemeWare 2.1.

Summary

That's all the information about the latest ThemeWare® release, but we're far from finished. Look forward to lots of ideas and exciting features from our roadmap.

Stay tuned. 🚀

Best regards, Sebastian and the ThemeWare® Team

Back to overview