Header section

There are three navigation menu arrangement types in the Viola theme’s header section.

1. Logo left, menu center

2. Logo left, menu bottom

Default header

3. Logo center, menu bottom

4. Logo center, menu left

The header customizations are as follows:

Setting
Description

Layout

Customization of logo position in the header section is as follows:

  • Logo left, menu center

  • Logo left, menu bottom

  • Logo center, menu bottom

  • Logo left, menu left

Color scheme

In this section, you can change the background color of a section using the color scheme.

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Logo image

Use "Logo image" to add an image in the Header.

Desktop logo width

Use "Desktop logo width" to customize the logo size in the header section. You can set a Minimum width "50px" and a maximum width "250px" can be given.

Mobile logo

If you want to add a separate logo for mobile devices, add a logo here.

Mobile logo width

Use "Mobile logo width" to customize the logo size in the mobile devices in the header section. You can set a minimum width "50px" and a maximum width "170px" can be given.

Search

Button type Customization of search button type in the header section is as follows:

  • Search icon

  • Search label

Account

Customization of account icon and text in the header section is as follows:

  • Account icon

  • Account icon with text

Menu

Show submenu in dropdown format By enabling this checkbox, you can see submenu in dropdown format. This feature not applicable when megemenu blocks enabled.

Customization of 'Submenu dropdown open from' in the header section is as follows:

  • Left

  • Right

Color scheme

In this section, you can change the background color of the section using the color scheme:

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Menu dropdown color

In this section, you can change the background color of the dropdown using the color scheme:

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Menu

Click on "Select menu" to add a menu in the header section.

Secondary menu

Click on "Secondary menu" to add a secondary menu in the header section.

Icon with text

Add extra information text about your store:

  • Icon

  • Text

  • Link

Sticky header

Customization of Sticky header in the header section is as follows:

  • None

  • On scroll up

  • Always

  • Always, reduce logo size

Last updated