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

<table data-header-hidden><thead><tr><th width="327"></th><th></th></tr></thead><tbody><tr><td>Style</td><td><p>Select the preferred header from the drop-down menu:</p><ol><li>Logo with search bar</li><li>Logo with inline menu.</li><li>Hamburger menu</li></ol></td></tr><tr><td>Enable sticky header</td><td>Select the checkbox to show/hide the sticky header. </td></tr><tr><td>Enable transparent header</td><td>Select the checkbox to show/hide the transparent header.</td></tr><tr><td>Enable header shadow</td><td>Select the checkbox to show/hide the header shadow.</td></tr><tr><td>Sticky header type</td><td>Select from the following options:<br><strong>-On scroll up:</strong> This setting makes the header sticky when users scroll up the page from the bottom.<br><strong>-Always:</strong> This setting keeps the header permanently sticky as the page is scrolled.</td></tr><tr><td>Logo</td><td>Select any image to appear as the store logo.</td></tr><tr><td>Logo width</td><td>Adjust the slider to customize the logo width from 100px to 300px.</td></tr><tr><td>Logo alignment</td><td>Select from left or center to adjust the alignment of the store logo.</td></tr><tr><td>Corners radius</td><td>Show top corners rounded<br>Select this checkbox to show the top corners of the header rounded.<br><br>Top outer color<br>Choose any color for the top outer.<br><em>(Note: We recommend using the announcement bar background color to make it look appealing. This does not work with the transparent header.)</em></td></tr><tr><td>Navigation</td><td><p><strong>Menu</strong><br>Select menus from the backend default navigation list of Shopify. It will appear in the <strong>Header</strong> as the menu. For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a><br><br><strong>Menu type</strong><br>Select from the <strong>Dropdown</strong> or <strong>Mega menu</strong> to display the menu time.<br><br><strong>Menu items alignment</strong><br>Select from <strong>Left</strong>, <strong>Centered</strong>, <strong>Right</strong> or <strong>Divide evenly</strong> to display the alignment of menus.<br><em>(Note: This is applicable to 'Logo with search bar' style only.)</em><br><br><strong>Menu font</strong><br>Select from <strong>Heading</strong> or <strong>Body</strong> font for the menus.<br><br><strong>Make menu heading bold</strong><br>Select this checkbox to make the menu heading's bold.<br><br><strong>Sub menu font</strong><br>Select from <strong>Heading</strong> or <strong>Body</strong> font for the sub menus.<br><br><strong>Main</strong> <strong>menu font size</strong><br>Select from <strong>Small</strong>, <strong>Regular</strong>, <strong>Medium</strong> and <strong>Large</strong> to determine the menu font size.<br><br><strong>Sub menu font size</strong></p><p>Select from <strong>Small</strong>, <strong>Regular</strong>, <strong>Medium</strong> and <strong>Large</strong> to determine the sub-menu font size.<br></p><p><strong>Category</strong><br><strong>Category menu heading</strong><br>Enter any text as the category menu heading.<br><br><strong>Category menu</strong><br>Select menus from the backend default navigation list of Shopify. It will appear as the category menu. For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a><br><em>(Note: This does not work with hamburger menu style.)</em><br><br><em>(Note: Below settings do not apply to the 'Hamburger menu' style.)</em><br><br><strong>Enable icons for category menu</strong><br>Select this checkbox to shoe icons for the category menus.<br><em>(Note: To show icons on category menus, you have to add block "Categories icon".)</em><br><br><strong>Style</strong><br>Choose the category menus style from <strong>style 1</strong> or <strong>style 2</strong>. </p></td></tr><tr><td>Header icons</td><td><p><strong>Enable account</strong><br>Tick this checkbox to show the account icon in the header.  Also, note that this must be set up from the <strong>Shopify</strong> admin side. For reference, go through the <a href="https://help.shopify.com/en/manual/customers/customer-accounts"><strong>accounts.</strong></a><br><br><strong>Enable cart</strong><br>Tick this checkbox to show the cart icon in the header.<br><br><strong>Cart style</strong><br>Choose the cart icon style from the following options:<br>- Show quantity only<br>- Show cart total only<br>- Show cart quantity and total<br>- None<br><br><strong>Enable cart border</strong><br>Tick this checkbox to show the border around the cart icon.</p><p></p><p><strong>Show rounded border</strong><br>Tick this checkbox to show the  rounded border around the cart icon.<br><br><strong>Account type</strong><br>Select from <strong>Page</strong> or <strong>Dropdown</strong> to determine the behaviour of the login page.<br><br>Search<br><strong>Enable search</strong><br>Tick this checkbox to show the search in the header.<br><em>(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.)</em><br><br><strong>Enable search border</strong><br>Tick this checkbox to show the search border in the header.<br><br><strong>Search bar size</strong><br>Choose from <strong>Small</strong>, <strong>Medium</strong> or <strong>Large</strong> to determine the search bar size.</p></td></tr><tr><td>Store details</td><td><strong>Enable store details</strong><br>Tick this checkbox to show the store details.<br><br><strong>Text</strong><br>Enter the text for the store details.<br><br><strong>Icons</strong><br>Select any icon from the list of available icons.<br><br><strong>Content</strong><br>Enter extra details about the store.</td></tr><tr><td>Colors</td><td><strong>Text</strong><br>Choose any color for the text.<br><br><strong>Background</strong><br>Choose any color for the background.<br><br><strong>Dropdown text</strong><br>Choose any color for the dropdown text.<br><br><strong>Dropdown background</strong><br>Choose any color for the dropdown background.<br><br><strong>Dropdown link</strong><br>Choose any color for any link in the dropdown.<br><br><strong>Dropdown border</strong><br>Choose any color for borders in the dropdown.</td></tr><tr><td>Shape</td><td><strong>Enable shape</strong><br>Select this checkbox to enable shape on the header.<br><br><strong>Shapes styles</strong><br>Select from the options to determine the type of shape from shape 1 to shape 10.<br><br><strong>SVG color</strong><br>Choose the color for the SVG shape.<br><br><strong>Stroke color</strong><br>Choose the color for the shape stroke.</td></tr></tbody></table>

## 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.&#x20;

<table data-header-hidden><thead><tr><th width="294"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Menu label</td><td>Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus.<br><br><em>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.</em></td><td></td></tr><tr><td>Show text as overlay</td><td>Select this checkbox to show the text as the overlay text above the images.</td><td></td></tr><tr><td>Content 1-4</td><td><strong>Image</strong><br>Choose an image to display in the mega menu.<br><br><strong>Heading</strong><br>Add a descriptive caption to the image in the mega menu.<br><br><strong>Link</strong><br>Include a link to the image in the mega menu.<br><br><strong>Overlay opacity</strong><br>Adjust this range bar to determine the opacity of the overlay on mega menu images.</td><td></td></tr></tbody></table>

## 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.&#x20;

<table><thead><tr><th width="302"></th><th></th></tr></thead><tbody><tr><td>Menu label</td><td>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.<br><br><em>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.</em></td></tr><tr><td>General settings</td><td><strong>Show product images (desktop)</strong><br>Select this checkbox to show the product images.<br><em>(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.)</em><br><br><strong>Show collection images (desktop)</strong><br>Select this checkbox to show the collection images. <em>(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.)</em><br><br><strong>Show content below image</strong><br>Select this checkbox to show the content below the images. This is applicable for the images added in below settings.</td></tr><tr><td>Content 1-3</td><td><strong>Image</strong><br>Choose an image to display in the mega menu.<br><br><strong>Heading</strong><br>Add a descriptive caption to the image in the mega menu.<br><br><strong>Description</strong><br>Add a descriptive text.<br><br><strong>Link</strong><br>Add any link to redirect the image.<br><br><strong>Overlay opacity</strong><br>Adjust this range bar to determine the opacity of the overlay on mega menu images.</td></tr></tbody></table>

## Promo badge

This badge shows next to the header menus.

<table><thead><tr><th width="274"></th><th></th></tr></thead><tbody><tr><td>Title</td><td>Add a badge title.</td></tr><tr><td>Link</td><td>Add any link to redirect the badge.</td></tr><tr><td>Color</td><td>Choose the text color.</td></tr><tr><td>Background</td><td>Choose the background color.</td></tr></tbody></table>

## Categories icon

#### Menu items 1-15

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

<table><thead><tr><th width="278"></th><th></th></tr></thead><tbody><tr><td>Icon</td><td>Choose any icon from the list of available icons.</td></tr><tr><td>Svg code</td><td>Enter the SVG code for the icon.</td></tr></tbody></table>

## **Store details**

<table><thead><tr><th width="279"></th><th></th></tr></thead><tbody><tr><td>Name</td><td>Enter the store name.</td></tr><tr><td>Phone</td><td>Enter the contact number.</td></tr><tr><td>Address</td><td>Enter the store address.</td></tr><tr><td>Email</td><td>Enter the store email address.</td></tr></tbody></table>