ThemeWare® 3.0

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

---

Versions and compatibility

With ThemeWare® 3.0 we have released a new major version of ThemeWare®. Apart from the "breaking changes" in Shopware 6.6, which fundamentally differentiate ThemeWare® 2.x and 3.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® 3.x is required for Shopware 6.6. If you are using Shopware 6.5, ThemeWare® 2.x is the right version for your shop.

• ThemeWare® 3.x is compatible with Shopware 6.6 and not with Shopware 6.5
• ThemeWare® 2.x is compatible with Shopware 6.5 and not with Shopware 6.6

---

ThemeWare® update

The ThemeWare® update is basically not different from previous updates. The only difference is that you need Shopware 6.6 for ThemeWare® 3.x.

If you are performing the ThemeWare® update as part of an update from Shopware 6.5 to Shopware 6.6, please refer to our related news article on "Shopware 6.6".

After the update

Check your shop for JavaScript errors

In Shopware 6.6, the Storefront JavaScript area has been overhauled once again. Many errors in the storefront actually arise due to JavaScript issues. Therefore, check all extensions (plugins/apps) to ensure they are compatible with Shopware 6.6 and function without errors. Only activate the respective extensions once you are certain that both conditions are met.

Check your individual customisations

Changes have also been made in the Twig and SCSS areas in Shopware 6.6. 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® 3.0

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

Highlights

• Compatibility established with Shopware 6.6
• CMS block "Two columns, 3-9 (swapped on phones)" added #FeatureRequest
• CMS block "Two columns, 4-8 (swapped on phones)" added #FeatureRequest
• CMS block "Two columns, 5-7 (swapped on phones)" added #FeatureRequest
• CMS block "Two columns, 7-5 (swapped on phones)" added #FeatureRequest
• CMS block "Two columns, 8-4 (swapped on phones)" added #FeatureRequest
• CMS block "Two columns, 9-3 (swapped on phones)" added #FeatureRequest
• CMS block/element "Custom code (HTML/CSS/JS)" added [Pro Edition] #FeatureRequest
• CMS element "Hero banner" added [Pro Edition]
• CMS element "Parallax banner" added [Pro Edition]
• Configuration for the HTML tag of the subtitle in the "Text teaser" added [Pro Edition]
• Configurations for "CSS classes" added to various CMS elements [Pro Edition]

Changes

• Minor improvements in the theme configuration [Pro Edition]
• Configuration for a parallax effect added to the "Image banner" [Pro Edition] #FeatureRequest
• Shopware 6.6: Enabled asynchronous JavaScript with dynamic imports in the Storefront
• Shopware 6.6: All CMS blocks migrated to Vue 3 [Pro Edition]
• Shopware 6.6: All CMS elements migrated to Vue 3 [Pro Edition]
• Shopware 6.6: Breadcrumb changes in Shopware 6.6 adopted
• Shopware 6.6: Removal of all.js from the Storefront taken into account
• Shopware 6.6: SCSS changes in Shopware 6.6 adopted
• Shopware 6.6: TWIG changes in Shopware 6.6 adopted
• Shopware 6.6: Improved theme configuration updated [Pro Edition]
• Some Twig blocks added or renamed
• Links in CMS elements are now underlined for better readability [Pro Edition] #FeatureRequest
• Deprecated SCSS and Twig code has been removed
• Configuration of all CMS elements improved [Pro Edition]
• Improved styling of the configuration of CMS elements [Pro Edition]
• Preview of some CMS elements improved [Pro Edition]
• Bugfix: CSS column spacing classes in CMS column blocks fixed [Cloud Edition]
• Bugfix: Layout "Inverted" of CMS element "Image & text layered" fixed [Pro Edition]

Notes

• Die "klassische" Produktseite wurde in Shopware 6.6 durch das Standard-CMS-Layout ersetzt.
• Die "klassische" Breadcrumb wurde in Shopware 6.6 durch die CMS-Breadcrumb ersetzt.

---

Highlights

Compatibility established with Shopware 6.6

ThemeWare® 3.0 ist kompatible mit Shopware 6.6. Alle nötigen Änderungen wurden entsprechend umgesetzt und getestet.

CMS block "Two columns, 3-9 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block "Two columns, 4-8 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block "Two columns, 5-7 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block "Two columns, 7-5 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block "Two columns, 8-4 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block "Two columns, 9-3 (swapped on phones)" added #FeatureRequest

A feature request regarding further two-column CMS blocks, whose arrangement is swapped in mobile viewports, has been implemented.

CMS block/element "Custom code (HTML/CSS/JS)" added [Pro Edition] #FeatureRequest

With this new CMS extension of the ThemeWare® Pro Edition you can add "Custom code" to your Shopping Experiences. This extension is aimed at professionals and experienced users and is still in the test phase.

CMS element "Hero banner" added [Pro Edition]

The "Parallax banner" for the ThemeWare® Pro Edition is a new CMS element which is located between the "Image banner" and the new "Hero banner". The "Parallax banner" was created from the improvement suggestion to enable a "parallax effect" in the "Image banner". The "parallax effect" is driven by a newly developed JavaScript plugin and works particularly well with overlaying text.

CMS element "Parallax banner" added [Pro Edition]

Anyone who wants a banner with even more configuration options will be impressed with the new "Hero banner" in the Pro Edition. This offers even more design options and is extremely configurable, similar to the "Call-To-Action" teaser.

Configuration for the HTML tag of the subtitle in the "Text teaser" added [Pro-Edition]

The HTML tag or the corresponding CSS class can now also be configured for the "Subtitle" in the "Text teaser".

Configurations for "CSS classes" added to various CMS elements [Pro Edition]

As part of the process of streamlining the CMS configuration of all CMS elements, configuration fields for "CSS classes" have been added to different CMS elements.

---

Changes in detail

Minor improvements in the theme configuration [Pro Edition]

As with every major update, ThemeWare® theme 3.0 also includes improvements to the theme configuration.

Configuration for a parallax effect added to the "Image banner" [Pro Edition] #FeatureRequest

The parallax effect is one of the most popular effects. This effect creates the impression of depth. With the new "Parallax banner", we have created a new JavaScript plugin for this. You can also activate this effect in the "Image banner".

Shopware 6.6: Enabled asynchronous JavaScript with dynamic imports in the Storefront

By introducing asynchronous loading of JavaScript and enabling dynamic imports, the performance of the storefront in Shopware 6.6 is to be increased. The ThemeWare® JavaScript plugins have been adjusted accordingly.

Shopware 6.6: All CMS blocks migrated to Vue 3 [Pro Edition]

All extensions that modify the Administration via the plugin system must be updated, as Shopware is switching from Vue.js 2 to Vue.js 3 with version 6.6. This affects, among other things, the CMS blocks of the ThemeWare® Pro Edition.

Shopware 6.6: All CMS elements migrated to Vue 3 [Pro Edition]

All extensions that modify the Administration via the plugin system must be updated, as Shopware is switching from Vue.js 2 to Vue.js 3 with version 6.6. This affects, among other things, the CMS elements of the ThemeWare® Pro Edition.

Shopware 6.6: Breadcrumb changes in Shopware 6.6 adopted

The "classic" breadcrumb has been removed in Shopware 6.6. The CMS breadcrumb is now used on all pages.

Shopware 6.6: Removal of all.js from the Storefront taken into account

Instead of importing all JavaScript plugins synchronously, Shopware 6.6 offers an asynchronous approach. The ThemeWare® JavaScript plugin structure has been adapted accordingly.

Shopware 6.6: SCSS changes in Shopware 6.6 adopted

SCSS changes in Shopware 6.6 have been taken into account in ThemeWare® 3.0.

Shopware 6.6: TWIG changes in Shopware 6.6 adopted

Twig changes in Shopware 6.6 have been taken into account in ThemeWare® 3.0.

Shopware 6.6: Improved theme configuration updated [Pro Edition]

Adjustments in the Administration and theme configuration have been migrated from Vue.js 2 to Vue.js 3. This affects the ThemeWare® Pro Edition.

Some Twig blocks added or renamed

Twig blocks have been added to some template files, for example icons. The following Twig blocks have also been renamed:

• views\storefront\themeware\footer-elements\twt-payment.html.twig
  • twt_layout_footer_payment_logos > twt_layout_footer_payment_icons
• views\storefront\themeware\footer-elements\twt-paymentshipping.html.twig
  • twt_layout_footer_paymentshipping_logos > twt_layout_footer_paymentshipping_icons
• views\storefront\themeware\footer-elements\twt-shipping.html.twig
  • twt_layout_footer_shipping_logos > twt_layout_footer_shipping_icons

Links in CMS elements are now underlined for better readability [Pro Edition] #FeatureRequest

Links in texts of some CMS elements are now underlined for better recognisability.

Deprecated SCSS and Twig code has been removed

With ThemeWare® 3.0, deprecated files and outdated SCSS and Twig code have been removed. In addition, new "dreprecated" notes have been added in various places with regard to Shopware 6.7.

Configuration of all CMS elements improved [Pro Edition]

The configuration of all CMS elements has been improved. This concerns the structure, grouping and arrangement of configuration fields, new and updated help texts and some new configuration fields to unify various elements.

Improved styling of the configuration of CMS elements [Pro Edition]

The representation of the configuration of all CMS elements of the Pro Edition has been overhauled with regard to clarity and compactness, among other things.

Preview of some CMS elements improved [Pro Edition]

The preview of some CMS elements in the Shopping Experience editor of Shopware has been improved. This includes the representation of links in texts.

Bugfix: CSS column spacing classes in CMS column blocks fixed [Cloud Edition]

The storefront template files of the CMS column blocks have been corrected so that the CSS column spacing classes work again.

Bugfix: Layout "Inverted" of CMS element "Image & text layered" fixed [Pro Edition]

An issue in the CMS element "Image & text layered" has been corrected so that the "Inverted" layout works correctly.

---

Notes

The "classic" product page has been replaced by the default CMS layout in Shopware 6.6.

The "classic" (non-CMS) product page has been abolished in Shopware 6.6. The default CMS layout is now always used. Corresponding changes were taken into account in ThemeWare® 3.0.

The "classic" breadcrumb has been replaced by the CMS breadcrumb in Shopware 6.6.

The "classic" (non-CMS) breadcrumb has been abolished in Shopware 6.6. The CMS breadcrumb is now used on all pages. Corresponding changes were taken into account in ThemeWare® 3.0.

---

Summary

That's it for the changes in ThemeWare® 3.0 for Shopware 6.6. The migration for Shopware 6.6 was a lot of work over the last few weeks with changes to over 400 files.

Best regards, Sebastian and the ThemeWare® Team