Shopware 6.7.0.0

Guide for the 2025 Shopware Major Release

As with every major annual Shopware release, version 6.7 introduces exciting new features – and several breaking changes. These are part of Shopware’s official update strategy.

Theme configuration defaults

This change was made as part of the adjustments to improve accessibility.

To comply with WCAG 2.1 contrast requirements (minimum ratio 4.5:1), several theme color variables were adjusted. Please note that this only affects configuration fields whose values you haven't changed. Configuration fields that have already been changed will not be overwritten.

Theme Atmos - Set 1

Preloader > Preloader - page loading animation > Background (zen-layout-preloader-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)2 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#D9AB98 => #b16141
Typo & Colors > Theme colors > Colors > Secondary color (sw-color-brand-secondary)#333333 => #222222
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Top bar > Colors > Text:hover (zen-top-bar-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (zen-shop-navigation-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (zen-shop-navigation-cart-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Header > Main navigation (Categories) > Colors > Background:hover (zen-main-navigation-hover-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Header > Main navigation (Categories) > Colors > Text:hover (zen-main-navigation-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Footer > Columns styling > Newsletter column > Background (zen-footer-newsletter-column-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => darken($sw-color-brand-primary, 5%)
Components > Sidebar navigation > Colors > Background:active path (zen-sidebar-navigation-active-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Components > Sidebar navigation > Colors > Text:active path (zen-sidebar-navigation-active-color)#706560 => darken($sw-color-brand-primary, 20%)
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 34%)
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (zen-base-slider-controls-inside-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (zen-base-slider-controls-inside-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 20%)
Category > Filter > Colors > Background:hover (zen-category-filter-hover-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 20%)

Theme Atmos - Set 2

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)2 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#e87d00 => #aa5c00
Typo & Colors > Theme colors > Colors > Border (sw-border-color)#e8e7e8 => #8d8d8d
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Search > Colors > [!] Text:focus (zen-search-focus-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Header > Search > Colors > Border (zen-search-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Header > Search > Colors > [!] Border:focus (zen-search-focus-border)$sw-color-brand-secondary => lighten($sw-color-brand-primary, 10%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Header > Main navigation (Categories) > Colors > Text:hover (zen-main-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Components > Sidebar navigation > Colors > Background (zen-sidebar-navigation-bg)#F3F4F5 => #ffffff
Components > Sidebar navigation > Colors > Border (zen-sidebar-navigation-border-color)$sw-color-brand-primary => $sw-border-color
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 38%)
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (zen-base-slider-controls-inside-bg)transparent => $sw-color-brand-primary
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (zen-base-slider-controls-inside-hover-bg)transparent => $sw-color-brand-primary
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (zen-base-slider-controls-inside-color)$sw-text-color => #ffffff
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary => #ffffff
Components > Pagination > Colors > Background:hover (zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%) => $sw-color-brand-primary
Components > Pagination > Colors > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => #ffffff
Product > Description navigation > Colors > [!] Background / border (zen-product-tabs-bg)$sw-border-color => transparent
Product > Description navigation > Colors > Text (zen-product-tabs-color)$sw-text-color => $sw-color-brand-primary

Theme Atmos - Set 3

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)3 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#e54924 => #a55a01
Typo & Colors > Theme colors > Colors > Border (sw-border-color)#e8e7e8 => #404346
Typo & Colors > Theme colors > Colors > [!] Meta theme-color (zen-meta-theme-color)#ffffff => #161718
Typo & Colors > Theme colors > Colors > Link color (zen-link-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #ff4143
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Search > Colors > Border (zen-search-border)lighten($sw-color-brand-secondary, 10%) => lighten($sw-color-brand-secondary, 50%)
Header > Top bar > Colors > Background:hover (zen-top-bar-hover-bg)lighten($sw-color-brand-secondary, 5%) => darken($sw-color-brand-secondary, 8%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Badge color (zen-shop-navigation-cart-badge-color)$sw-color-brand-primary => #ffffff
Footer > Footer > Colors > Background (zen-footer-bg)darken($sw-background-color, 5%) => darken($sw-background-color, 8%)
Footer > Columns styling > Newsletter column > [!] Form background (zen-footer-newsletter-field-bg)lighten($sw-color-brand-secondary, 5%) => #ffffff
Footer > Columns styling > Newsletter column > [!] Form background:focus (zen-footer-newsletter-field-focus-bg)$sw-color-brand-secondary => #ffffff
Footer > Columns styling > Newsletter column > Form text (zen-footer-newsletter-field-color)#ffffff => $sw-text-color
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)darken($sw-color-brand-secondary, 10%) => #ffffff
Footer > Footer bottom > Colors > Background (zen-footer-bottom-bg)darken($sw-background-color, 5%) => darken($sw-background-color, 8%)

Theme Atmos - Set 4

Accent line > Basic configuration > Accent line top (zen-layout-border-top-width)5 => 0
Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)1 => 4.5
Typo & Colors > Theme colors > Colors > Secondary color (sw-color-brand-secondary)#676460 => #5d5c57
Typo & Colors > Theme colors > Colors > Link color (zen-link-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Typography > Colors > Dark text color (sw-text-color)#6d6d6d => #111111
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > E-Commerce > > Buy button text (sw-color-buy-button-text)#ffffff => #000000
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)
Header > Dropdown navigation > Colors > Text (zen-dropdown-navigation-color)#ffffff => $sw-text-color
Header > Dropdown navigation > Colors > Text:hover (zen-dropdown-navigation-hover-color)#ffffff => $sw-text-color
Footer > Footer > Colors > Text (zen-footer-color)#ffffff => $sw-text-color
Footer > Columns styling > Hotline Column > Text (zen-footer-hotline-column-color)#ffffff => $sw-text-color
Footer > Columns styling > Hotline Column > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => $sw-text-color
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => $sw-text-color
Footer > Columns styling > Custom column 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => $sw-text-color
Footer > Columns styling > Custom column 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => $sw-text-color
Footer > Columns styling > Payment methods column > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => $sw-text-color
Footer > Columns styling > Shipping methods column > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Sidebar navigation > Colors > Text:hover (zen-sidebar-navigation-hover-color)#ffffff => $sw-text-color
Components > Sidebar navigation > Colors > Text:active path (zen-sidebar-navigation-active-color)#ffffff => $sw-text-color
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 34%)
Components > Forms > Colors > Border:focus (zen-input-focus-border-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Arrow navigation color (zen-base-slider-controls-outside-color)#ffffff => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Arrow navigation color:hover (zen-base-slider-controls-outside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots (zen-base-slider-controls-dots-outside-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (zen-base-slider-controls-dots-outside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (zen-base-slider-controls-dots-inside-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (zen-base-slider-controls-dots-inside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Arrow navigation background (zen-image-slider-controls-outside-bg)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Arrow navigation color:hover (zen-image-slider-controls-outside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (zen-image-slider-controls-dots-outside-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (zen-image-slider-controls-dots-outside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color (zen-image-slider-controls-inside-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color:hover (zen-image-slider-controls-inside-hover-color)#ffffff => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (zen-image-slider-controls-dots-inside-color)$sw-color-brand-primary => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (zen-image-slider-controls-dots-inside-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Product slider > Colors > Arrow navigation color (zen-product-slider-controls-color)#ffffff => $sw-text-color
Components > Product slider > Colors > Arrow navigation color:hover (zen-product-slider-controls-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Category listing slider > Colors > Arrow navigation color (zen-category-listing-slider-controls-color)#ffffff => $sw-text-color
Components > Category listing slider > Colors > Arrow navigation color:hover (zen-category-listing-slider-controls-hover-color)$sw-color-brand-primary => $sw-text-color
Components > Pagination > Colors > Text (zen-pagination-color)$sw-color-brand-primary => $sw-text-color
Components > Pagination > Colors > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => $sw-text-color
Components > Pagination > Colors > Text:active (zen-pagination-active-color)#ffffff => $sw-text-color
Components > Breadcrumbs > Colors > Text:hover (zen-breadcrumbs-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)
Category > Filter > Colors > Text:hover (zen-category-filter-hover-color)#ffffff => $sw-text-color
Category > Filter > Colors > Text:active (zen-category-filter-active-color)#ffffff => $sw-text-color
Product > Detail > Product configurator > Text:hover (zen-product-configurator-hover-color)#ffffff => $sw-text-color
Product > Description navigation > Colors > Text:hover (zen-product-tabs-hover-color)#ffffff => $sw-text-color

Theme Gravity - Set 1

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)2 => 4.5
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Components > Forms > Colors > Border:focus (zen-input-focus-border-color)$sw-border-color => #818faa

Theme Gravity - Set 2

Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#F2CB05 => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#EA003A => #ea003a
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Footer > Footer > Colors > Text:hover (zen-footer-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)
Footer > Columns styling > Hotline Column > Text:hover (zen-footer-hotline-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)
Footer > Columns styling > Social media column > Text:hover (zen-footer-social-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)
Components > Forms > Colors > Background:focus (zen-input-focus-bg)#ffffff => #f6f7f9
Components > Forms > Colors > Border (zen-input-border-color)#f6f7f9 => darken($sw-border-color, 32%)
Components > Forms > Colors > Border:focus (zen-input-focus-border-color)$sw-border-color => darken($sw-border-color, 42%)
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots (zen-base-slider-controls-dots-outside-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (zen-base-slider-controls-dots-outside-hover-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (zen-base-slider-controls-dots-inside-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (zen-base-slider-controls-dots-inside-hover-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (zen-image-slider-controls-dots-outside-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (zen-image-slider-controls-dots-outside-hover-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (zen-image-slider-controls-dots-inside-color)$sw-border-color => $sw-text-color
Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (zen-image-slider-controls-dots-inside-hover-color)$sw-border-color => $sw-text-color
Category > Product boxes > Product name > Text:hover (zen-product-listing-card-name-hover-color)$sw-color-brand-secondary => $sw-text-color
Category > Product boxes > Product number > Text (zen-product-listing-card-ordernumber-color)#999999 => #767676

Theme Horizon - Set 1

Typo & Colors > Theme colors > Colors > Border (sw-border-color)#e8e7e8 => #444444
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Components > Forms > Colors > Border:focus (zen-input-focus-border-color)$sw-color-brand-primary => lighten($sw-border-color, 35%)
Product > Description navigation > Colors > Text (zen-product-tabs-color)lighten($sw-text-color, 70%) => lighten($sw-text-color, 45%)

Theme Horizon - Set 2

Typo & Colors > Theme colors > Colors > Border (sw-border-color)#dee3e9 => #7e91a9
Typo & Colors > Theme colors > Colors > Link color (zen-link-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 5%)
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color, 60%) => darken($sw-border-color, 35%)
Components > Forms > Colors > Border:focus (zen-input-focus-border-color)lighten(desaturate($sw-color-brand-primary, 69%), 60%) => darken($sw-border-color, 35%)
Components > Pagination > Colors > Background (zen-pagination-bg)lighten($sw-border-color, 5%) => $sw-color-brand-primary

Theme Horizon - Set 3

Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Main navigation (Categories) > Colors > Text:hover (zen-main-navigation-hover-color)$sw-color-brand-primary => $darken($sw-color-brand-primary, 35%)
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)lighten($sw-border-color, 4%) => darken($sw-border-color, 33%)
Footer > Columns styling > Newsletter column > Form border:focus (zen-footer-newsletter-field-focus-border)$sw-border-color => $sw-text-color
Components > Forms > Colors > Background:focus (zen-input-focus-bg)#ffffff => lighten($sw-border-color, 4%)
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

Theme Sphere - Set 1

Typo & Colors > Theme colors > Colors > Secondary color (sw-color-brand-secondary)#c5ab7e => #856b40
Typo & Colors > Theme colors > Colors > Border (sw-border-color)#CED4D9 => #7f8e97
Typo & Colors > Theme colors > Colors > Link color (zen-link-color)$sw-color-brand-primary => $sw-color-brand-secondary
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Typography > Colors > Dark text color (sw-text-color)#777777 => #6f6f6f
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Top bar > Colors > Text:hover (zen-top-bar-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)
Header > Flyout navigation > Colors > Background (zen-flyout-navigation-bg)rgba($sw-color-brand-primary, 90%) => rgba($sw-color-brand-primary, 95%)
Header > Flyout navigation > Colors > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-secondary => #ffffff
Footer > Footer > Colors > Text:hover (zen-footer-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)$sw-color-brand-secondary => lighten($sw-color-brand-primary, 50%)
Footer > Columns styling > Newsletter column > Form border:focus (zen-footer-newsletter-field-focus-border)$sw-color-brand-primary => #ffffff
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)
Footer > Columns styling > Custom column 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)
Footer > Columns styling > Custom column 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)
Footer > Columns styling > Payment methods column > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)
Footer > Columns styling > Shipping methods column > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)
Footer > Footer bottom > Colors > Text:hover (zen-footer-bottom-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)
Components > Sidebar navigation > Colors > Background (zen-sidebar-navigation-bg)transparent => #ffffff
Components > Sidebar navigation > Colors > Background:hover (zen-sidebar-navigation-hover-bg)#ffffff => $sw-color-brand-primary
Components > Sidebar navigation > Colors > Text:hover (zen-sidebar-navigation-hover-color)$sw-color-brand-secondary => #ffffff
Components > Sidebar navigation > Colors > Background:active path (zen-sidebar-navigation-active-bg)#ffffff => lighten($sw-color-brand-primary, 15%)
Components > Sidebar navigation > Colors > Text:active path (zen-sidebar-navigation-active-color)$sw-headline-color => #ffffff
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (zen-base-slider-controls-inside-bg)transparent => $sw-color-brand-primary
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (zen-base-slider-controls-inside-hover-bg)transparent => $sw-color-brand-secondary
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (zen-base-slider-controls-inside-color)$sw-border-color => #ffffff
Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-secondary => #ffffff
Components > Pagination > Colors > Background:hover (zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%) => lighten($sw-color-brand-primary, 10%)
Components > Pagination > Colors > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => #ffffff
Category > Filter > Colors > Background:hover (zen-category-filter-hover-bg)#ebedef => #ffffff
Category > Filter > Colors > Text:hover (zen-category-filter-hover-color)$sw-text-color => $sw-color-brand-secondary
Category > Product boxes > Product description > Text (zen-product-listing-card-description-color)lighten($sw-text-color, 10%) => $sw-text-color

Theme Sphere - Set 2

Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#F2CB05 => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#EA003A => #ea003a
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Footer > Columns styling > Newsletter column > Form border:focus (zen-footer-newsletter-field-focus-border)darken($sw-color-brand-primary, 10%) => $sw-color-brand-secondary
Components > Forms > Colors > Border (zen-input-border-color)lighten($sw-border-color, 5%) => darken($sw-border-color, 30%)

Theme Stratus - Set 1

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)3 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#F46036 => #d1380d
Typo & Colors > Theme colors > Colors > Border (sw-border-color)#e8e7e8 => #958c95
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Header > Checkout minimal header > Border bottom (zen-header-minimal-border-bottom)True => False
Header > Top bar > Colors > Background:hover (zen-top-bar-hover-bg)$sw-brand-color-secondary => #ffffff
Footer > Columns styling > Newsletter column > Background (zen-footer-newsletter-column-bg)darken($sw-color-brand-secondary, 10%) => #212121
Components > Sidebar navigation > Colors > Background:hover (zen-sidebar-navigation-hover-bg)darken($sw-color-brand-primary, 5%) => darken($sw-border-color, 55%)
Components > Sidebar navigation > Colors > Background:active path (zen-sidebar-navigation-active-bg)$sw-color-brand-primary => darken($sw-border-color, 45%)
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 35%)

Theme Stratus - Set 2

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)3 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#FF463D => #e4281f
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Typography > Colors > Dark text color (sw-text-color)#6d6d6d => #4a4a4a
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Search > Colors > Border (zen-search-border)darken($sw-color-brand-secondary, 10%) => $sw-border-color
Header > Top bar > Colors > Text:hover (zen-top-bar-hover-color)$sw-text-color => #ffffff
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Footer > Colors > Text:hover (zen-footer-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Hotline Column > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Social media column > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Custom column 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Custom column 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Payment methods column > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Columns styling > Shipping methods column > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)
Footer > Footer bottom > Colors > Text:hover (zen-footer-bottom-hover-color)darken($sw-color-brand-primary, 10%) => #ffffff
Components > Forms > Colors > Border (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

Theme Stratus - Set 3

Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#a99186 => #8f7062
Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)2.5 => 4.5
Typo & Colors > Theme colors > Colors > Border (sw-border-color)#e8e7e8 => #989398
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Background (zen-shop-navigation-bg)$sw-color-brand-secondary => $sw-color-brand-primary
Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Background:hover (zen-shop-navigation-hover-bg)$sw-color-brand-primary => darken($sw-color-brand-primary, 5%)
Header > Flyout navigation > Colors > Background (zen-flyout-navigation-bg)rgba($sw-color-brand-secondary, 90%) => rgba($sw-color-brand-secondary, 95%)
Header > Flyout navigation > Colors > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-primary => $zen-light-text-color
Footer > Columns styling > Hotline Column > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Social media column > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Custom column 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Custom column 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Payment methods column > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Columns styling > Shipping methods column > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)
Footer > Footer bottom > Colors > Text:hover (zen-footer-bottom-hover-color)darken($sw-color-brand-primary, 10%) => lighten($sw-color-brand-primary, 15%)
Category > Product boxes > Product description > Text (zen-product-listing-card-description-color)lighten($sw-color-price, 20%) => $sw-text-color
Product > Description navigation > Colors > [!] Background / border:hover (zen-product-tabs-hover-bg)$sw-color-brand-primary => darken($sw-color-brand-primary, 50%)

Theme Stratus - Set 4

Typo & Colors > Theme colors > Basic configuration > Contrast threshold (zen-min-contrast-ratio)2.5 => 4.5
Typo & Colors > Theme colors > Colors > Primary color (sw-color-brand-primary)#909986 => #67705d
Typo & Colors > Status messages > > Success (sw-color-success)#3cc261 => #007e4e
Typo & Colors > Status messages > > Information (sw-color-info)#26b6cf => #005b99
Typo & Colors > Status messages > > Notice (sw-color-warning)#ffbd5d => #9b6a08
Typo & Colors > Status messages > > Error (sw-color-danger)#e52427 => #c20017
Typo & Colors > Typography > Colors > Dark text color (sw-text-color)#6d6d6d => #4a4a4a
Typo & Colors > Typography > Colors > Dark headline color (sw-headline-color)#bab4ab => $sw-color-brand-secondary
Typo & Colors > Buttons > Colors > Light button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Typo & Colors > Buttons > Colors > Dark button text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)
Header > Search > Colors > Border (zen-search-border)$sw-border-color => darken($sw-border-color, 30%)
Header > Search > Colors > [!] Border:focus (zen-search-focus-border)$sw-border-color => darken($sw-border-color, 30%)
Header > Flyout navigation > Colors > Background (zen-flyout-navigation-bg)rgba($sw-color-brand-primary, 90%) => rgba(darken($sw-color-brand-primary, 5%), 90%)
Header > Flyout navigation > Colors > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-secondary => #ffffff
Footer > Footer > Colors > Text:hover (zen-footer-hover-color)$sw-color-brand-primary => #ffffff
Footer > Columns styling > Hotline Column > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => #ffffff
Footer > Columns styling > Social media column > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => #ffffff
Footer > Columns styling > Newsletter column > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 17%)
Footer > Columns styling > Custom column 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => #ffffff
Components > Forms > Colors > Border (zen-input-border-color)#f2efeb => darken($sw-border-color, 33%)
Category > Product boxes > Product description > Text (zen-product-listing-card-description-color)lighten($sw-color-price, 20%) => $sw-text-color

👉 Detailed information about accessibility in our theme can be found in our accessibility article.

Removed Theme Variables

As part of accessibility enhancements, the following theme variables have been removed:

zen-checkout-confirm-payment-shipping-description-length Defines how many characters are shown in the payment/shipping descriptions.
zen-checkout-confirm-visible-payment-methods-limit Defines how many payment methods are visible. Others are accessible via “Show more”.
zen-checkout-confirm-visible-shipping-methods-limit Defines how many shipping methods are visible. Others are accessible via “Show more”.

More: The configuration for Dropdown Trigger zen-dropdown-navigation-trigger has been removed as it is no longer used in the new header setup.

ESI for Header and Footer

Shopware 6.7 introduced ESI (Edge Side Includes) for the header and footer. This change means that your shop’s header and footer now load faster and are cached more efficiently. These areas have been completely refactored:

Header redesign (Storefront - Header/Navbar Refactoring)
Footer redesign (Storefront - Footer Refactoring)

More info in the official shopware upgrade guide: Link to docs

General note on child themes

If you're using a child theme, it is your responsibility to review and adapt your individual code.

📘 Official Shopware Upgrade Guide: https://github.com/shopware/shopware/blob/trunk/UPGRADE-6.7.md

Last updated 1 month ago

Was this helpful?