Header
Last updated
Last updated
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.
Logo
Logo Select any image to appear as the store logo. Alternate logo Select any image to appear in the transparent header.
Desktop logo width Adjust the slider to customize the logo width from 50px to 250px. Mobile logo width Adjust the slider to customize the logo width from 50px to 150px Enable bottom shadow Select this checkbox to show bottom shadow in header.
Logo transition
This works only on home page when 'Sticky Always' is enabled. The logo will smoothly move from the bottom to the top of the header as you scroll down.
We recommend using a high-quality logo for a better transition effect. Enable transition Select this checkbox to show the logo transition.
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 Header layout Select the preferred header from the drop-down menu: - Logo left menu left - Logo left menu center - Logo center menu left - Hamburger Desktop menu type Select from the Dropdown or Mega menu to display the menu time. (Note: Menu type is automatically optimized for mobile.) Menu event Choose from the following options to open the menus on: - Click - On hover Sticky header 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. Enable bottom shadow Select this checkbox to show the bottom shadow in header.
Header transparency
Transparent pages Choose where to make the header transparent:
- None - Home page only - All pages Transparent visibility Choose the visibility of transparent header on: - Desktop - Mobile - Both
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.
Promotion 1-2
Image Choose an image to display in the mega menu. Heading Add a descriptive caption to the image in the mega menu. Description Enter the description text. Link Include a link to the image in the mega menu. Text color Choose the text color. Overlay color Choose the image overlay color. Overlay opacity Adjust the range bar to determine the overlay opacity.