#2219 ThemeWare® Modern Design-Update 2021

As you may have noticed, our focus in the last few months – apart from important milestones such as custom fields, shopping experiences and the custom header – has been primarily on the area of "design". So that you can benefit immediately from the most important improvements, we have decided to publish a design update for our ThemeWare® Modern with ThemeWare® 1.0.


DE: Die deutsche Version finden Sie hier.


Important: Despite our instructions, we recommend that you carry out the update either in a test environment or at the beginning of January, as we have our regular company holidays between the years.



Changes step by step

Below you will find all the changes. Each step has a corresponding tab in the theme configuration that you should check. The sections are underlined. The changed configuration fields are written bold. For each configuration field you will find the original value and the new value ("before" => "after").


If you want to benefit from the design update, check all configuration fields to see if the "after" values are configured. If you want to keep your layout, check all configuration fields to see if the "before" values are configured.


Note: Changes you have already made to the configuration are not affected by updates; in this case you do not have to adopt the "after" value. The primary colour is a good example of this.


Step 1) Layout

In the "Layout" tab, the primary colour has been refreshed. In most cases, this is the first setting to be changed, so you probably don't need to do anything here.

  1. Main colours
    1. Primary colour: #135d84 => #0c7ebb
    2. Primary colour (light): #166d9a => #2a96cf

Step 2) Header

Most of the changes were made in the header. These changes are based on our new, modern and often requested custom header.

  1. Layout
    1. Basic configuration
      1. Layout type: 'Header 1.1' => 'Full width sticky header'
      2. Padding bottom: 20 => 10
  2. Top bar
    1. Show top bar: 'show' => 'don't show'
    2. Colour configuration
      1. Border colour: #ffffff => rgba(255, 255, 255, 0)
      2. Background colour: #ffffff => rgba(255, 255, 255, 0)
  3. Search
    1. Basic configuration
      1. Width @Desktop (≥1200px): 100% => 1100px
      2. Layout type: 'Input (default)' => 'Flyout search'
    2. Colour configuration
      1. Background colour (Flyout search): #0e557b => #eef2f5
    3. Typography
      1. Text alignment: 'align left' => 'align center'
  4. Action buttons
    1. Basic configuration
      1. Show label from...: "Tablet (portrait) (≥768px)" => "don't show"
    2. Typography
      1. Icon size: 14 => 24
    3. Colour configuration
      1. Border colour: #e4e7ea => rgba(255, 255, 255, 0)
      2. Border colour @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. Cart button
      1. Show price from...: 'Tablet (landscape) (≥992px)' => 'don't show'
      2. Show label from...: 'Tablet (landscape) (≥768px)' => 'don't show'
      3. Border colour: #e4e7ea => rgba(255, 255, 255, 0)
      4. Border colour @hover: #e6e6e6 => rgba(255, 255, 255, 0)
      5. Background colour: #eef2f5 => rgba(255, 255, 255, 0)
      6. Background colour @hover: #ffffff => rgba(255, 255, 255, 0)
  5. Top navigation flyout
    1. Basic configuration
      1. Animation: 'no animation (default)' => 'fade In'
    2. Level 2, 3...
      1. Font size: 18 => 16
  6. Mobile header
    1. Action buttons
      1. Border colour: #ffffff => rgba(255, 255, 255, 0)
      2. Border colour @hover: #ffffff => rgba(255, 255, 255, 0)
      3. Background colour: #ffffff => rgba(255, 255, 255, 0)
      4. Background colour @hover: #ffffff => rgba(255, 255, 255, 0)

Step 3) Shopping Experiences

Two small changes have been made in the "Shopping Experiences" tab. The Modern theme now has a scroll animation for CMS blocks and the "Product slider" has been spruced up.

  1. All types (Shop pages, Landing pages, Category pages, Product pages)
    1. CSS scroll animations
      1. CSS scroll animation (CMS blocks): 'none' => 'fade in'
  2. Product slider (Category "Commerce")
    1. Individual styling: 'don't use (default)' => 'use individual styling'
    2. Arrow navigation (Individual styling)
      1. Layout type: 'Rectangle (default)' => 'Square/Circle'
      2. Corner type: 'arounded corners (default)' => 'not rounded'
      3. Border colour: 'transparent' => #eeeeee
      4. Background colour: 'transparent' => #eeeeee
      5. Text colour @hover: '$sw-color-brand-secondary' => #ffffff
    3. Product image
      1. Background colour: #f7f7f7 => #ffffff

Step 4) Category pages

In the "Category pages" tab, the "Product box" has been given a more modern design.

  1. Product box
    1. Basic configuration
      1. Apply hover effect to sliders: 'no' => 'yes'
      2. Text alignment: 'align center' => 'align left'
    2. Colour configuration
      1. Border colour @hover: #008490 => #eeeee
      2. Background colour @hover: #f7f7f7 => #ffffff
    3. Product image
      1. Hover effect: 'scale image' => 'crossfade hover image'

Step 5) Extensions

In the tab "Extensions" there is one last change to move the "Top bar" to the "USP bar".

  1. USP bar
    1. Basic configuration
      1. Layout type (Header): 'Small icons' => 'Small icons + Top bar'
      2. Width (Header): 'Container-max-width (Full-width-boxed)' => '100% (Full-width)'



Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

8d8255016d5d3c6974caf49539309298
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

Speichern Cookie-Einstellungen Akzeptieren und Schließen