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.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#D9AB98=>#b16141Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary)#333333=>#222222Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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, 34%)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.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#e87d00=>#aa5c00Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#e8e7e8=>#8d8d8dTypografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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=>#ffffffElemente > Sidebar navigation > Farben > Rahmen (
zen-sidebar-navigation-border-color)$sw-color-brand-primary=>$sw-border-colorElemente > Formulare > Farben > Rahmen (
zen-input-border-color)$sw-border-color=>darken($sw-border-color, 38%)Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (
zen-base-slider-controls-inside-bg)transparent=>$sw-color-brand-primaryElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (
zen-base-slider-controls-inside-hover-bg)transparent=>$sw-color-brand-primaryElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-inside-color)$sw-text-color=>#ffffffElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary=>#ffffffElemente > Paginierung > Farben > Hintergrund:hover (
zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%)=>$sw-color-brand-primaryElemente > Paginierung > Farben > Text:hover (
zen-pagination-hover-color)darken($sw-color-brand-primary, 15%)=>#ffffffProdukt > Beschreibung Navigation > Farben > [!] Hintergrund / Unterstrich (
zen-product-tabs-bg)$sw-border-color=>transparentProdukt > 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.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#e54924=>#a55a01Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#e8e7e8=>#404346Typografie & Farben > Theme-Farben > Farben > [!] Meta Theme-Farbe (
zen-meta-theme-color)#ffffff=>#161718Typografie & 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=>#ff4143Typografie & 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)lighten($sw-color-brand-secondary, 10%)=>lighten($sw-color-brand-secondary, 50%)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=>#ffffffFooter > 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%)=>#ffffffFooter > Spalten Styling > Newsletter Spalte > [!] Form Hintergrund:focus (
zen-footer-newsletter-field-focus-bg)$sw-color-brand-secondary=>#ffffffFooter > Spalten Styling > Newsletter Spalte > Form text (
zen-footer-newsletter-field-color)#ffffff=>$sw-text-colorFooter > Spalten Styling > Newsletter Spalte > Form border (
zen-footer-newsletter-field-border)darken($sw-color-brand-secondary, 10%)=>#ffffffFooter > 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=>0Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio)1=>4.5Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary)#676460=>#5d5c57Typografie & 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=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color)#6d6d6d=>#111111Typografie & 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=>#000000Header > 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-colorHeader > Dropdown Navigation > Farben > Text:hover (
zen-dropdown-navigation-hover-color)#ffffff=>$sw-text-colorFooter > Footer > Farben > Text (
zen-footer-color)#ffffff=>$sw-text-colorFooter > Spalten Styling > Hotline Spalte > Text (
zen-footer-hotline-column-color)#ffffff=>$sw-text-colorFooter > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Spalten Styling > Custom Spalte 1 > Text:hover (
zen-footer-custom-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Spalten Styling > Custom Spalte 2 > Text:hover (
zen-footer-custom-2-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Spalten Styling > Custom Spalte 3 > Text:hover (
zen-footer-custom-3-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Spalten Styling > Zahlungsarten Spalte > Text:hover (
zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary=>$sw-text-colorFooter > Spalten Styling > Versandarten Spalte > Text:hover (
zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary=>$sw-text-colorElemente > Sidebar navigation > Farben > Text:hover (
zen-sidebar-navigation-hover-color)#ffffff=>$sw-text-colorElemente > Sidebar navigation > Farben > Text:aktiver Pfad (
zen-sidebar-navigation-active-color)#ffffff=>$sw-text-colorElemente > Formulare > Farben > Rahmen (
zen-input-border-color)$sw-border-color=>darken($sw-border-color, 34%)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-colorElemente > 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-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (
zen-base-slider-controls-dots-outside-color)$sw-color-brand-primary=>$sw-text-colorElemente > 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-colorElemente > 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-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (
zen-base-slider-controls-dots-inside-color)$sw-color-brand-primary=>$sw-text-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color)$sw-color-brand-primary=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Pfeile-Navigation Hintergrund (
zen-image-slider-controls-outside-bg)$sw-color-brand-primary=>$sw-text-colorElemente > 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-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (
zen-image-slider-controls-dots-outside-color)$sw-color-brand-primary=>$sw-text-colorElemente > 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-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-image-slider-controls-inside-color)$sw-color-brand-primary=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-image-slider-controls-inside-hover-color)#ffffff=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (
zen-image-slider-controls-dots-inside-color)$sw-color-brand-primary=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color)$sw-color-brand-primary=>$sw-text-colorElemente > Produkt Slider > Farben > Pfeile-Navigation Farbe (
zen-product-slider-controls-color)#ffffff=>$sw-text-colorElemente > Produkt Slider > Farben > Pfeile-Navigation Farbe:hover (
zen-product-slider-controls-hover-color)$sw-color-brand-primary=>$sw-text-colorElemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe (
zen-category-listing-slider-controls-color)#ffffff=>$sw-text-colorElemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe:hover (
zen-category-listing-slider-controls-hover-color)$sw-color-brand-primary=>$sw-text-colorElemente > Paginierung > Farben > Text (
zen-pagination-color)$sw-color-brand-primary=>$sw-text-colorElemente > Paginierung > Farben > Text:hover (
zen-pagination-hover-color)darken($sw-color-brand-primary, 15%)=>$sw-text-colorElemente > Paginierung > Farben > Text:active (
zen-pagination-active-color)#ffffff=>$sw-text-colorElemente > 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-colorKategorie > Filter > Farben > Text:active (
zen-category-filter-active-color)#ffffff=>$sw-text-colorProdukt > Details > Produkt Konfigurator > Text:hover (
zen-product-configurator-hover-color)#ffffff=>$sw-text-colorProdukt > 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.5Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#F2CB05=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#EA003A=>#ea003aTypografie & 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=>#f6f7f9Elemente > 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=>darken($sw-border-color, 42%)Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (
zen-base-slider-controls-dots-outside-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots:hover (
zen-base-slider-controls-dots-outside-hover-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (
zen-base-slider-controls-dots-inside-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (
zen-base-slider-controls-dots-inside-hover-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (
zen-image-slider-controls-dots-outside-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots:hover (
zen-image-slider-controls-dots-outside-hover-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (
zen-image-slider-controls-dots-inside-color)$sw-border-color=>$sw-text-colorElemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (
zen-image-slider-controls-dots-inside-hover-color)$sw-border-color=>$sw-text-colorKategorie > Produkt-Boxen > Produktname > Text:hover (
zen-product-listing-card-name-hover-color)$sw-color-brand-secondary=>$sw-text-colorKategorie > Produkt-Boxen > Artikelnummer > Text:hover (
zen-product-listing-card-ordernumber-color)#999999=>#767676
Theme Horizon - Set 1
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#e8e7e8=>#444444Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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%)Product > Beschreibung Navigation > Farben > Text (
zen-product-tabs-color)lighten($sw-text-color, 70%)=>lighten($sw-text-color, 45%)
Theme Horizon - Set 2
Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#dee3e9=>#7e91a9Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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%)Elemente > Paginierung > Farben > Hintergrund: (
zen-pagination-bg)lighten($sw-border-color, 5%)=>lighten($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%)Header > Main Navigation (Kategorien) > Farben > Text:hover (
zen-main-navigation-hover-color)$sw-color-brand-primary=>darken($sw-color-brand-primary, 35%)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-colorElemente > 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, 35%)Elemente > Formulare > Farben > Rahmen:focus (
zen-input-focus-border-color)darken($sw-border-color, 35%)=>$sw-color-brand-primary
Theme Sphere - Set 1
Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (
sw-color-brand-secondary)#c5ab7e=>#856b40Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#CED4D9=>#7f8e97Typografie & Farben > Theme-Farben > Farben > Link-Farbe (
zen-link-color)$sw-color-brand-primary=>$sw-color-brand-secondaryTypografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color)#777777=>#6f6f6fTypografie & 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=>#ffffffFooter > 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=>#ffffffFooter > 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=>#ffffffElemente > Sidebar navigation > Farben > Hintergrund:hover (
zen-sidebar-navigation-hover-bg)#ffffff=>$sw-color-brand-primaryElemente > Sidebar navigation > Farben > Text:hover (
zen-sidebar-navigation-hover-color)$sw-color-brand-secondary=>#ffffffElemente > 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=>#ffffffElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (
zen-base-slider-controls-inside-bg)transparent=>$sw-color-brand-primaryElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (
zen-base-slider-controls-inside-hover-bg)transparent=>$sw-color-brand-secondaryElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (
zen-base-slider-controls-inside-color)$sw-border-color=>#ffffffElemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (
zen-base-slider-controls-inside-hover-color)$sw-color-brand-secondary=>#ffffffElemente > 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%)=>#ffffffKategorie > Filter > Farben > Hintergrund:hover (
zen-category-filter-hover-bg)#ebedef=>#ffffffKategorie > Filter > Farben > Text:hover (
zen-category-filter-hover-color)$sw-text-color=>$sw-color-brand-secondaryKategorie > 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=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#F2CB05=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#EA003A=>#ea003aTypografie & 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-secondaryElemente > 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.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#F46036=>#d1380dTypografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#e8e7e8=>#958c95Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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=>FalseHeader > Top Bar > Farben > Hintergrund:hover (
zen-top-bar-hover-bg)$sw-brand-color-secondary=>#ffffffFooter > Spalten Styling > Newsletter Spalte > Hintergrund (
zen-footer-newsletter-column-bg)darken($sw-color-brand-secondary, 10%)=>#212121Elemente > Sidebar navigation > Farben > Hintergrund:hover (
zen-sidebar-navigation-hover-bg)darken($sw-color-brand-primary, 5%)=>darken($sw-border-color, 55%)Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (
zen-sidebar-navigation-active-bg)$sw-color-brand-primary=>darken($sw-border-color, 45%)Elemente > Formulare > Farben > Rahmen (
zen-input-border-color)$sw-border-color=>darken($sw-border-color, 35%)
Theme Stratus - Set 2
Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio)3=>4.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#FF463D=>#e4281fTypografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color)#6d6d6d=>#4a4a4aTypografie & 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-colorHeader > Top Bar > Farben > Text:hover (
zen-top-bar-hover-color)$sw-text-color=>#ffffffHeader > 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%)=>#ffffffElemente > Formulare > Farben > Rahmen (
zen-input-border-color)$sw-border-color=>darken($sw-border-color, 33%)
Theme Stratus - Set 3
Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#a99186=>#8f7062Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (
zen-min-contrast-ratio)2.5=>4.5Typografie & Farben > Theme-Farben > Farben > Rahmen (
sw-border-color)#e8e7e8=>#989398Typografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & 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-primaryHeader > 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-colorFooter > 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-colorProdukt > 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.5Typografie & Farben > Theme-Farben > Farben > Primärfarbe (
sw-color-brand-primary)#909986=>#67705dTypografie & Farben > Status-Ausgaben > > Erfolg (
sw-color-success)#3cc261=>#007e4eTypografie & Farben > Status-Ausgaben > > Information (
sw-color-info)#26b6cf=>#005b99Typografie & Farben > Status-Ausgaben > > Hinweis (
sw-color-warning)#ffbd5d=>#9b6a08Typografie & Farben > Status-Ausgaben > > Fehler (
sw-color-danger)#e52427=>#c20017Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (
sw-text-color)#6d6d6d=>#4a4a4aTypografie & Farben > Typografie > Farben > Dunkle Überschriftfarbe (
sw-headline-color)#bab4ab=>$sw-color-brand-secondaryTypografie & 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=>#ffffffFooter > Footer > Farben > Text:hover (
zen-footer-hover-color)$sw-color-brand-primary=>#ffffffFooter > Spalten Styling > Hotline Spalte > Text:hover (
zen-footer-hotline-column-hover-color)$sw-color-brand-primary=>#ffffffFooter > Spalten Styling > Social-Media Spalte > Text:hover (
zen-footer-social-column-hover-color)$sw-color-brand-primary=>#ffffffFooter > 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=>#ffffffElemente > 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
👉 Detaillierte Informationen zur Barrierefreiheit in unserem Theme findest du in unserem Beitrag zur Barrierefreiheit.
Entfernte Theme-Variablen
Im Zuge der Barrierefreiheitsmaßnahmen wurden folgende Theme-Variablen entfernt:
zen-checkout-confirm-payment-shipping-description-lengthGibt an, wie viele Zeichen bei den Beschreibungen der Zahlungs- und Versandarten angezeigt werden.zen-checkout-confirm-visible-payment-methods-limitGibt an, wie viele Zahlungsmethoden sichtbar sind. Weitere sind über „Mehr anzeigen“ erreichbar.zen-checkout-confirm-visible-shipping-methods-limitGibt 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)
Weitere Infos dazu findest du im offiziellen Shopware Upgrade Guide: Link zur Doku
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.
📘 Offizieller Shopware Upgrade Guide: https://github.com/shopware/shopware/blob/trunk/UPGRADE-6.7.md
Last updated
Was this helpful?