Header

Configure the header section

Select customize the theme. Click on the top dropdown menu to select the home page template.

Click on the customize theme.

From the side menu, select the header.

Configure the "Header" in the setting on the right side with the following settings.

Header layouts

Select the preferred header from the drop-down menu: - Logo left menu left - Logo left menu center - Logo center menu left - Logo center menu below Show separator line Enable this checkbox to show separator border below the header.

Navigation

Menu Select menus from the backend default navigation list of Shopify. It will appear in the Header as the menu. For more details, refer to the Shopify menus. Sticky header type Select from the following options: - None - On scroll up: This setting makes the header sticky when users scroll up the page from the bottom. - Always: This setting keeps the header permanently sticky as the page is scrolled. Open dropdown item on Choose from the following options to open the menus on: - Click - On hover

Logo

Logo Select any image to appear as the store logo.

Transparent header

Show transparent header Select this checkbox to show transparent header. (Note: It will be applied to home page only) Alternate logo Select any image to appear in the transparent header.

Logo settings

Desktop logo width Adjust the slider to customize the logo width from 50px to 300px. Mobile logo width Adjust the slider to customize the logo width from 50px to 200px

Utilities

Enable search selector Select this checkbox to show the search icon/text. Enable cart selector Select this checkbox to show the cart icon/text. Style Choose icons style from: - Text only - Icon only - Text with icon

Localization

Enable country/region Select this check box to show the location selector. ( Note: For more info, go through location and currency.) Show country flag Select this check box to show the country flag. Enable language selector Select this check box to show the language selector. ( Note: For more info, go through location and currency.)

Menu drawer

Enable menu drawer Select this check box to show the menu drawer. (Note: Set it up in ‘Menu drawer’ section in 'Header group’.)

Section spacing

Desktop top

Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop bottom

Adjust the range bar to add spacing at the bottom of the section for desktop view.

Mega menu

  • Add the mega menu block.

  • Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.

  • You will be connected to this menu by typing the same name into the mega menu created through the theme editor. (Note: These mega menus apply to the main menu chosen from the header section only.)

Dropdown menu label

Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field. (Note: It can only be enabled when your menu has nested items (submenus). Please add submenus to proceed.)

Button

Link Add the button link to redirect it. Text Enter the button text. (Note: Leave the label blank to hide the button.)

Typography

Second level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large

Promotional content(with banner)

Banner Image Choose an image to display in the mega menu. Link Include a link to the image in the mega menu. Text Add a descriptive caption to the image in the mega menu.

Mega menu with products

  • Add the mega menu with products block.

  • Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.

  • You will be connected to this menu by typing the same name into the mega menu created through the theme editor.

Dropdown menu label

Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field. (Note: It can only be enabled when your menu has nested items (submenus). Please add submenus to proceed.)

Button

Link Add the button link to redirect it. Text Enter the button text. (Note: Leave the label blank to hide the button.)

Typography

Second level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large

Product

Product list Choose products list from the store library. Heading Add heading text.

Card appearance

Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Visibility options Choose options from: - Always - On hover Variants details - Sizes only - Colors only - Sizes & Colors - No variants Sizes visibility Choose the visibility of size options: - Always - On hover Enable shadow Select this checkbox to show shadow on product cards.

Always/On hover options

Border style Choose style from: - With border - Without border

Quick view

Display mode Choose the visibility of quick view: - Always - On hover - Disabled

Badges

Badges visibility Choose the visibility of badges : - Always - On hover

Media

Media fit style Choose the media fit style from : - Cover - Contain Show second image on hover Select this checkbox to show second image on hover.

Color scheme

Select any color scheme defined in the theme settings>Colors>Schemes.

Visibility

Choose the drawer visibility from: - Desktop - Mobile - Both

Menu

Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus.

Typography

First, Second and third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large

Block settings:

Button

Text Enter the button text. (Note: Leave the label blank to hide the button.) Link Add the button link to redirect it.

Secondary menu

Only single-level menu items (without submenus) will be shown. Menu Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus. Typography Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large

Menu image

Note: This will show in third level menus if third level has menus. Second level dropdown menu Type the same name of the second-level menu to add it to a menu image. This image will be visible in the third level menu, only if there are menus on the third level. Image Choose an image. Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Heading Add the heading text. Link Add the link to redirect it.

Context image

Image Choose an image. Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Link Add the link to redirect it.

Nested menu

Note: This will work as a submenu for menu items those do not have any nested (child) menus, and this applies to the menus selected in menu drawer. Menu label Type the same name of the first-level menu. Media Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Item 1- 4 Heading Add the heading text. Image Choose an image. Link Add the link to redirect it.

Last updated