ThemeWare® 3.1.0

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

Highlights

• Configuration for the width of the "Flyout search" added
• Configuration for a more compact layout of the "Product boxes" added
• Configuration "CSS class" for the button in the "Call-To-Action-Slide" added [Pro Edition]
• Configuration "nofollow" added to the "Announcement banner" #FeatureRequest
• Configuration "nofollow" added to the "Awards, seals or certificates" widget #FeatureRequest
• Configuration "nofollow" added to the widget "Communities or social media" #FeatureRequest
• Configuration "Text shadow" added to the "Call-To-Action" [Pro Edition]
• Configuration "Text shadow" added to the "Call-To-Action slide" [Pro Edition]
• Configuration "Text shadow" added to the "Text slide" [Pro Edition]
• Configuration "Text alignment" added to the "Call-To-Action slide" [Pro Edition]
• Configuration "Text alignment" added to the "Text slide" [Pro Edition]
• Configuration for deactivating the link for images in the "Awards, seals or certificates" widget added #FeatureRequest
• Configuration for disabling the CMS styling on "Account" pages added
• Configuration for disabling the CMS styling on "Ckecout" pages added
• Configuration for disabling the CMS styling on "Login" pages added
• Various improvements in the field of pagespeed and accessibility
• Additional snippets added for URLs of links in the "Awards, seals or certificates" widget"

Changes

• Compatibility with Shopware 6.6.1.0 improved
• CMS block/element "Custom code (HTML/CSS/JS)" improved [Pro Edition]
• Styling of different buttons improved
• Styling of different elements of the "Wishlist" improved
• The "Discount badge" now uses local decimal separators #FeatureRequest
• The option "none" of the "HTML tag" configuration no longer adds any styling [Pro Edition] #FeatureRequest
• Minor template improvements in various CMS elements [Pro Edition]
• Minor improvements in the theme configuration
• Added lazy loading for images the "Awards, seals or certificates" widget
• Added lazy loading for images in CMS elements [Pro Edition]
• Added lazy loading for payment and shipping logos
• Lighthouse improvements in the footer
• Lighthouse improvements in the "Hero slider" [Pro Edition]
• New "Default" option added to "HTML tag" configuration [Pro Edition]
• Position of payment/shipping methods is now considered in the widgets #FeatureRequest
• Responsive representation of images in the "Awards, seals or certificates" widget improved
• Template files from the "Awards, seals or certificates" widget updated
• Snippets in the "Awards, seals or certificates" widget updated
• Twig "string quotation" reworked
• Improved URL encoding of the "Further products" link in the manufacturer tab
• Improvements (HTML and CSS) to the headings in various CMS elements [Pro]
• Preview of the CMS element "Image & text layered" improved [Pro Edition]
• Bugfix: "Sharing links", "Benefits" and "Payment logos" in the buybox are now only displayed on product pages
• Bugfix: Button of the "Call-To-Action" fixed [Pro Edition]
• Bugfix: Representation of the manufacturer in product boxes has been fixed
• Bugfix: Configuration of the "Input search" improved
• Bugfix: Configuration of the "Hero banner" fixed [Pro Edition]
• Bugfix: SCSS error in the storefront watcher fixed
• Bugfix: Some icons for Firefox browsers improved

Notes

• Please now use the new "title" snippets in the "Awards, seals or certificate" widget
• The link from the "Announcement banner" is now "nofollow"
• The "Flyout search" has new configurations for the width
• Links of the images in the "Awards, seals or certificates" widget are now "nofollow"
• Links of the logos in the "Communities or Social Media" widget are now "nofollow"
• Check your template customisations

---

Highlights

Configuration for the width of the "Flyout search" added

The width of the "Flyout search" was previously based on the general configuration of the "Input search". With this update, the "Flyout search" has its own configuration.

You can now configure whether the search is displayed "Full-width" or "Full-width-boxed". Within this general configuration, you can also define a specific "maximum width" for the input field.

Configuration for a more compact layout of the "Product boxes" added

With ThemeWare® 3.1 we have added a "beta" configuration with which a compact layout for product boxes can be selected.

In this layout, various elements of the product boxes are "reset", so this feature may not harmonise with all third-party extensions. For this reason, the feature is still in a beta/test phase. But feel free to test it – if you like.

Configuration "CSS class" for the button in the "Call-To-Action slide" added [Pro Edition]

A configuration for an individual "CSS class" of the button in the "Call-To-Action slide" has been added.

Configuration "nofollow" added to the "Announcement banner" #FeatureRequest

Feature requests regarding a "nofollow" configuration for certain elements with external links have been realised. The link from the "Announcement banner" is now set to "nofollow" by default.

Configuration "nofollow" added to the "Awards, seals or certificates" widget #FeatureRequest

Feature requests regarding a "nofollow" configuration for certain elements with external links have been realised. Links of "Awards, seals or certificates" are now set to "nofollow" by default.

Configuration "nofollow" added to the widget "Communities or social media" #FeatureRequest

Feature requests regarding a "nofollow" configuration for certain elements with external links have been realised. Links of the "Communities or Social Media" are now set to "nofollow" by default.

Configuration "Text shadow" added to the "Call-To-Action" [Pro Edition]

A configuration for a "Text shadow" has been added to the "Call-To-Action".

Configuration "Text shadow" added to the "Call-To-Action slide" [Pro Edition]

A configuration for a "Text shadow" has been added to the "Call-To-Action slide".

Configuration "Text shadow" added to the "Text slide" [Pro Edition]

A configuration for a "Text shadow" has been added to the "Text slide".

Configuration "Text alignment" added to the "Call-To-Action slide" [Pro Edition]

A configuration for a "Text alignment" has been added to the "Call-To-Action slide".

Configuration "Text alignment" added to the "Text slide" [Pro Edition]

A configuration for a "Text alignment" has been added to the "Text slide".

Configuration for deactivating the link for images in the "Awards, seals or certificates" widget added #FeatureRequest

Since URL fields in the Shopware 6 theme manager can not be emptied, a separate configuration for deactivating the link has been added for each image in the "Awards, seals or certificates" widget.

Configuration for disabling the CMS styling on "Account" pages added

A configuration for deactivating CMS styling on "Account" pages has been added.

Configuration for disabling the CMS styling on "Ckecout" pages added

A configuration for deactivating CMS styling on "Ckecout" pages has been added.

Configuration for disabling the CMS styling on "Login" pages added

A configuration for deactivating CMS styling on "Login" pages has been added.

Additional snippets added for URLs of links in the "Awards, seals or certificates" widget"

As an alternative option to the URL configuration for the images in the "Awards, seals or certificates" widget, a separate URL snippet has been added for each image. You can now select for each image whether the URL configuration or the snippet should be used.

---

Changes in detail

Compatibility with Shopware 6.6.1.0 improved

With the 3.1.0 update, the compatibility of ThemeWare® with Shopware 6.6.1.0 has been improved. This concerns the new "product video" function, changes to the top bar and various template changes.

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

With this update, the CMS extension "Custom code (HTML/CSS/JS)" has been improved. This affects the functionality and display in the administration.

Styling of different buttons improved

The styling of some buttons (e.g. details button in product boxes) has been improved.

Styling of different elements of the "Wishlist" improved

The styling of some elements on the "Wishlist" has been improved.

The "Discount badge" now uses local decimal separators #FeatureRequest

The "Discount badge" now uses country-specific decimal separators.

The option "none" of the "HTML tag" configuration no longer adds any styling [Pro Edition] #FeatureRequest

An feature request regarding the "none" option of the "HTML tag" configuration has been implemented with this update. The "none" option now no longer adds formatting to the corresponding HTML element. This change affects the "Text teaser", the "Text teaser (decorated)" and the "Parallax banner".

If you would like to continue using the default styling in these elements, use the new "Default" option in the "HTML tag" configuration in the corresponding CMS elements.

If you do not want to edit your elements, you can also use the default styling with the following CSS code:

// Text-Teaser
.twt-text-teaser-title { font-size: 20px !important; }

// Text-Teaser (verziert)
.twt-text-teaser-decorated-title { font-size: 20px !important; }

// Parallax-Banner
.twt-parallax-banner-title { font-size: 20px !important; }

Minor template improvements in various CMS elements [Pro Edition]

We have made some minor template improvements in the storefront templates of various CMS elements. However, these are not relevant for any template customisations.

Minor improvements in the theme configuration

As in previous updates, there are also improvements to the theme configuration in this update.

Added lazy loading for images the "Awards, seals or certificates" widget

Attribute loading="lazy" added to the images in the "Awards, seals or certificates" widget.

Added lazy loading for images in CMS elements [Pro Edition]

Attribute loading="lazy" added to images in various CMS elements.

Added lazy loading for payment and shipping logos

Attribute loading="lazy" added for shipping and payment logos in the corresponding widgets.

Lighthouse improvements in the footer

Attribute role="listitem" added to the various footer elements.

Lighthouse improvements in the "Hero slider" [Pro Edition]

Attribute aria-label added to the arrows of the hero slider.

New "Default" option added to "HTML tag" configuration [Pro Edition]

As mentioned above, the "none" option of the "HTML tag" configuration no longer adds any formatting to the corresponding HTML element. You can now apply the "old" default formatting of the "none" option via the "default" option.

Position of payment/shipping methods is now considered in the widgets #FeatureRequest

The configured position of the payment/shipping methods is now taken into account for the logos in the corresponding widgets. You can change the position setting in the Shopware settings.

Responsive representation of images in the "Awards, seals or certificates" widget improved

The images in the "Awards, seals or certificates" widget adjust their size better in smaller viewports.

Images without a link are now enclosed in your span container for the sake of consistency.

Template files from the "Awards, seals or certificates" widget updated

As part of the new configuration options in the "Awards, seals or certificates" widget, corresponding template changes have been made.

Snippets in the "Awards, seals or certificates" widget updated

In the "Awards, seals or certificates" widget, there are now alternative snippets for URLs in addition to the URLs in the theme configuration. In addition, the snippets of the title attribute of the images have been replaced by new snippets.

Twig "string quotation" reworked

In Shopware 6.6.1.0, the string quotation has been revised in various Twig files. ThemeWare® has also been adapted in this context.

Improved URL encoding of the "Further products" link in the manufacturer tab

Blanks in the "More products" link of the manufacturer tab should now be better encoded.

Improvements (HTML and CSS) to the headings in various CMS elements [Pro]

In this update, headlines/titles in various CMS elements have been improved. The HTML structure has been standardised (headings now have span elements) and unnecessary CSS styles have been removed.

Preview of the CMS element "Image & text layered" improved [Pro Edition]

The preview of the "Inverted" layout of the CMS element "Image & text layered" in the Shopping Experience editor has been improved.

Bugfix: "Sharing links", "Benefits" and "Payment logos" in the buybox are now only displayed on product pages

A bug has been fixed which caused the "Sharing links", "Benefits" and "Payment logos" in the buybox to also be displayed on landing pages.

Bugfix: Button of the "Call-To-Action" fixed [Pro Edition]

An issue in the URL of the button in the "Call-To-Action" CMS element has been fixed.

Bugfix: Representation of the manufacturer in product boxes has been fixed

The representation of the manufacturer in product boxes has been fixed. A placeholder is now displayed if a product has no manufacturer so that the product boxes have a consistent size.

Bugfix: Configuration of the "Input search" improved

In some rare cases, the configuration of the width of the search input field in the header did not work correctly. This should now work better with this update.

Bugfix: Configuration of the "Hero banner" fixed [Pro Edition]

A bug has been fixed which prevented the configuration of the new "Hero Banner" from being opened.

Bugfix: SCSS error in the storefront watcher fixed

An SCSS bug in the storefront watcher has been fixed.

Bugfix: Some icons for Firefox browsers improved

Some icons were slightly shifted in the Firefox browser. This has been optimised in this update.

---

Notes

Please now use the new "title" snippets in the "Awards, seals or certificate" widget

There are new snippets for the title attribute of the images in the "Awards, seals or certificates" widget. The old snippets should still be displayed temporarily, please switch to the new snippets as soon as possible.

• twt.widget.awards.customImages.title1 => twt.widget.awards.customImage1.title
• twt.widget.awards.customImages.title2 => twt.widget.awards.customImage2.title
• twt.widget.awards.customImages.title3 => twt.widget.awards.customImage3.title
• twt.widget.awards.customImages.title4 => twt.widget.awards.customImage4.title
• twt.widget.awards.customImages.title5 => twt.widget.awards.customImage5.title
• twt.widget.awards.customImages.title6 => twt.widget.awards.customImage6.title

The link from the "Announcement banner" is now "nofollow"

The link from the "Announcement banner" is now provided with "nofollow" by default. You can change this again with the appropriate configuration.

• Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration" => Link relation "nofollow"

The "Flyout search" has new configurations for the width

If you are using the "Flyout search" layout type in the header, please check the new configuration. (see above)

Links of the images in the "Awards, seals or certificates" widget are now "nofollow"

The links of the images in the "Awards, seals or certificates" widget are now provided with "nofollow" by default. You can change this again with the appropriate configuration.

• Tab "Widgets" => Block "Awards, seals or certificates" => Section "Custom image 1" => Link relation "nofollow"
• Tab "Widgets" => Block "Awards, seals or certificates" => Section "Custom image 2" => Link relation "nofollow"
• etc.

Links of the logos in the "Communities or Social Media" widget are now "nofollow"

The links of the logos in the "Communities or Social Media" widget are now provided with "nofollow" by default. You can change this again with the appropriate configuration.

• Tab "Widgets" => Block "Communities or social media" => Section "Basic configuration" => Link relation "nofollow"

Check your template customisations

As you have already read above, virtually all template files have been adjusted slightly. Worth mentioning here are the base.html.twig (views\storefront), the storefront files of the CMS elements (views\storefront\element), the footer elements (views\storefront\themeware\footer-elements) and the widgets (views\storefront\themeware\widgets).

Major changes affect the following files:

• views\storefront\component\product\card\box-image.html.twig
• views\storefront\component\product\card\box-minimal.html.twig
• views\storefront\component\product\card\box-standard.html.twig
• views\storefront\element\cms-element-twt-text-teaser-decorated.html.twig
• views\storefront\layout\header\top-bar.html.twig
• views\storefront\themeware\includes\twt-announcement-banner-include.html.twig
• views\storefront\themeware\widgets\twt-awards-include.html.twig
• views\storefront\themeware\widgets\twt-communities-include.html.twig

---

That's it for the changes in ThemeWare® 3.1 for Shopware 6.6.1.

Best regards, Sebastian and the ThemeWare® Team