Navigation
Portal for Shopware 5

ThemeWare® 2.2.0

Published: 16. January, 2024


ThemeWare® 2.2.0

ThemeWare® 2.2.0 is now available! 🎉 The new release includes the following changes:

Highlights

  • CMS block/element "Round teaser" added [Pro Edition]
  • CMS block/element "Image & text layered" added [Pro Edition]
  • CMS block "Six columns (custom)" added [Pro Edition]
  • Configuration for the background colour of the "Countdown banner" added [Pro Edition]
  • Configuration for the background colour of the "Countdown banner (compact)" added [Pro Edition]
  • Configuration for the horizontal alignment in the "Countdown banner (compact)" added [Pro Edition]
  • Configuration for the horizontal image positioning in the "Call-To-Action" added [Pro Edition]
  • Configuration for the maximum width of the "Image teaser" added [Pro Edition]
  • Configuration for the maximum width in the "Countdown banner (compact)" added [Pro Edition]

Changes

  • CSS classes for column spacing in CMS blocks reworked
  • Presentation in display mode "Standard" of the "Image teaser" improved [Pro Edition]
  • Horizontal alignment of the "Image Teaser" improved [Pro Edition]
  • Storefront template files of all CMS elements updated [Pro Edition]
  • Variables of the "Hover box" improved [Pro Edition]
  • Preview of the "Grid blocks" improved [Pro Edition]
  • Preview of CMS teaser elements enhanced [Pro Edition]
  • Bugfix: Duplicate title attribute in the "My account" button fixed
  • Bugfix: Colour assignment of the badges of all action buttons in the header fixed
  • Bugfix: Colour assignment of the product badges fixed
  • Bugfix: Unnecessary gap on the left and right of the breadcrumb with the width "100% (Full-width)" removed

Notes

  • Twig blocks in template files of some CMS elements have been renamed. Please check your template customisations. [Pro Edition]

Highlights

NEW: CMS block/element "Round teaser" added [Pro Edition]

A new round teaser has been added with ThemeWare® 2.2. This is part of the new Pro Shopping Experience for ThemeWare® Clean.

NEW: CMS block/element "Image & text layered" added [Pro Edition]

A new "Layout" element "Image & text layered" consisting of a CMS block and the corresponding CMS element has been added.

NEW: CMS block "Six columns (custom)" added [Pro Edition]

The new CMS block "Six columns (custom)" is a customisable variant of the existing 6-column block.

This new block can adopt the new expert configuration "CSS class (column)" from certain teasers (see "Round teaser"). This allows you to freely configure the six columns, as long as you are familiar with the Bootstrap grid system.

In addition, there is a new CSS class to further customise this block in combination with the new "maximum width" configuration. You can find more information on this in the ThemeWare® Knowledge Base or in the ThemeWare® Manual.

Configuration for the background colour of the "Countdown banner" added [Pro Edition]

We have added a configuration for the background colour of the "Countdown banner". This will give you even more design options.

Configuration for the background colour of the "Countdown banner (compact)" added [Pro Edition]

The "Countdown banner (compact)" has also received a configuration for the background colour.

Configuration for the horizontal alignment in the "Countdown banner (compact)" added [Pro Edition]

A configuration for the horizontal alignment of the text in the "Countdown banner (compact)" has been added. This allows the representation in "full width" sections to be configured even better.

Configuration for the horizontal image positioning in the "Call-To-Action" added [Pro Edition]

We have added a configuration for horizontal image positioning. This allows the image to be aligned to the left or right instead of centred in "Cover" display mode.

Configuration for the maximum width of the "Image teaser" added [Pro Edition]

You can now configure the maximum width of the "Image teaser". In combination with the horizontal and vertical alignment of the teaser, completely new layout options are now available.

Configuration for the maximum width in the "Countdown banner (compact)" added [Pro Edition]

A new configuration for the maximum width of the content in the "Countdown banner (compact)" has been added. This allows the representation in "full width" sections to be configured even better.


Changes in detail

CSS classes for column spacing in CMS blocks reworked

The CSS selectors in the CSS classes for column spacing in CMS blocks have been improved.

Presentation in display mode "Standard" of the "Image teaser" improved [Pro Edition]

The representation of the "Image teaser" in display mode "Standard" has been improved.

Horizontal alignment of the "Image Teaser" improved [Pro Edition]

The horizontal alignment of the "Image teaser" has been improved.

Storefront template files of all CMS elements updated [Pro Edition]

see "Notes" below

Variables of the "Hover box" improved [Pro Edition]

The "Headline" variables have been named correctly. The change should be migrated automatically, but check your hover boxes to get sure. (Concerns the text, the colour and the CSS class of headlines.)

Preview of the "Grid blocks" improved [Pro Edition]

The preview of the "Grid blocks" in the Shopping Experience editor has been improved.

Preview of CMS teaser elements enhanced [Pro Edition]

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

Bugfix: Duplicate title attribute in the "My account" button fixed

A duplicate title attribute in the "My account" button has been removed.

Bugfix: Colour assignment of the badges of all action buttons in the header fixed

The colour configuration of the badges of all action buttons in the header now overwrites the predefined colour again.

Bugfix: Colour assignment of the product badges fixed

The colour configuration of the product badges now overwrites the predefined colour again.

Bugfix: Unnecessary gap on the left and right of the breadcrumb with the width "100% (Full-width)" removed

Unnecessary gaps to the left and right of the breadcrumb with the width "100% (Full-width)" have been removed. The breadcrumb is now flush with the browser window.


Notes

Twig blocks in template files of some CMS elements have been renamed [Pro Edition]

The following changes have been made:

  • cms-element-twt-button-teaser.html.twig
    • element_twt_call_to_action_element > element_twt_call_to_action_alignment
    • element_twt_call_to_action_image_inner > element_twt_call_to_action_inner
  • cms-element-twt-call-to-action.html.twig
    • element_twt_call_to_action_element > element_twt_call_to_action_alignment
    • element_twt_call_to_action_image_inner > element_twt_call_to_action_inner
  • cms-element-twt-classic-teaser.html.twig
    • element_twt_classic_teaser_content > element_twt_classic_teaser_alignment
    • element_twt_classic_teaser_image_inner > element_twt_classic_teaser_inner
  • cms-element-twt-countdown-banner.html.twig
    • element_twt_discount_banner_image_inner > element_twt_discount_banner_inner
  • cms-element-twt-countdown-banner-compact.html.twig
    • element_twt_countdown_banner > element_twt_countdown_banner_compact
    • element_twt_countdown_banner_syles > element_twt_countdown_banner_compact_styles
    • element_twt_countdown_banner_content > element_twt_countdown_banner_compact_content
    • element_twt_countdown_banner_countdown_image_inner > element_twt_countdown_banner_compact_inner
    • element_twt_countdown_banner_countdown_container > element_twt_countdown_banner_compact_container
  • cms-element-twt-discount-banner.html.twig
    • element_twt_discount_banner_image_inner > element_twt_discount_banner_inner
  • cms-element-twt-hover-box.html.twig
    • element_twt_hover_box_content > element_twt_hover_box_alignment
    • element_twt_hover_box_image_inner > element_twt_hover_box_inner
  • cms-element-twt-image-banner.html.twig
    • element_twt_image_banner_content > removed
    • element_twt_image_banner_image_inner > element_twt_image_banner_inner
  • cms-element-twt-image-teaser.html.twig
    • element_twt_image_teaser_content > element_twt_image_teaser_alignment
    • element_twt_image_teaser_image_inner > element_twt_image_teaser_inner
  • cms-element-twt-modern-teaser.html.twig
    • element_twt_modern_teaser_content > element_twt_modern_teaser_alignment
    • element_twt_modern_teaser_image_inner > element_twt_modern_teaser_inner
  • cms-element-twt-text-teaser.html.twig
    • element_twt_text_teaser_content > element_twt_text_teaser_alignment
    • element_twt_text_teaser_image_inner > element_twt_text_teaser_inner
  • cms-element-twt-text-teaser-decorated.html.twig
    • element_twt_text_teaser_decorated_content > element_twt_text_teaser_decorated_alignment
    • element_twt_text_teaser_decorated_image_inner > element_twt_text_teaser_decorated_inner

Tip: Please check any individual template customisations in your shop.


Summary

Finally, a brief remark about our documentation, because it is rarely mentioned. Just like the ThemeWare® themes, the ThemeWare® documentation is growing every day. More than 10 new articles have been written just for this update.

Best regards, Sebastian and the ThemeWare® Team