ThemeWare® 4.0

In this article you will find information about changes in ThemeWare® 4.0. You can find more information about Shopware 6.7 in a separate article.

---

Versions and compatibility

With ThemeWare® 4.0 we have released a new major version of ThemeWare®. Apart from the "breaking changes" in Shopware 6.7, which fundamentally differentiate ThemeWare® 3.x and 4.x, we also hope to simplify the assignment of compatible ThemeWare® and Shopware versions:

ThemeWare® for Shopware 6

• ThemeWare® 1.x for Shopware 6.4.x
• ThemeWare® 2.x for Shopware 6.5.x
• ThemeWare® 3.x for Shopware 6.6.x
• ThemeWare® 4.x for Shopware 6.7.x

ThemeWare® 4.x is required for Shopware 6.7. If you are using Shopware 6.6, ThemeWare® 3.x is the right version for your shop.

• ThemeWare® 4.x is compatible with Shopware 6.7 and not with Shopware 6.6
• ThemeWare® 3.x is compatible with Shopware 6.6 and not with Shopware 6.7

---

ThemeWare® update

The ThemeWare® update differs from "normal" updates in that there is no theme version that is compatible with both the old and new Shopware versions.

If you want to update ThemeWare® to version 4.x, you must update Shopware to version 6.7. Please use our step-by-step instructions "Shopware Updates and ThemeWare®".

After the update

Check your shop for JavaScript errors

Incompatible third-party extensions may cause the storefront to malfunction.

Check your individual customisations

Changes have also been made in the Twig and SCSS areas in Shopware 6.7. Make sure to incorporate any changes into your customizations as well.

If you use individual HTML/CSS code (e.g. in Shopping Experiences), also check this for any changes.

Steps for troubleshooting and resolving errors

1. Clear the Shopware cache as well as the browser cache completely.
2. Update all extensions in your shop to the latest or a compatible version.
3. Check whether the error also occurs in the Shopware default theme.
4. Deactivate all extensions in your shop to check whether they are causing errors.
5. Deactivate all customisations to check whether they are causing errors.
6. Deactivate the ThemeWare® "Expert mode" to check whether your customised code causes errors.
7. Remove other individual code (HTML, CSS etc.) to check whether it causes errors.

---

ThemeWare® 4.0

ThemeWare® 4.0 for Shopware 6.7 is now available! 🎉 The new release includes the following changes:

Highlights

• Compatibility established with Shopware 6.7

Changes

• New theme extension "Flyout" added
• Spacing of nav items in the "Top navigation" optimised to improve accessibility
• Announcement banner optimised to improve accessibility
• CMS element "Gallery (Grid)" optimised to improve accessibility [Pro Edition]
• CMS element "Hero slider" optimised to improve accessibility [Pro Edition]
• CMS element "Product description & reviews (Accordion)" optimised to improve accessibility [Pro Edition]
• The "focus visibility" of some elements has been improved for better accessibility
• The "Fullscreen search" has been optimised to improve accessibility
• Some configuration fields have been reworked
• Some deprecated configurations deleted
• Floating widget optimised to improve accessibility
• Configuration for the "automatic transition" of the "Hero slider" added [Pro Edition]
• Configuration for the "Skip element" link added
• Configuration for the "Skip-To-Content" bar added
• Configuration added to underline certain links to improve accessibility
• Play/pause button added to the hero slider [Pro Edition]
• Shopware 6.7: Compatibility of the beta feature "Dropdown navigation" established
• Shopware 6.7: Compatibility of the beta feature "List view" established [Pro Edition]
• Shopware 6.7: Compatibility of the CMS configuration established [Pro Edition]
• Shopware 6.7: Compatibility of the "CMS breadcrumb" established [Pro Edition]
• Shopware 6.7: Compatibility of the "Footer columns" established
• Shopware 6.7: Compatibility of the "Hero section" established
• Shopware 6.7: Compatibility of the "Newsletter widget" established
• Shopware 6.7: Compatibility of the "Product box" customisations established
• Shopware 6.7: Compatibility of the "Top navigation" established
• Shopware 6.7: Compatibility of "Listing subcategories" established [Pro Edition]
• Shopware 6.7: Compatibility of "Payment provider logos" on product pages established [Pro Edition]
• Shopware 6.7: Compatibility of the "CMS styling" established
• Shopware 6.7: Compatibility of the "Properties tab" established
• Shopware 6.7: Compatibility of the "Shopping Experience Header" established
• Shopware 6.7: Compatibility of the "Gallery (Grid)" established [Pro Edition]
• Shopware 6.7: Compatibility of the "Icon for external links" established
• Shopware 6.7: Feature "Payment provider logos" removed from product pages [Cloud Edition]
• Bugfix: Headline "Downloads" in the "Description" tab only displayed if downloads are available

Notes

• see below

---

Highlights

Compatibility established with Shopware 6.7

With the update to Shopware 6.7, extensive changes have been made to the storefront and its underlying architecture.

ThemeWare® 4.0 is compatible with Shopware 6.7. All necessary adjustments and changes have been implemented accordingly.

---

Changes in detail

New theme extension "Flyout" added

Shopware has reworked the top navigation to improve compatibility with Bootstrap and accessibility. The flyout has been integrated directly into the top navigation. However, this has made the new standard flyout significantly narrower.

We have reconstructed the previous look for you: You can now choose whether you want to use the new standard flyout from Shopware or the "ThemeWare® Flyout’" To make the transition as seamless as possible for you, we have activated the "ThemeWare® Flyout" by default.

Spacing of nav items in the "Top navigation" optimised to improve accessibility

The spacing between menu items in the top navigation has been reworked to enable a more consistent and clearer focus styling.

This affects the following configuration field:

• Tab "Header" => Block "Top navigation" => Section "Basic configuration" => Padding (Nav items)

Announcement banner optimised to improve accessibility

Various optimisations have been made to the announcement banner to improve accessibility. These relate in particular to accessibility for screen readers and keyboard users.

New snippets:

• twt.extension.announcementBanner.ariaLabel
• twt.extension.announcementBanner.closeButton.ariaLabel

CMS element "Gallery (Grid)" optimised to improve accessibility [Pro Edition]

We have reworked the "Gallery (Grid)" to improve accessibility, particularly for users with screen readers or keyboard controls.

CMS element "Hero slider" optimised to improve accessibility [Pro Edition]

Various adjustments have been made to the "Hero slider" to improve accessibility. These relate in particular to accessibility for screen readers and keyboard users.

In addition, "Automatic transition" (autoplay) of the slider has been disabled by default to make the storefront more accessible.

If you still want to enable autoplay, you can do so via a new setting in the theme configuration (see below).

New snippets:

• twt.cms.heroSlider.next
• twt.cms.heroSlider.previous
• twt.cms.heroSlider.skipSlider
• twt.cms.heroSlider.slideLabel
• twt.cms.heroSlider.sliderDotLabel

CMS element "Product description & reviews (Accordion)" optimised to improve accessibility [Pro Edition]

To improve accessibility, various adjustments have been made to the CMS element "Product description & reviews (Accordion)". These relate in particular to accessibility for screen readers and keyboard users.

New snippets:

• twt.extension.floatingWidget.ariaLabel.open
• twt.extension.floatingWidget.ariaLabel.close

The "focus visibility" of some elements has been improved for better accessibility

The visibility of the focus state ("focus visibility") has been optimised for various elements (buttons, links, tabs) to further improve accessibility, especially for keyboard users.

The "Fullscreen search" has been optimised to improve accessibility

The accessibility of the "Fullscreen search" for screen readers and keyboard navigation has been improved.

Some configuration fields have been reworked

In the Shopware 6 Theme Manager, the value 0 could not originally be saved in certain configuration fields. For this reason, we had limited these fields to a minimum value of 1 and also integrated an SCSS feature that output saved 1 values as 0.

Shopware has meanwhile fixed the underlying error, so that the affected configuration fields can now correctly save the value 0 again. We are therefore converting our themes step by step: A total of around 80 configuration fields are affected, of which we are adapting the first 15 in the current release.

Please check your configuration and manually replace any existing 1 entries with 0 in the following affected fields – automatic SCSS conversion will no longer take effect there.

• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Grundlayout "boxed")" => Außenabstand oben/unten
  • Technischer Name: twt-container-layout-margin-top-bottom
  • Electric-Theme: Die Konfiguration ist nun '0' statt '1'
  • Global-Theme: Die Konfiguration ist nun '0' statt '1'
  • Kids-Theme: Die Konfiguration ist nun '0' statt '1'
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Äußerer Abstand links/rechts @Phone (<576px)
  • Technischer Name: twt-container-padding-left-right
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Außenabstand oben
  • Technischer Name: twt-container-main-margin-top
  • Global-Theme: Die Konfiguration ist nun '0' statt '1'
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Außenabstand unten
  • Technischer Name: twt-container-main-margin-bottom
  • Global-Theme: Die Konfiguration ist nun '0' statt '1'
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Innenabstand @Phone (<576px)
  • Technischer Name: twt-container-main-padding-phone-xs
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Innenabstand @Phone (<576px)
  • Technischer Name: twt-container-main-padding-phone
• Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)" => Innenabstand @Tablet (≥768px)
  • Technischer Name: twt-container-main-padding-tablet
• Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Außenabstand oben @Desktop (≥992px)
  • Technischer Name: twt-header-margin-top
  • Hinweis: Die Konfiguration ist nun '0' statt '1'
• Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Innenabstand oben
  • Technischer Name: twt-header-padding-top
  • Bio-Theme: Die Konfiguration ist nun '0' statt '1'
• Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Innenabstand unten
  • Technischer Name: twt-header-padding-bottom
• Tab "Header" => Bereich "Logo" => Abschnitt "Bild-Logo" => Außenabstand oben @Desktop (≥992px)
  • Technischer Name: twt-header-logo-margin-top
  • Hinweis: Die Konfiguration ist nun '0' statt '1'
• Tab "Footer" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Außenabstand oben
  • Technischer Name: twt-footer-margin-top
• Tab "Footer" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Innenabstand oben
  • Technischer Name: twt-footer-padding-top
  • Hinweis: Die Konfiguration ist nun '0' statt '1'
• Tab "Footer" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Innenabstand unten
  • Technischer Name: twt-footer-padding-bottom
  • Hinweis: Die Konfiguration ist nun '0' statt '1'
• Tab "Footer" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Innenabstand links/rechts
  • Technischer Name: twt-footer-padding
  • Hinweis: Die Konfiguration ist nun '0' statt '1'

Some deprecated configurations deleted

Some deprecated and unused configuration fields have been removed from the theme configuration.

Floating widget optimised to improve accessibility

The "Floating widget" has been reworked to improve accessibility, especially for screen reader and keyboard users.

New snippets:

• twt.extension.floatingWidget.ariaLabel
• twt.extension.floatingWidget.closeAriaLabel
• twt.extension.floatingWidget.linkAriaLabel
• twt.extension.floatingWidget.openAriaLabel

Configuration for the "automatic transition" of the "Hero slider" added [Pro Edition]

Due to accessibility concerns, the "automatic transition" feature has been disabled in the "Hero slider".

If you still want to use "Autoplay", you can activate it via a new theme configuration.

Configuration for the "Skip element" link added

You can now customise the colour of the "Skip element" link via a new theme configuration.

Configuration for the "Skip-To-Content" bar added

You can now customise the colour of the links in the "Skipt-To-Conten" bar via a new theme configuration.

Configuration added to underline certain links to improve accessibility

Play/pause button added to the hero slider [Pro Edition]

For accessibility reasons, we recommend that you do not activate the "autoplay" feature for the "Hero slider".

If you still enable autoplay, the "Hero slider" will have a play/pause button that users can use to control playback.

New snippets:

• twt.cms.heroSlider.pauseAriaLabel
• twt.cms.heroSlider.playAriaLabel

Shopware 6.7: Compatibility of the beta feature "Dropdown navigation" established

The beta feature "Dropdown navigation" has been completely revamped and is now compatible with Shopware 6.7. Accessibility improvements from the standard theme have also been incorporated.

Shopware 6.7: Compatibility of the beta funktion "List view" established [Pro Edition]

The beta feature "List view" is now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of the CMS configuration established [Pro Edition]

The CMS configuration is now compatible with Shopware 6.7. Outdated Shopware components have been migrated to the new MeteorUI components.

Shopware 6.7: Compatibility of the "CMS breadcrumb" established [Pro Edition]

Shopware template variables have been updated in the "CMS breadcrumb". The "CMS breadcrumb" is now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of the "Footer columns" established

The footer columns have been reworked to ensure compatibility with Shopware 6.7. Accessibility improvements from the standard theme have also been incorporated.

Shopware 6.7: Compatibility of the "Hero section" established

Shopware template variables have been updated in the "Hero section". The "Hero section" is now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of the "Product box" customisations established

The adjustments to the "Product box" have been reworked to ensure compatibility with Shopware 6.7.

Shopware 6.7: Compatibility of the "Top navigation" established

The HTML structure, templates and CSS classes of the "Top navigation" have been adapted to ensure compatibility with Shopware 6.7. The new ESI caching has also been taken into account and the styling of active menu items has been re-enabled.

Shopware 6.7: Compatibility of "Listing subcategories" established [Pro Edition]

Shopware template variables have been updated in the theme extension "Listing subcategories". The "Listing subcategories" are now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of "Payment provider logos" on product pages established [Pro Edition]

The compatibility of "Payment provider logos" on product pages has been established for Shopware 6.7. An additional PHP subscriber ensures that payment methods are displayed correctly on the product detail page again.

Shopware 6.7: Compatibility of the "CMS styling" established

The changes made by Shopware to the styling of CMS blocks in version 6.7 have been taken into account. The "CMS styling" of ThemeWare® is now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of the "Properties tab" established

Shopware template variables from the "Properties" tab have been updated. The tab is now compatible with Shopware 6.7.

Shopware 6.7: Compatibility of the "Shopping Experience Header" established

The ThemeWare® "Shopping Experience Header" now takes into account the new top navigation, the new standard flyout and the ThemeWare® flyout.

Shopware 6.7: Compatibility of the "Gallery (Grid)" established [Pro Edition]

The "Gallery (Grid)" has been reworked to ensure compatibility with Shopware 6.7. Accessibility improvements have also been made.

Shopware 6.7: Compatibility of the "Icon for external links" established

The icon for external links in the flyout of the top navigation is now also displayed in Shopware 6.7. In addition, the icon is now also displayed in the top navigation itself.

Shopware 6.7: Compatibility of the "Newsletter widget" established

The "Newsletter widget" has been reworked to ensure compatibility with Shopware 6.7.\ Accessibility improvements from the standard theme have also been incorporated.

Shopware 6.7: Feature "Payment provider logos" removed from product pages [Cloud Edition]

With the update to Shopware 6.7, the available payment methods are unfortunately no longer available in the product detail page template. This feature has been removed from the Cloud Edition and will not be available there until further notice.

Bugfix: Headline "Downloads" in the "Description" tab only displayed if downloads are available

The headline "Downloads" in the "Description" tab is now only displayed if downloads are actually available.

---

Notes

With Shopware 6.7, the structure of global template variables has been revised. As a result, certain variables are no longer readily available in many templates.

A concrete example concerns the payment methods on the product detail page:

The available payment methods can no longer be displayed directly in the product page template.

What does this mean for the cloud?

In cloud environments, direct access to such information via the template is currently not possible. Although there are theoretical ways to achieve this via the Shopware API and proprietary services (e.g. via platform.sh), such solutions require additional infrastructure.

We are reviewing possible solutions for future releases.

Basic configuration

To ensure that ThemeWare® is accessible by default, we have adjusted some colour values. An overview of the changes can be found in the ThemeWare® Manual:

• ThemeWare® 4.0 – Neue Kontraste für mehr Barrierefreiheit

Accessibility

The ACCESSIBILITY_TWEAKS feature flag is activated by default in Shopware 6.7 and no longer needs to be set manually.

ThemeWare® 4.0 marks the starting point for a low-barrier and more accessible storefront in Shopware 6.7. This release already brings numerous improvements in terms of accessibility - further optimisations will follow with upcoming updates so that your theme is as accessible as possible by the deadline.

Top navigation / flyout

Shopware has completely redesigned the top navigation for better Bootstrap compatibility and improved accessibility. A new, narrower flyout has also been introduced.

In addition, you can alternatively activate the new "ThemeWare® Flyout", which retains the classic look.

Service menu

The service menu has been removed from the header. In addition, the corresponding template variables are unfortunately no longer available in the header block.

Payment logos on the product detail page

Unfortunately, the template variables for payment methods are no longer available on the product detail page in Shopware 6.7.

Hero slider [Pro Edition]

For accessibility reasons, autoplay has been disabled by default in the hero slider.

We strongly advise against re-enabling autoplay, as this may restrict accessibility for many users.

If you still want to enable this feature, you can do so via a new setting in the theme configuration.

When autoplay is enabled, a "Play/Pause" button is automatically displayed, allowing users to control playback manually.

---

Summary

That concludes the changes in ThemeWare® 4.0 for Shopware 6.7. If we have overlooked anything, we will update this post accordingly.

We strongly recommend testing the release or Shopware 6.7 thoroughly in a test system before using it.

The migration to Shopware 6.7 involved a lot of work and numerous adjustments to over 400 files. We have tested the themes extensively, but representation errors may still occur in certain constellations.

If you find a discrepancy, please run the ThemeWare® Debugging assistent – together we will find a solution.

You are welcome to send us feedback and feature requests at any time via our Service Portal.

Best regards, Sebastian and the ThemeWare® Team