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:
Logo with search bar
Logo with inline menu.
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
Select from Small, Regular, Medium and Large to determine the sub-menu font size.
Header icons
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
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.
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
Add the Category mega menu block.
Select a menu label similar to the first-level navigation added in the header>Category menu. For instance, Shop.
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
Menu items 1-15
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.
Enter the store email address.
Last updated