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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#D9AB98=>#b16141Typo & Colors > Theme colors > Colors > Secondary color (
sw-color-brand-secondary)#333333=>#222222Typo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#e87d00=>#aa5c00Typo & Colors > Theme colors > Colors > Border (
sw-border-color)#e8e7e8=>#8d8d8dTypo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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=>#ffffffComponents > Sidebar navigation > Colors > Border (
zen-sidebar-navigation-border-color)$sw-color-brand-primary=>$sw-border-colorComponents > 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-primaryComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (
zen-base-slider-controls-inside-hover-bg)transparent=>$sw-color-brand-primaryComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (
zen-base-slider-controls-inside-color)$sw-text-color=>#ffffffComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (
zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary=>#ffffffComponents > Pagination > Colors > Background:hover (
zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%)=>$sw-color-brand-primaryComponents > Pagination > Colors > Text:hover (
zen-pagination-hover-color)darken($sw-color-brand-primary, 15%)=>#ffffffProduct > Description navigation > Colors > [!] Background / border (
zen-product-tabs-bg)$sw-border-color=>transparentProduct > 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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#e54924=>#a55a01Typo & Colors > Theme colors > Colors > Border (
sw-border-color)#e8e7e8=>#404346Typo & Colors > Theme colors > Colors > [!] Meta theme-color (
zen-meta-theme-color)#ffffff=>#161718Typo & 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=>#ff4143Typo & 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=>#ffffffFooter > 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%)=>#ffffffFooter > Columns styling > Newsletter column > [!] Form background:focus (
zen-footer-newsletter-field-focus-bg)$sw-color-brand-secondary=>#ffffffFooter > Columns styling > Newsletter column > Form text (
zen-footer-newsletter-field-color)#ffffff=>$sw-text-colorFooter > Columns styling > Newsletter column > Form border (
zen-footer-newsletter-field-border)darken($sw-color-brand-secondary, 10%)=>#ffffffFooter > 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=>0Typo & Colors > Theme colors > Basic configuration > Contrast threshold (
zen-min-contrast-ratio)1=>4.5Typo & Colors > Theme colors > Colors > Secondary color (
sw-color-brand-secondary)#676460=>#5d5c57Typo & 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=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & Colors > Typography > Colors > Dark text color (
sw-text-color)#6d6d6d=>#111111Typo & 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=>#000000Header > 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-colorHeader > Dropdown navigation > Colors > Text:hover (
zen-dropdown-navigation-hover-color)#ffffff=>$sw-text-colorFooter > Footer > Colors > Text (
zen-footer-color)#ffffff=>$sw-text-colorFooter > Columns styling > Hotline Column > Text (
zen-footer-hotline-column-color)#ffffff=>$sw-text-colorFooter > Columns styling > Hotline Column > Text:hover (
zen-footer-hotline-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Columns styling > Custom column 1 > Text:hover (
zen-footer-custom-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Columns styling > Custom column 2 > Text:hover (
zen-footer-custom-2-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Columns styling > Custom column 3 > Text:hover (
zen-footer-custom-3-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Columns styling > Payment methods column > Text:hover (
zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Columns styling > Shipping methods column > Text:hover (
zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Sidebar navigation > Colors > Text:hover (
zen-sidebar-navigation-hover-color)#ffffff=>$sw-text-colorComponents > Sidebar navigation > Colors > Text:active path (
zen-sidebar-navigation-active-color)#ffffff=>$sw-text-colorComponents > 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-colorComponents > 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-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots (
zen-base-slider-controls-dots-outside-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (
zen-base-slider-controls-dots-outside-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > 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-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (
zen-base-slider-controls-dots-inside-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: outside) > Arrow navigation background (
zen-image-slider-controls-outside-bg)$sw-color-brand-primary=>$sw-text-colorComponents > 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-colorComponents > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (
zen-image-slider-controls-dots-outside-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (
zen-image-slider-controls-dots-outside-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color (
zen-image-slider-controls-inside-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color:hover (
zen-image-slider-controls-inside-hover-color)#ffffff=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (
zen-image-slider-controls-dots-inside-color)$sw-color-brand-primary=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Product slider > Colors > Arrow navigation color (
zen-product-slider-controls-color)#ffffff=>$sw-text-colorComponents > Product slider > Colors > Arrow navigation color:hover (
zen-product-slider-controls-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Category listing slider > Colors > Arrow navigation color (
zen-category-listing-slider-controls-color)#ffffff=>$sw-text-colorComponents > Category listing slider > Colors > Arrow navigation color:hover (
zen-category-listing-slider-controls-hover-color)$sw-color-brand-primary=>$sw-text-colorComponents > Pagination > Colors > Text (
zen-pagination-color)$sw-color-brand-primary=>$sw-text-colorComponents > Pagination > Colors > Text:hover (
zen-pagination-hover-color)darken($sw-color-brand-primary, 15%)=>$sw-text-colorComponents > Pagination > Colors > Text:active (
zen-pagination-active-color)#ffffff=>$sw-text-colorComponents > 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-colorCategory > Filter > Colors > Text:active (
zen-category-filter-active-color)#ffffff=>$sw-text-colorProduct > Detail > Product configurator > Text:hover (
zen-product-configurator-hover-color)#ffffff=>$sw-text-colorProduct > 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.5Typo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#F2CB05=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#EA003A=>#ea003aTypo & 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=>#f6f7f9Components > 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-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (
zen-base-slider-controls-dots-outside-hover-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (
zen-base-slider-controls-dots-inside-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (
zen-image-slider-controls-dots-outside-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (
zen-image-slider-controls-dots-outside-hover-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (
zen-image-slider-controls-dots-inside-color)$sw-border-color=>$sw-text-colorComponents > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color)$sw-border-color=>$sw-text-colorCategory > Product boxes > Product name > Text:hover (
zen-product-listing-card-name-hover-color)$sw-color-brand-secondary=>$sw-text-colorCategory > 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=>#444444Typo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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=>#7e91a9Typo & 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=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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-colorComponents > 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=>#856b40Typo & Colors > Theme colors > Colors > Border (
sw-border-color)#CED4D9=>#7f8e97Typo & Colors > Theme colors > Colors > Link color (
zen-link-color)$sw-color-brand-primary=>$sw-color-brand-secondaryTypo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & Colors > Typography > Colors > Dark text color (
sw-text-color)#777777=>#6f6f6fTypo & 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=>#ffffffFooter > 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=>#ffffffFooter > 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=>#ffffffComponents > Sidebar navigation > Colors > Background:hover (
zen-sidebar-navigation-hover-bg)#ffffff=>$sw-color-brand-primaryComponents > Sidebar navigation > Colors > Text:hover (
zen-sidebar-navigation-hover-color)$sw-color-brand-secondary=>#ffffffComponents > 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=>#ffffffComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (
zen-base-slider-controls-inside-bg)transparent=>$sw-color-brand-primaryComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (
zen-base-slider-controls-inside-hover-bg)transparent=>$sw-color-brand-secondaryComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (
zen-base-slider-controls-inside-color)$sw-border-color=>#ffffffComponents > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (
zen-base-slider-controls-inside-hover-color)$sw-color-brand-secondary=>#ffffffComponents > 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%)=>#ffffffCategory > Filter > Colors > Background:hover (
zen-category-filter-hover-bg)#ebedef=>#ffffffCategory > Filter > Colors > Text:hover (
zen-category-filter-hover-color)$sw-text-color=>$sw-color-brand-secondaryCategory > 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=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#F2CB05=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#EA003A=>#ea003aTypo & 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-secondaryComponents > 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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#F46036=>#d1380dTypo & Colors > Theme colors > Colors > Border (
sw-border-color)#e8e7e8=>#958c95Typo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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=>FalseHeader > Top bar > Colors > Background:hover (
zen-top-bar-hover-bg)$sw-brand-color-secondary=>#ffffffFooter > Columns styling > Newsletter column > Background (
zen-footer-newsletter-column-bg)darken($sw-color-brand-secondary, 10%)=>#212121Components > 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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#FF463D=>#e4281fTypo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & Colors > Typography > Colors > Dark text color (
sw-text-color)#6d6d6d=>#4a4a4aTypo & 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-colorHeader > Top bar > Colors > Text:hover (
zen-top-bar-hover-color)$sw-text-color=>#ffffffHeader > 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%)=>#ffffffComponents > 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=>#8f7062Typo & Colors > Theme colors > Basic configuration > Contrast threshold (
zen-min-contrast-ratio)2.5=>4.5Typo & Colors > Theme colors > Colors > Border (
sw-border-color)#e8e7e8=>#989398Typo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & 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-primaryHeader > 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-colorFooter > 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-colorProduct > 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.5Typo & Colors > Theme colors > Colors > Primary color (
sw-color-brand-primary)#909986=>#67705dTypo & Colors > Status messages > > Success (
sw-color-success)#3cc261=>#007e4eTypo & Colors > Status messages > > Information (
sw-color-info)#26b6cf=>#005b99Typo & Colors > Status messages > > Notice (
sw-color-warning)#ffbd5d=>#9b6a08Typo & Colors > Status messages > > Error (
sw-color-danger)#e52427=>#c20017Typo & Colors > Typography > Colors > Dark text color (
sw-text-color)#6d6d6d=>#4a4a4aTypo & Colors > Typography > Colors > Dark headline color (
sw-headline-color)#bab4ab=>$sw-color-brand-secondaryTypo & 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=>#ffffffFooter > Footer > Colors > Text:hover (
zen-footer-hover-color)$sw-color-brand-primary=>#ffffffFooter > Columns styling > Hotline Column > Text:hover (
zen-footer-hotline-column-hover-color)$sw-color-brand-primary=>#ffffffFooter > Columns styling > Social media column > Text:hover (
zen-footer-social-column-hover-color)$sw-color-brand-primary=>#ffffffFooter > 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=>#ffffffComponents > 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-lengthDefines how many characters are shown in the payment/shipping descriptions.zen-checkout-confirm-visible-payment-methods-limitDefines how many payment methods are visible. Others are accessible via “Show more”.zen-checkout-confirm-visible-shipping-methods-limitDefines 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