Header

Adding a Section

The section is static, it is added initially and cannot be removed.

Section settings

General

• Type - the setting allows you to set the header type, 3 options are presented:

• Static

• Sticky

• Sticky (hide on scroll down)

• Enable transparent header on homepage - the setting allows you to enable a transparent header. Transparent header only functions on Desktop resolution. When the setting is enabled, the header will be transparent only in the top position, when hovering and scrolling the page, the header will have a background;

• Enable rounded header - the setting allows you to enable a rounded header;

• Show box shadow - the setting allows you to set a box-shadow;

• Show language selector - the checkbox is responsible for enabling/disabling change a language selector.

• Show country/region selector - the checkbox is responsible for enabling/disabling change a country/region.

• Show full country name - the checkbox is responsible to show full/short country name in the “Country” selector.

Logo

1. Image - the setting allows you to set the logo image, if not specified, the text name of the store will be displayed;

2. Image (transparent header) - the setting allows you to set the logo image for a transparent header, if not specified, the image will be displayed. We recommend using a logo of the same size as the opaque header;

3. Logo width - range with which you can specify the width of the logo from 20px to 200px on the Desktop. On the mobile, if there is not enough space, the logo will automatically shrink;

Menu

• Main menu - the setting allows you to set a menu that will be used for both Desktop and Mobile;

• Desktop position - the setting is responsible for the position of the menu on the Desktop

  • Left

  • Middle

  • Bottom
• Type - the setting allows you to set nested menu type selector for Desktop:

  • both

  • dropdown

  • megamenu
• Open by - the setting allows you to set submenu opening selection selector on Desktop: By hover, By click;

• Highlighted link name - in this field you should specify the name of the menu first level link to which the highlighting should be applied.

Burger menu

• Enable - setting allows you to enable the burger menu. The burger menu will be displayed if “Primary menu” or “Secondary menu” is set;

• Primary menu - the setting allows you to set a primary menu for the burger menu;

• Secondary menu - the setting allows you to set a secondary menu for the burger menu;

• Image - the setting allows you to specify an image;

• Heading - the setting allows you to specify a heading for the image;

• Subheading - the setting allows you to specify a subheading for the image;

• Link - the setting allows you to specify a link for the image.

Colors (Background)

• Background - the setting allows you to set the header background and dropdown menus;

• Background mobile menu - the setting allows you to set the background for the mobile menu;

• Bottom menu background - the setting allows you to set the header bottom menu background (menu desktop position - bottom).

Colors (Border)

• Menu border color - the setting allows you to set the header menu borderd color (used in burger menu, mobile menu if burger menu enabled);

• Bottom menu border color - the setting allows you to set the header bottom menu borderd color (menu desktop position - bottom);

• Botton menu border color (transparent) - the setting allows you to set the header bottom menu borderd color in the transparent header (menu desktop position - bottom).

Colors (Text)

• Text - the setting allows you to set a text color;

• Text (active / hover) - the setting allows you to set a text color for active text elements or on hover state;

• Text background (selected) - the setting allows you to specify a background color for a selected menu item on megamenu;

• Text secondary - the setting allows you to set a secondary text color. Used in bottom menu (menu desktop position - bottom);

• Text secondary (active / hover) - the setting allows you to set a secondary text color for active text elements or on hover state. Used in bottom menu (menu desktop position - bottom);

• Text (header transparent) - the setting allows you to set a text color in the transparent header;

• Text (header transparent)(active) - the setting allows you to set a text color for active text elements in the transparent header;

Colors (Highlighted link)

• Highlighted link color - the setting allows you to specify a text color for the menu first level link specified in the “Highlighted link name” setting.

Colors (Icon)

• Icon - the setting allows you to set a color for the icons;

• Icon (transparent) - the setting allows you to set a color for the icons in the transparent header.

Colors (Count)

• Count text - the setting allows you to set a color for the text of the number of items in the cart;

• Count text (transparent) - the setting allows you to set a color for the text of the number of items in the cart in the transparent header;

• Count background - the setting allows you to set a color for the background of the number of items in the cart;

• Count background (transparent) - the setting allows you to set a color for the background of the number of items in the cart in the transparent header.

Colors (Mega menu image)

• Mega menu image text - the setting allows you to set a color for the image text in the mega menu;

• Mega menu image overlay - the setting allows you to set an overlay color for the first image in the mega menu.

Colors (Burger button)

• Burger button - the setting allows you to set a burger button color;

• Burger button text - the setting allows you to set a burger button text color;

• Burger button (hover) - the setting allows you to set a burger button color on hover state;

• Burger button text (hover) - the setting allows you to set a burger button text color on hover state;

• Burger button (transparent) - the setting allows you to set a burger button color in the transparent header;

• Burger button text (transparent) - the setting allows you to set a burger button text color in the transparent header;

• Bottom burger button - the setting allows you to set a bottom burger button color. Used in bottom menu (menu desktop position - bottom);

• Bottom burger button text - the setting allows you to set a bottom burger button text color. Used in bottom menu (menu desktop position - bottom);

• Bottom burger button (hover) - the setting allows you to set a bottom burger button color on hover state. Used in bottom menu (menu desktop position - bottom);

• Bottom burger button text (hover) - the setting allows you to set a botton burger button text color on hover state. Used in bottom menu (menu desktop position - bottom);

• Burger button close - the setting allows you to set a burger button close color;

• Burger button close text - the setting allows you to set a burger button close text color;

• Burger button close (hover) - the setting allows you to set a burger button close color on hover state;

• Burger button close text (hover) - the setting allows you to set a burger button close text color on hover state;

Colors (Search input)

• Search input - the setting allows you to set a color for search input;

• Search input text- the setting allows you to set a text color for search input;

• Search input (transparent) - the setting allows you to set a color for search input in the transparent header;

• Search input text (transparent) - the setting allows you to set a text color for search input in the transparent header.

Blocks settings

Block Mega menu

General

• Link name - in this field, you must specify the name of the first-level link to which the mega menu should be added. Mega Menu will be displayed if the main menu contains a nested level;

• Menu type - setting allows you to select the type of menu display. There are 2 types:

  • Tabs - in this item, the second menu level is displayed, by clicking on the items of which you can select the 3rd menu level;

  • List - in this item, a menu is naturally displayed, where the second level is the title and the 3rd level is like a list under it. If the second level menu link is set to "#", then the plain text will be displayed;
• Badge text - this setting allows you to add a badge above the menu;

• Badge text color - this setting allows you to set the text color of the badge;

• Badge background color - this setting allows you to set the color background color of the badge;

• Mega menu background - this setting allows you to set the color background color of the mega menu.

Media item 1 / Media item 2

• Image - this setting allows you to set the first image in the mega menu;

• Heading - this setting allows you to set a heading to the first image in the mega menu;

• Subheading - this setting allows you to set a subheading to the first image in the mega menu;

• Link - this setting allows you to set a link to the first image in the mega menu;

• Product - this setting allows you to display a product card. The product has a higher priority than the picture.

Block Mega Menu Split Menu

General

• Link name - in this field, you must specify the name of the first-level link to which the mega menu should be added;

• Badge text - this setting allows you to add a badge above the menu;

• Badge text color - this setting allows you to set the text color of the badge;

• Badge background color - this setting allows you to set the background color of the badge;

• Mega menu background - this setting allows you to set the color background color of the mega menu.

Text side

• Heading - the setting allows you to specify a heading;

• Subheading - the setting allows you to specify a subheading;

• Button label 1 - the setting allows you to specify a label for button 1;

• Button link 1 - the setting allows you to specify a link for button 1;

• Button style 1 - the setting allows you to select a style for button 1;

• Button label 2 - the setting allows you to specify a label for button 2;

• Button link 2 - the setting allows you to specify a link for button 2;

• Button style 2 - the setting allows you to select a style for button 2.

Image side

1. Image - the setting allows you to specify the image;

2. Image link - the setting allows you to specify the link on the image.

Block Mega Menu Tier Menus

General

1. Link name - in this field, you must specify the name of the first-level link to which the mega menu should be added. Mega Menu will be displayed if the main menu contains a nested level;

2. Badge text - this setting allows you to add a badge above the menu;

1. Badge text color - this setting allows you to set the text color of the badge;

2. Badge background color - this setting allows you to set the background color of the badge;

3. Mega menu background - this setting allows you to set the color background color of the mega menu.

Media item 1 / Media item 2

• Image - this setting allows you to set the first image in the mega menu;

• Heading - this setting allows you to set a heading to the first image in the mega menu;

• Subheading - this setting allows you to set a subheading to the first image in the mega menu;

• Link - this setting allows you to set a link to the first image in the mega menu;

• Product - this setting allows you to display a product card. The product has a higher priority than the picture.

Block Mega Menu Media

General

• Link name - in this field, you must specify the name of the first-level link to which the mega menu should be added;

• Badge text - this setting allows you to add a badge above the menu;

• Badge text color - this setting allows you to set the text color of the badge;

• Badge background color - this setting allows you to set the background color of the badge;

• Mega menu background - this setting allows you to set the color background color of the mega menu.

Media item (1-6)

• Image - the setting allows you to specify an image;

• Heading - the setting allows you to specify a heading;

• Subheading - the setting allows you to specify a subheading;

• Link - the setting allows you to specify a link;

• Product - the setting allows you to specify a product. The product has a higher priority than the picture.

Block Mega menu brands

General

The menu of brands will be sorted alphabetically. If the Show alphabet setting is enabled the menu will be grouped by the first character of the menu items without repeats. The filter will also display the first characters of the menu items without repeats.

• Link name - in this field, you must specify the name of the first-level link to which the mega menu should be added. Mega Menu will be displayed if the main menu contains a nested level;

• Burger menu link name name - in this field, you must specify the name of the burger menu first-level link to which the burger menu should be added. Mega Menu will be displayed if the main menu contains a nested level;

• Show alphabet - this setting allows you to enable the filter;

  • enabled

  • disabled
• Badge text - this setting allows you to add a badge above the menu;

• Badge text color - this setting allows you to set the text color of the badge;

• Badge background color - this setting allows you to set the background color of the badge;

• Mega menu background - this setting allows you to set the color background color of the mega menu.

• Brand logo border (hover) - this setting allows you to set a brand logo border;

• Filter symbol color - this setting allows you to set a filter symbol color;

• Category symbol color - this setting allows you to set a category symbol color.

General

• Link text - the setting allows you to specify a link text;

• Link - the setting allows you to specify a link;

Block Brand logo

General

Used to display brand logos in brand menu.

• Logo - the setting allows you to specify a logo;

• Logo name - the setting allows you to specify a logo name;

• Logo link - the setting allows you to specify a logo link.

Additional info

For regular mega menu, mega menu row menus, burger menu it is possible to display an icon for the second and third nesting levels.

To display an icon, you need to create a metafield. For example, this can be done for a reference to a collection or for another object.

You must create a metafield with the following parameters:

• Name: Menu icon;

• Namespace and key: custom.menu_icon;

• Description: 24x24 .svg recommended;

• Type: File - one file;

• Validations: Images.