✨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.

Desktop style	Select the preferred header from the drop-down menu: - Logo left menu center - Logo left menu right - Logo left menu left - Logo center menu left - Half width menu - Hamburger menu logo left - Hamburger menu logo center
Height	Choose the header height from the following options: - Small - Medium - Large
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 border	Select the checkbox to show the header border.
Enable shadow	Select the checkbox to show the header shadow.
Hide logo on scroll (desktop)	Select the checkbox to hide the logo on the page scroll. (Note: It is applicable with half width menu only.)
Transparent header	Enable on home page Select the checkbox to show/hide the transparent header. Enable on additional template Add the templates to show transparent header on the pages. (Note: Use comma separated list of template name to enable on multiple page template. See templates list here.) Transparent visibility Choose the visibility of transparency from the following options: - Desktop - Mobile - Both Colors Text/icon Choose any color for the text or icons. Border Choose any color for header border. Overlay background Choose any color for the overlay color. Overlay opacity Adjust the range bar to determine the overlay opacity. Enable blur effect Select the checkbox to enable the blur effect in the transparent header.
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.
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. Open menu items on Choose from the following options to open the menus on: - Click - Hover Desktop font family Choose the font family from the following options: - Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Desktop font style Choose the styling from the below options: - Normal - Bold Desktop font size Choose the font size from the following options: - Small - Regular - Medium - Large
Desktop submenus	Font family Choose the font family from the following options: - Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Font style Choose the styling from the below options: - Normal - Bold Font size Choose the header font size from the following options: - Small - Regular - Medium - Large
Icons	Enable search Select this checkbox to show the search in the header. Enable account Select 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.
Quick access button	(Note: This is recommended only for short menus. Only first level menus will be visible and it is applicable with non sticky header only.) Enable quick menu Select this checkbox to show the Quick menu button on the bottom of the storefront. Menus heading Enter any text to show the quick menu's heading. Menu Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus. Show on home page Select the checkbox to show/hide the quick menus button on home page only. Show on additional template Add the templates to show the quick menus button on the pages. (Note: Use comma separated list of template name to enable on multiple page template. See templates list here.)
Hamburger menu - top bar	Button label Enter any text for the button label. Button link Add any link to redirect the button. Show social media icons Select this checkbox to show the social media icons in the hamburger menu's top bar.
Hamburger menu - middle card	Image Choose any image to show in the hamburger menus. Heading Enter any text to show in the middle card of hamburger menus. Description Enter any text to show as the description in the middle card of hamburger menus.
Hamburger menu - bottom bar	Menu Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus. For e.g: Policy menus. Text Enter any text to show in the bottom bar of hamburger menus. Marquee text Enter any text to show as the marquee text in bottom bar. (Note: Wrap your text between [ ] to add the markers font.) Marquee speed Adjust the range bar to determine the marquee speed. Markers font Choose the marker's font from the following options: - Accent - Body - Heading (Note: These fonts can be changed in theme settings>typography.) Marker text style Select the marker highlight style from the following options: - None - Text color - Outline text - Text background color

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.

Horizontal (mega menu)

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.
Images overlay opacity	Adjust the range bar to determine the image overlay opacity.
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.

Vertical (mega menu)

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.
Images overlay opacity	Adjust the range bar to determine the image overlay opacity.
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. Link Include a link to the image in the mega menu.

Collections (mega menu)

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.
Collections	Choose the collections list from the store to display.