ThemeWare® Modern Design-Update

Wie du vielleicht bemerkt hast, lag unser Fokus in den letzten Monaten – neben wichtigen Meilensteinen wie Zusatzfeldern, Erlebniswelten und dem Custom-Header – vor allem im Bereich "Design". Damit du sofort von den wichtigsten Verbesserungen profitieren kannst, haben wir uns entschieden mit ThemeWare® 1.0 ein Design-Update für unser ThemeWare® Modern zu veröffentlichen.

Wichtig: Trotz unserer einfachen Anleitung empfehlen wir dir das Update entweder erst in einer Testumgebung oder Anfang Januar durchzuführen, da wir wie gewohnt zwischen den Jahren Betriebsferien haben.

Änderungen Schritt für Schritt

Im folgenden findest du alle Änderungen. Jeder Schritt thematisiert einen entsprechenden Tab den du prüfen solltest. Unterstrichen haben wir die Sektionen. Die Konfigurationsfelder sind fett geschrieben. Zu jedem Konfigurationsfeld findest du den Ursprungswert und den neuen Wert ("vorher" => "nachher").

Möchtest du vom Design-Update profitieren, prüfe alle Konfigurationsfelder, ob die "nachher"-Werte konfiguriert sind. Soll dein Layout weiterhin bestehen bleiben, prüfe alle Konfigurationsfelder, ob die "vorher"-Werte konfiguriert sind.

Hinweis: Bereits von dir vorgenommene Änderungen an der Konfiguration sind von Updates nicht betroffen, du musst dann natürlich nicht den "nachher"-Wert übernehmen. Die Primärfarbe ist dafür ein gutes Beispiel.

Schritt 1) Layout

Im Tab "Layout" wurde die Primärfarbe aufgefrischt. In den meisten Fälle ist dies die erste Einstellung die geändert wird, daher musst du hier wahrscheinlich nichts weiter machen.

1. Hauptfarben
   1. Primärfarbe: #135d84 => #0c7ebb
   2. Primärfarbe (Hell): #166d9a => #2a96cf

Schritt 2) Header

Die meisten Änderungen gab es im Header. Diese Änderungen basieren auf unserem neuen, modernen und oft nachgefragten Custom-Header.

1. Layout
   1. Basiskonfiguration
      1. Darstellungsart: Header 1.1 => Full-Width Sticky-Header
      2. Innenabstand unten: 20 => 10
2. Top-Bar
   1. Top-Bar anzeigen: anzeigen => nicht anzeigen
   2. Farbkonfiguration
      1. Rahmenfarbe: #ffffff => rgba(255, 255, 255, 0)
      2. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
3. Suche
   1. Basiskonfiguration
      1. Breite @Desktop (≥1200px): 100% => 1100px
      2. Darstellungsart: Eingabefeld (Standard) => Flyout-Suche
   2. Farbkonfiguration
      1. Hintergrundfarbe (Flyout-Suche): #0e557b => #eef2f5
   3. Typografie
      1. Textausrichtung: links ausrichten => zentriert ausrichten
4. Aktions-Buttons
   1. Basiskonfiguration
      1. Text anzeigen ab ...: Tablet (Hochformat) (≥768px) => nicht anzeigen
   2. Typografie
      1. Icongröße: 14 => 24
   3. Farbkonfiguration
      1. Rahmenfarbe: #e4e7ea => rgba(255, 255, 255, 0)
      2. Rahmenfarbe @hover: #e6e6e6 => rgba(255, 255, 255, 0)
      3. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
      4. Hintergrundfarbe @hover: #f6f6f6 => rgba(255, 255, 255, 0)
   4. Warenkorb-Button
      1. Preis anzeigen ab ...: Tablet (Querformat) (≥992px) => nicht anzeigen
      2. Text anzeigen ab ...: Tablet (Hochformat) (≥768px) => nicht anzeigen
      3. Rahmenfarbe: #e4e7ea => rgba(255, 255, 255, 0)
      4. Rahmenfarbe @hover: #e6e6e6 => rgba(255, 255, 255, 0)
      5. Hintergrundfarbe: #eef2f5 => rgba(255, 255, 255, 0)
      6. Hintergrundfarbe @hover: #ffffff => rgba(255, 255, 255, 0)
5. Top-Navigation Flyout
   1. Basiskonfiguration
      1. Animation: keine Animation (Standard) => fade In
   2. Level 2, 3 ...
      1. Schriftgröße: 18 => 16
6. Mobiler Header
   1. Aktions-Buttons
      1. Rahmenfarbe: #ffffff => rgba(255, 255, 255, 0)
      2. Rahmenfarbe @hover: #ffffff => rgba(255, 255, 255, 0)
      3. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
      4. Hintergrundfarbe @hover: #ffffff => rgba(255, 255, 255, 0)

Schritt 3) Erlebniswelten

Im Tab "Erlebniswelten" wurden zwei kleine Änderungen vorgenommen. Das Modern bekommt nun von Haus aus eine Scroll-Animation für CMS-Blöcke und der Produkt-Slider wird aufgehübscht.

1. Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)
   1. CSS-Scroll-Animationen
      1. CSS-Scroll-Animation (CMS-Blöcke): keine => fade in
2. Produkt-Slider (Kategorie "Commerce")
   1. Individuelles Styling: nicht verwenden (Standard) => individuelles Styling verwenden
   2. Pfeile-Navigation (Individuelles Styling)
      1. Darstellungsart: Rechteck (Standard) => Quadrat/Kreis
      2. Ecken: abgerundete Ecken (Standard) => nicht abgerundet
      3. Rahmenfarbe: transparent => #eeeeee
      4. Hintergrundfarbe: transparent => #eeeeee
      5. Textfarbe @hover: $sw-color-brand-secondary => #ffffff
   3. Produktbild
      1. Hintergrundfarbe: #f7f7f7 => #ffffff

Schritt 4) Kategorieseiten

Im Tab "Kategorieseiten" wurde die Produkt-Box moderner gestaltet.

1. Produkt-Box
   1. Basiskonfiguration
      1. Hover-Effekt auf Slider anwenden: nein => ja
      2. Textausrichtung: zentriert ausrichten => links ausrichten
   2. Farbkonfiguration
      1. Rahmenfarbe @hover: #008490 => #eeeee
      2. Hintergrundfarbe @hover: #f7f7f7 => #ffffff
   3. Produktbild
      1. Hover-Effekt: Bild vergrößern => Hover-Bild überblenden

Schritt 5) Erweiterungen

Im Tab "Erweiterungen" gibt es eine letzte Änderung um die Top-Bar in die USP-Bar zu verschieben.

1. USP-Bar
   1. Basiskonfiguration
      1. Darstellungsart (Header): kleine Icons => kleine Icons + Top-Bar
      2. Breite (Header): Container-max-width (Full-width-boxed) => 100% (Full-width)