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.

Style

Select the preferred header from the drop-down menu:

  1. Logo with search bar

  2. Logo with inline menu.

  3. Hamburger menu

Enable sticky header

Select the checkbox to show/hide the sticky header.

Enable transparent header

Select the checkbox to show/hide the transparent header.

Enable header shadow

Select the checkbox to show/hide the header shadow.

Sticky header type

Select from the following options: -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.

Logo

Select any image to appear as the store logo.

Logo width

Adjust the slider to customize the logo width from 100px to 300px.

Logo alignment

Select from left or center to adjust the alignment of the store logo.

Corners radius

Show top corners rounded Select this checkbox to show the top corners of the header rounded. Top outer color Choose any color for the top outer. (Note: We recommend using the announcement bar background color to make it look appealing.)

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. Menu type Select from the Dropdown or Mega menu to display the menu time. Menu items alignment Select from Left, Centered, Right or Divide evenly to display the alignment of menus. (Note: This is applicable to 'Logo with search bar' style only.) Menu font Select from Heading or Body font for the menus. Make menu heading bold Select this checkbox to make the menu heading's bold. Sub menu font Select from Heading or Body font for the sub menus. Main menu font size Select from Small, Regular, Medium and Large to determine the menu font size. Sub menu font size

Select from Small, Regular, Medium and Large to determine the sub-menu font size.

Category Category menu heading Enter any text as the category menu heading. Category menu Select menus from the backend default navigation list of Shopify. It will appear as the category menu. For more details, refer to the Shopify menus. (Note: This does not work with hamburger menu style.) (Note: Below settings do not apply to the 'Hamburger menu' style.) Enable icons for category menu Select this checkbox to shoe icons for the category menus. (Note: To show icons on category menus, you have to add block "Categories icon".) Style Choose the category menus style from style 1 or style 2.

Header icons

Enable account Tick this checkbox to show the account icon in the header. Also, note that this must be set up from the Shopify admin side. For reference, go through the accounts. Enable cart Tick this checkbox to show the cart icon in the header. Cart style Choose the cart icon style from the following options: - Show quantity only - Show cart total only - Show cart quantity and total - None Enable cart border Tick this checkbox to show the border around the cart icon.

Show rounded border Tick this checkbox to show the rounded border around the cart icon. Account type Select from Page or Dropdown to determine the behaviour of the login page. Search Enable search Tick this checkbox to show the search in the header. (Note: Speech search functionality is not available on all devices or browsers. Customers will not be able to see the voice search if their device does not support this feature.) Enable search border Tick this checkbox to show the search border in the header. Search bar size Choose from Small, Medium or Large to determine the search bar size.

Store details

Enable store details Tick this checkbox to show the store details. Text Enter the text for the store details. Icons Select any icon from the list of available icons. Content Enter extra details about the store.

Colors

Text Choose any color for the text. Background Choose any color for the background. Dropdown text Choose any color for the dropdown text. Dropdown background Choose any color for the dropdown background. Dropdown link Choose any color for any link in the dropdown. Dropdown border Choose any color for borders in the dropdown.

Shape

Enable shape Select this checkbox to enable shape on the header. Shapes styles Select from the options to determine the type of shape from shape 1 to shape 10. SVG color Choose the color for the SVG shape. Stroke color Choose the color for the shape stroke.

Mega menu

  1. Add the mega menu block.

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

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

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.

Show text as overlay

Select this checkbox to show the text as the overlay text above the images.

Content 1-4

Image Choose an image to display in the mega menu. Heading Add a descriptive caption to the image in the mega menu. Link Include a link to the image in the mega menu. Overlay opacity Adjust this range bar to determine the opacity of the overlay on mega menu images.

Categories mega menus

  1. Add the Category mega menu block.

  2. Select a menu label similar to the first-level navigation added in the header>Category menu. For instance, Shop.

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

Menu label

Type the same name of the first-level menu(added in header>category menu) to add it to a mega menu. Note that these mega menus connect to the header category 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.

General settings

Show product images (desktop) Select this checkbox to show the product images. (Note: This will show product images in case a product link is added in the third level menu and this is applicable to the style 2 category mega menu style only.) Show collection images (desktop) Select this checkbox to show the collection images. (Note: This will show collection images in case a collection link is added in the third level menu and this is applicable to the style 2 category mega menu style only.) Show content below image Select this checkbox to show the content below the images. This is applicable for the images added in below settings.

Content 1-3

Image Choose an image to display in the mega menu. Heading Add a descriptive caption to the image in the mega menu. Description Add a descriptive text. Link Add any link to redirect the image. Overlay opacity Adjust this range bar to determine the opacity of the overlay on mega menu images.

Promo badge

This badge shows next to the header menus.

Title

Add a badge title.

Link

Add any link to redirect the badge.

Color

Choose the text color.

Background

Choose the background color.

Categories icon

This selected icon will be connected to the menu items 1-15, chosen from the Category menus.

Icon

Choose any icon from the list of available icons.

Svg code

Enter the SVG code for the icon.

Store details

Name

Enter the store name.

Phone

Enter the contact number.

Address

Enter the store address.

Email

Enter the store email address.

Last updated