Shopware 6.7.0.0
Leitfaden für das Shopware Major Release von 2025
Wie in jedem jährlichen Major Release von Shopware gibt es auch mit Shopware in Version 6.7 wieder spannende Neuerungen, aber auch sogenannte Breaking Changes – das ist Teil der Update-Strategie von Shopware.
Standardwerte der Theme-Konfiguration
Diese Änderung ist im Zuge der Anpassungen zur Verbesserung der Barrierefreiheit erfolgt.
Zur Einhaltung der Kontrastvorgaben von WCAG 2.1 (Mindestwert 4.5:1) wurden diverse Farb-Variablen im Theme angepasst. Bitte beachte, dass hiervon nur Konfigurationsfelder betroffen sind, deren Wert Du nicht verändert hast. Bereits geänderte Konfogurationsfelder werden nicht überschrieben.
Theme Atmos - Set 1
Preloader > Preloader - Seitenladeanimation > Hintergrund (
zen-layout-preloader-bg
)lighten(saturate($sw-color-brand-primary, 7%), 15%)
=>lighten(saturate($sw-color-brand-primary, 7%), 30%)
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)2
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#D9AB98
=>#b16141
Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary
)#333333
=>#222222
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Farben > 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 (Suche, Merkzettel, Konto, Warenkorb) > Farben > 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 (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > 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 (Kategorien) > Farben > Hintergrund: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 (Kategorien) > Farben > Text:hover (
zen-main-navigation-hover-color
)lighten(saturate($sw-color-brand-primary, 7%), 15%)
=>lighten(saturate($sw-color-brand-primary, 7%), 30%)
Footer > Spalten Styling > Newsletter Spalte > Hintergrund (
zen-footer-newsletter-column-bg
)lighten(saturate($sw-color-brand-primary, 7%), 15%)
=>lighten(saturate($sw-color-brand-primary, 7%), 30%)
Footer > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 5%)
Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (
zen-sidebar-navigation-active-bg
)lighten(saturate($sw-color-brand-primary, 7%), 15%)
=>lighten(saturate($sw-color-brand-primary, 7%), 30%)
Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (
zen-sidebar-navigation-active-color
)#706560
=>darken($sw-color-brand-primary, 20%)
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)$sw-border-color
=>darken($sw-border-color, 33%)
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (
zen-base-slider-controls-inside-bg
)lighten(saturate($sw-color-brand-primary, 7%), 15%)
=>lighten(saturate($sw-color-brand-primary, 7%), 30%)
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-inside-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 20%)
Kategorie > Filter > Farben > Hintergrund: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
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)2
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#e87d00
=>#aa5c00
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#e8e7e8
=>#8d8d8d
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Suche > Farben > [!] Text:focus (
zen-search-focus-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Header > Suche > Farben > Rahmen (
zen-search-border
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Header > Suche > Farben > [!] Rahmen:focus (
zen-search-focus-border
)$sw-color-brand-secondary
=>lighten($sw-color-brand-primary, 10%)
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (
zen-shop-navigation-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (
zen-shop-navigation-cart-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Header > Main Navigation (Kategorien) > Farben > Text:hover (
zen-main-navigation-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Elemente > Sidebar navigation > Farben > Hintergrund (
zen-sidebar-navigation-bg
)#F3F4F5
=>#ffffff
Elemente > Sidebar navigation > Farben > Rahmen (
zen-sidebar-navigation-border-color
)$sw-color-brand-primary
=>$sw-border-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (
zen-base-slider-controls-inside-bg
)transparent
=>$sw-color-brand-primary
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (
zen-base-slider-controls-inside-hover-bg
)transparent
=>$sw-color-brand-primary
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-inside-color
)$sw-text-color
=>#ffffff
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-inside-hover-color
)$sw-color-brand-primary
=>#ffffff
Elemente > Paginierung > Farben > Hintergrund:hover (
zen-pagination-hover-bg
)hsl(hue($sw-border-color), saturation($sw-border-color), 93%)
=>$sw-color-brand-primary
Elemente > Paginierung > Farben > Text:hover (
zen-pagination-hover-color
)darken($sw-color-brand-primary, 15%)
=>#ffffff
Produkt > Beschreibung Navigation > Farben > [!] Hintergrund / Unterstrich (
zen-product-tabs-bg
)$sw-border-color
=>transparent
Produkt > Beschreibung Navigation > Farben > Text (
zen-product-tabs-color
)$sw-text-color
=>$sw-color-brand-primary
Theme Atmos - Set 3
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)3
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#e54924
=>#d83f1b
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#e8e7e8
=>#404346
Typografie & Farben > Theme-Farben > Farben > [!] Meta Theme-Farbe (
zen-meta-theme-color
)#ffffff
=>#161718
Typografie & Farben > Theme-Farben > Farben > Link-Farbe (
zen-link-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 10%)
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#f42d30
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Farben > Hintergrund:hover (
zen-top-bar-hover-bg
)lighten($sw-color-brand-secondary, 5%)
=>darken($sw-color-brand-secondary, 8%)
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Badge Farbe (
zen-shop-navigation-cart-badge-color
)$sw-color-brand-primary
=>#ffffff
Footer > Footer > Farben > Hintergrund (
zen-footer-bg
)darken($sw-background-color, 5%)
=>darken($sw-background-color, 8%)
Footer > Spalten Styling > Newsletter Spalte > [!] Form Hintergrund (
zen-footer-newsletter-field-bg
)lighten($sw-color-brand-secondary, 5%)
=>#ffffff
Footer > Spalten Styling > Newsletter Spalte > [!] Form Hintergrund:focus (
zen-footer-newsletter-field-focus-bg
)$sw-color-brand-secondary
=>#ffffff
Footer > Spalten Styling > Newsletter Spalte > Form text (
zen-footer-newsletter-field-color
)#ffffff
=>$sw-text-color
Footer > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)darken($sw-color-brand-secondary, 10%)
=>#ffffff
Footer > Unterer Footer > Farben > Hintergrund (
zen-footer-bottom-bg
)darken($sw-background-color, 5%)
=>darken($sw-background-color, 8%)
Theme Atmos - Set 4
Akzentlinie > Grundeinstellungen > Akzentlinie oben (
zen-layout-border-top-width
)5
=>0
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)1
=>4.5
Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary
)#676460
=>#5d5c57
Typografie & Farben > Theme-Farben > Farben > Link-Farbe (
zen-link-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 45%)
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color
)#6d6d6d
=>#111111
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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%)
Typografie & Farben > E-Commerce > > Kaufen-Button Text (
sw-color-buy-button-text
)#ffffff
=>#000000
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (
zen-shop-navigation-hover-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 45%)
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (
zen-shop-navigation-cart-hover-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 45%)
Header > Dropdown Navigation > Farben > Text (
zen-dropdown-navigation-color
)#ffffff
=>$sw-text-color
Header > Dropdown Navigation > Farben > Text:hover (
zen-dropdown-navigation-hover-color
)#ffffff
=>$sw-text-color
Footer > Footer > Farben > Text (
zen-footer-color
)#ffffff
=>$sw-text-color
Footer > Spalten Styling > Hotline Spalte > Text (
zen-footer-hotline-column-color
)#ffffff
=>$sw-text-color
Footer > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Footer > Spalten Styling > Custom Spalte 2 > Text:hover (
zen-footer-custom-2-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Footer > Spalten Styling > Custom Spalte 3 > Text:hover (
zen-footer-custom-3-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (
zen-footer-payment-logos-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Footer > Spalten Styling > Versandarten Spalte > Text:hover (
zen-footer-shipping-logos-column-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Sidebar navigation > Farben > Text:hover (
zen-sidebar-navigation-hover-color
)#ffffff
=>$sw-text-color
Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (
zen-sidebar-navigation-active-color
)#ffffff
=>$sw-text-color
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)$sw-border-color
=>darken($sw-border-color, 33%)
Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 45%)
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-outside-color
)#ffffff
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-outside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (
zen-base-slider-controls-dots-outside-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots:hover (
zen-base-slider-controls-dots-outside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-inside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (
zen-base-slider-controls-dots-inside-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Pfeile-Navigation Hintergrund (
zen-image-slider-controls-outside-bg
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe:hover (
zen-image-slider-controls-outside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (
zen-image-slider-controls-dots-outside-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots:hover (
zen-image-slider-controls-dots-outside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-image-slider-controls-inside-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-image-slider-controls-inside-hover-color
)#ffffff
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (
zen-image-slider-controls-dots-inside-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Produkt Slider > Farben > Pfeile-Navigation Farbe (
zen-product-slider-controls-color
)#ffffff
=>$sw-text-color
Elemente > Produkt Slider > Farben > Pfeile-Navigation Farbe:hover (
zen-product-slider-controls-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe (
zen-category-listing-slider-controls-color
)#ffffff
=>$sw-text-color
Elemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe:hover (
zen-category-listing-slider-controls-hover-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Paginierung > Farben > Text (
zen-pagination-color
)$sw-color-brand-primary
=>$sw-text-color
Elemente > Paginierung > Farben > Text:hover (
zen-pagination-hover-color
)darken($sw-color-brand-primary, 15%)
=>$sw-text-color
Elemente > Paginierung > Farben > Text:active (
zen-pagination-active-color
)#ffffff
=>$sw-text-color
Elemente > Breadcrumbs > Farben > Text:hover (
zen-breadcrumbs-hover-color
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 45%)
Kategorie > Filter > Farben > Text:hover (
zen-category-filter-hover-color
)#ffffff
=>$sw-text-color
Kategorie > Filter > Farben > Text:active (
zen-category-filter-active-color
)#ffffff
=>$sw-text-color
Produkt > Details > Produkt Konfigurator > Text:hover (
zen-product-configurator-hover-color
)#ffffff
=>$sw-text-color
Produkt > Beschreibung Navigation > Farben > Text:hover (
zen-product-tabs-hover-color
)#ffffff
=>$sw-text-color
Theme Gravity - Set 1
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)2
=>4.5
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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%)
Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color
)$sw-border-color
=>#818faa
Theme Gravity - Set 2
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#F2CB05
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#EA003A
=>#ea003a
Typografie & Farben > Buttons > Farben > Dunkler 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 > Farben > Text:hover (
zen-footer-hover-color
)darken($sw-color-brand-secondary, 20%)
=>darken($sw-color-brand-secondary, 30%)
Footer > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color
)darken($sw-color-brand-secondary, 20%)
=>darken($sw-color-brand-secondary, 30%)
Footer > Spalten Styling > Social-Media Spalte > Text:hover (
zen-footer-social-column-hover-color
)darken($sw-color-brand-secondary, 20%)
=>darken($sw-color-brand-secondary, 30%)
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)darken($sw-color-brand-secondary, 20%)
=>darken($sw-color-brand-secondary, 30%)
Elemente > Formulare > Farben > Hintergrund:focus (
zen-input-focus-bg
)#ffffff
=>#f6f7f9
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)#f6f7f9
=>darken($sw-border-color, 32%)
Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color
)$sw-border-color
=>$sw-color-brand-primary
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (
zen-base-slider-controls-dots-outside-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots:hover (
zen-base-slider-controls-dots-outside-hover-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (
zen-base-slider-controls-dots-inside-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (
zen-image-slider-controls-dots-outside-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots:hover (
zen-image-slider-controls-dots-outside-hover-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (
zen-image-slider-controls-dots-inside-color
)$sw-border-color
=>$sw-text-color
Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color
)$sw-border-color
=>$sw-text-color
Kategorie > Produkt-Boxen > Produktname > Text:hover (
zen-product-listing-card-name-hover-color
)$sw-color-brand-secondary
=>$sw-text-color
Theme Horizon - Set 1
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#e8e7e8
=>#444444
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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%)
Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color
)$sw-color-brand-primary
=>lighten($sw-border-color, 35%)
Theme Horizon - Set 2
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#dee3e9
=>#7e91a9
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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%)
Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color
)lighten(desaturate($sw-color-brand-primary, 69%), 60%)
=>darken($sw-border-color, 35%)
Theme Horizon - Set 3
Typografie & Farben > Buttons > Farben > Dunkler 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 > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)lighten($sw-border-color, 4%)
=>darken($sw-border-color, 33%)
Footer > Spalten Styling > Newsletter Spalte > Form border:focus (
zen-footer-newsletter-field-focus-border
)$sw-border-color
=>$sw-text-color
Elemente > Formulare > Farben > Hintergrund:focus (
zen-input-focus-bg
)#ffffff
=>lighten($sw-border-color, 4%)
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)$sw-border-color
=>darken($sw-border-color, 33%)
Theme Sphere - Set 1
Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary
)#c5ab7e
=>#90723f
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#CED4D9
=>#7f8e97
Typografie & Farben > Theme-Farben > Farben > Link-Farbe (
zen-link-color
)$sw-color-brand-primary
=>$sw-color-brand-secondary
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color
)#777777
=>#6f6f6f
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Farben > Text:hover (
zen-top-bar-hover-color
)$sw-color-brand-secondary
=>lighten($sw-color-brand-secondary, 15%)
Header > Flyout Navigation > Farben > Hintergrund (
zen-flyout-navigation-bg
)rgba($sw-color-brand-primary, 90%)
=>rgba($sw-color-brand-primary, 95%)
Header > Flyout Navigation > Farben > Text:hover (
zen-flyout-navigation-hover-color
)$sw-color-brand-secondary
=>#ffffff
Footer > Footer > Farben > Text:hover (
zen-footer-hover-color
)$sw-color-brand-secondary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)$sw-color-brand-secondary
=>lighten($sw-color-brand-primary, 50%)
Footer > Spalten Styling > Newsletter Spalte > Form border:focus (
zen-footer-newsletter-field-focus-border
)$sw-color-brand-primary
=>#ffffff
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Spalten Styling > Custom Spalte 2 > Text:hover (
zen-footer-custom-2-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Spalten Styling > Custom Spalte 3 > Text:hover (
zen-footer-custom-3-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (
zen-footer-payment-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Spalten Styling > Versandarten Spalte > Text:hover (
zen-footer-shipping-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-secondary, 15%)
Footer > Unterer Footer > Farben > Text:hover (
zen-footer-bottom-hover-color
)$sw-color-brand-secondary
=>lighten($sw-color-brand-secondary, 15%)
Elemente > Sidebar navigation > Farben > Hintergrund (
zen-sidebar-navigation-bg
)transparent
=>#ffffff
Elemente > Sidebar navigation > Farben > Hintergrund:hover (
zen-sidebar-navigation-hover-bg
)#ffffff
=>$sw-color-brand-primary
Elemente > Sidebar navigation > Farben > Text:hover (
zen-sidebar-navigation-hover-color
)$sw-color-brand-secondary
=>#ffffff
Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (
zen-sidebar-navigation-active-bg
)#ffffff
=>lighten($sw-color-brand-primary, 15%)
Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (
zen-sidebar-navigation-active-color
)$sw-headline-color
=>#ffffff
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (
zen-base-slider-controls-inside-bg
)transparent
=>$sw-color-brand-primary
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (
zen-base-slider-controls-inside-hover-bg
)transparent
=>$sw-color-brand-secondary
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-inside-color
)$sw-border-color
=>#ffffff
Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-inside-hover-color
)$sw-color-brand-secondary
=>#ffffff
Elemente > Paginierung > Farben > Hintergrund:hover (
zen-pagination-hover-bg
)hsl(hue($sw-border-color), saturation($sw-border-color), 93%)
=>lighten($sw-color-brand-primary, 10%)
Elemente > Paginierung > Farben > Text:hover (
zen-pagination-hover-color
)darken($sw-color-brand-primary, 15%)
=>#ffffff
Kategorie > Filter > Farben > Hintergrund:hover (
zen-category-filter-hover-bg
)#ebedef
=>#ffffff
Kategorie > Filter > Farben > Text:hover (
zen-category-filter-hover-color
)$sw-text-color
=>$sw-color-brand-secondary
Kategorie > Produkt-Boxen > Produktbeschreibung > Text (
zen-product-listing-card-description-color
)lighten($sw-text-color, 10%)
=>$sw-text-color
Theme Sphere - Set 2
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#F2CB05
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#EA003A
=>#ea003a
Typografie & Farben > Buttons > Farben > Dunkler 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 > Spalten Styling > Newsletter Spalte > Form border:focus (
zen-footer-newsletter-field-focus-border
)darken($sw-color-brand-primary, 10%)
=>$sw-color-brand-secondary
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)lighten($sw-border-color, 5%)
=>darken($sw-border-color, 30%)
Theme Stratus - Set 1
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)3
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#F46036
=>#e03403
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#e8e7e8
=>#958c95
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Rahmen unten (
zen-header-minimal-border-bottom
)True
=>False
Footer > Spalten Styling > Newsletter Spalte > Hintergrund (
zen-footer-newsletter-column-bg
)darken($sw-color-brand-secondary, 10%)
=>#212121
Elemente > Sidebar navigation > Farben > Hintergrund:hover (
zen-sidebar-navigation-hover-bg
)darken($sw-color-brand-primary, 5%)
=>darken($sw-border-color, 25%)
Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (
zen-sidebar-navigation-active-bg
)$sw-color-brand-primary
=>darken($sw-border-color, 15%)
Theme Stratus - Set 2
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)3
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#FF463D
=>#e4281f
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color
)#6d6d6d
=>#4a4a4a
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Suche > Farben > Rahmen (
zen-search-border
)darken($sw-color-brand-secondary, 10%)
=>$sw-border-color
Header > Top Bar > Farben > Text:hover (
zen-top-bar-hover-color
)$sw-text-color
=>#ffffff
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (
zen-shop-navigation-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (
zen-shop-navigation-cart-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Footer > Farben > Text:hover (
zen-footer-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Social-Media Spalte > Text:hover (
zen-footer-social-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Custom Spalte 2 > Text:hover (
zen-footer-custom-2-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Custom Spalte 3 > Text:hover (
zen-footer-custom-3-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (
zen-footer-payment-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Spalten Styling > Versandarten Spalte > Text:hover (
zen-footer-shipping-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 12%)
Footer > Unterer Footer > Farben > Text:hover (
zen-footer-bottom-hover-color
)darken($sw-color-brand-primary, 10%)
=>#ffffff
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)$sw-border-color
=>darken($sw-border-color, 33%)
Theme Stratus - Set 3
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)2.5
=>4.5
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color
)#e8e7e8
=>#989398
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 (Suche, Merkzettel, Konto, Warenkorb) > Farben > Hintergrund (
zen-shop-navigation-bg
)$sw-color-brand-secondary
=>$sw-color-brand-primary
Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Hintergrund:hover (
zen-shop-navigation-hover-bg
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 5%)
Header > Flyout Navigation > Farben > Hintergrund (
zen-flyout-navigation-bg
)rgba($sw-color-brand-secondary, 90%)
=>rgba($sw-color-brand-secondary, 95%)
Header > Flyout Navigation > Farben > Text:hover (
zen-flyout-navigation-hover-color
)$sw-color-brand-primary
=>$zen-light-text-color
Footer > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Social-Media Spalte > Text:hover (
zen-footer-social-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Custom Spalte 2 > Text:hover (
zen-footer-custom-2-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Custom Spalte 3 > Text:hover (
zen-footer-custom-3-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (
zen-footer-payment-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Spalten Styling > Versandarten Spalte > Text:hover (
zen-footer-shipping-logos-column-hover-color
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 15%)
Footer > Unterer Footer > Farben > Text:hover (
zen-footer-bottom-hover-color
)darken($sw-color-brand-primary, 10%)
=>lighten($sw-color-brand-primary, 15%)
Kategorie > Produkt-Boxen > Produktbeschreibung > Text (
zen-product-listing-card-description-color
)lighten($sw-color-price, 20%)
=>$sw-text-color
Produkt > Beschreibung Navigation > Farben > [!] Hintergrund / Unterstrich:hover (
zen-product-tabs-hover-bg
)$sw-color-brand-primary
=>darken($sw-color-brand-primary, 50%)
Theme Stratus - Set 4
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio
)2.5
=>4.5
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary
)#909986
=>#67705d
Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success
)#3cc261
=>#007e4e
Typografie & Farben > Status-Ausgaben > > Information (
sw-color-info
)#26b6cf
=>#005b99
Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning
)#ffbd5d
=>#9b6a08
Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger
)#e52427
=>#c20017
Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color
)#6d6d6d
=>#4a4a4a
Typografie & Farben > Typografie > Farben > Dunkle Überschriftfarbe (
sw-headline-color
)#bab4ab
=>$sw-color-brand-secondary
Typografie & Farben > Buttons > Farben > Heller 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%)
Typografie & Farben > Buttons > Farben > Dunkler 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 > Suche > Farben > Rahmen (
zen-search-border
)$sw-border-color
=>darken($sw-border-color, 30%)
Header > Suche > Farben > [!] Rahmen:focus (
zen-search-focus-border
)$sw-border-color
=>darken($sw-border-color, 30%)
Header > Flyout Navigation > Farben > Hintergrund (
zen-flyout-navigation-bg
)rgba($sw-color-brand-primary, 90%)
=>rgba(darken($sw-color-brand-primary, 5%), 90%)
Header > Flyout Navigation > Farben > Text:hover (
zen-flyout-navigation-hover-color
)$sw-color-brand-secondary
=>#ffffff
Footer > Footer > Farben > Text:hover (
zen-footer-hover-color
)$sw-color-brand-primary
=>#ffffff
Footer > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color
)$sw-color-brand-primary
=>#ffffff
Footer > Spalten Styling > Social-Media Spalte > Text:hover (
zen-footer-social-column-hover-color
)$sw-color-brand-primary
=>#ffffff
Footer > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border
)$sw-color-brand-primary
=>lighten($sw-color-brand-primary, 17%)
Footer > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color
)$sw-color-brand-primary
=>#ffffff
Elemente > Formulare > Farben > Rahmen (
zen-input-border-color
)#f2efeb
=>darken($sw-border-color, 33%)
Kategorie > Produkt-Boxen > Produktbeschreibung > Text (
zen-product-listing-card-description-color
)lighten($sw-color-price, 20%)
=>$sw-text-color
Entfernte Theme-Variablen
Im Zuge der Barrierefreiheitsmaßnahmen wurden folgende Theme-Variablen entfernt:
zen-checkout-confirm-payment-shipping-description-length
Gibt an, wie viele Zeichen bei den Beschreibungen der Zahlungs- und Versandarten angezeigt werden.zen-checkout-confirm-visible-payment-methods-limit
Gibt an, wie viele Zahlungsmethoden sichtbar sind. Weitere sind über „Mehr anzeigen“ erreichbar.zen-checkout-confirm-visible-shipping-methods-limit
Gibt an, wie viele Versandarten sichtbar sind. Weitere sind über „Mehr anzeigen“ erreichbar.
Weitere:
Die Einstellung zum Dropdown-Auslöser zen-dropdown-navigation-trigger
wurde entfernt, da sie im neuen Header-Konzept nicht mehr benötigt wird.
ESI für Header und Footer
Mit Shopware 6.7 wurde ESI (Edge Side Includes) für Header und Footer eingeführt. Dadurch werden Header und Footer deines Shops nun schneller geladen und effizienter im Cache gespeichert. Beide Bereiche wurden vollständig überarbeitet:
Neuer Header-Aufbau (Storefront - Header/Navbar Refactoring)
Neuer Footer-Aufbau (Storefront - Footer Refactoring)
Allgemeiner Hinweis zu Child-Themes
Wenn du ein Child-Theme nutzt, liegt es in deiner Verantwortung, eigene Code-Anpassungen zu überprüfen und ggf. zu überarbeiten.
Last updated
Was this helpful?