ThemeWare® Modern design update

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.

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.

Schritt 1) Layout

n 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. Background colour: #ffffff => rgba(255, 255, 255, 0)
      4. Background colour @hover: #f6f6f6 => rgba(255, 255, 255, 0)
   4. Cart button
      1. Show price from...: Tablet (Querformat) (≥992px) => nicht anzeigen
      2. Show label from...: Tablet (Hochformat) (≥768px) => nicht anzeigen
      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)