> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/metro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/metro/overview/header.md).

# 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="225"></th><th></th></tr></thead><tbody><tr><td>General</td><td><strong>Outer background</strong><br>Choose the background color for the outer container.<br><br><strong>Container width</strong><br>Choose the container width from below options:<br>- Small<br>- Standard<br>- Wide<br>- Edge<br>- Full width<br><br><strong>Inner content width</strong><br>Choose the content width from below options:<br>- Small<br>- Standard<br>- Wide<br>- Edge<br><br><strong>Corner style</strong><br>Choose the corners style from following options:<br>- Sharp<br>- Rounded<br><br><strong>Corner radius</strong><br>Adjust the range bar to determine the radius to be applied in case of rounded corner style.<br><br><strong>Show separator line</strong><br>Enable this checkbox to show separator border below the header.</td></tr><tr><td>Section spacing</td><td><p><strong>Choose from</strong><br>Choose spacing for:<br>- Desktop<br>- Mobile<br><br><strong>Desktop: Top spacing</strong><br>Adjust the range bar to add spacing at the top of the section for desktop view.<br></p><p><strong>Desktop: Bottom spacing</strong><br>Adjust the range bar to add spacing at the bottom of the section for desktop view.<br></p><p><strong>Mobile: Top spacing</strong><br>Adjust the range bar to add spacing at the top of the section for mobile view.<br></p><p><strong>Mobile: Bottom spacing</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view.</p></td></tr><tr><td>Layout</td><td><strong>Header layout</strong><br>Select the preferred header from the drop-down menu:<br>-  Logo left menu left<br>- Logo left menu center<br>- Logo center menu left<br>- Logo center menu below<br><br><strong>Submenus position</strong><br>Choose from the following options to open the submenus in:<br>- Expand down<br>- Expand side<br><br><strong>Sticky header type</strong><br>Select from the following options:<br>- <strong>None</strong><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><strong>Logo</strong><br>Select any image to appear as the store logo.<br><br><strong>Transparent logo</strong><br>Select any image to appear in the transparent header. <br><br><strong>Desktop logo width</strong><br>Adjust the slider to customize the logo width from 50px to 250px.<br><br><strong>Mobile logo width</strong><br>Adjust the slider to customize the logo width from 50px to 150px.</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>Submenus style</strong><br>Choose the submenus style from below options:<br>- Dropdown<br>- Masonry<br>- Megamenu<br><br><strong>Submenu trigger</strong></p><p>Choose from the following options to open the menus on:<br>- Hover<br>- Click<br><em>(<strong>Note</strong>: Click mode is forced on touch devices.)</em></p></td></tr><tr><td>Icons</td><td><strong>Show dividers in icons</strong><br>Select this checkbox to show the dividers in icons.<br><br><strong>Enable country/language selector</strong><br>Select this checkbox to show the country/language selector.<br><em>( Note: For more info, go through</em> <a href="https://help.shopify.com/en/manual/international/languages/manage-languages"><em>location</em></a> <em>and</em> <a href="https://help.shopify.com/en/manual/international/pricing/set-up-local-currencies"><em>currency</em></a><a href="https://help.shopify.com/en/manual/markets/pricing/set-up-local-currencies"><em>.</em></a><em>)</em><br><br><strong>Icon style</strong><br>Choose the icons style from below options:<br>- Text only<br>- Icon only<br>- Text with icon.<br><br><strong>Show social icons</strong><br>Select this checkbox to show the social media icons.<br><em>(<strong>Note</strong>: The icons can be setup in social media under theme settings.)</em></td></tr><tr><td>Mobile layout</td><td><strong>Enable country/language selector</strong><br>Select this checkbox to show the country/language selector.<br><em>( Note: For more info, go through</em> <a href="https://help.shopify.com/en/manual/international/languages/manage-languages"><em>location</em></a> <em>and</em> <a href="https://help.shopify.com/en/manual/international/pricing/set-up-local-currencies"><em>currency</em></a><a href="https://help.shopify.com/en/manual/markets/pricing/set-up-local-currencies"><em>.</em></a><em>)</em><br><br><strong>Store locator</strong><br>Enter the title to link the store locator. The store locator can be setup in the 'overlay group'.</td></tr></tbody></table>

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

<table data-header-hidden><thead><tr><th width="226"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Menu item</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><br><br><em>(<strong>Note</strong>: Works only with menus containing inner links or sub-menus. And This does not work with headers that use a hamburger menu.)</em></td><td></td></tr><tr><td>Promo blocks</td><td><strong>Columns in a row</strong><br>Adjust the range bar to determine the number of columns in a row, on the desktop view.<br><br><strong>Text color</strong><br>Choose any color for the text.<br><br><strong>Enable overlay</strong><br>Select this checkbox to show images overlay.<br><br><strong>Style</strong><br>Choose the overlay style from below options:<br>- Solid<br>- Gradient<br><br><strong>Color/Gradient</strong><br>Choose the sold or gradient color as per the chosen style.</td><td></td></tr><tr><td>Promo 1-2</td><td><p><strong>Image</strong><br>Choose any image from the store library.<br><br><strong>Heading</strong><br>Enter the title.<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Heading font size</strong></p><p>Choose the font size from following options:<br>- Extra large<br>- Large<br>- Medium<br>- Regular<br>- Small<br>- Extra small<br><br><strong>Description font size</strong><br>Choose the font size from following options:<br>- Extra large<br>- Large<br>- Medium<br>- Regular<br>- Small<br>- Extra small<br><br><strong>Link</strong><br>Add the link to redirect it.</p></td><td></td></tr><tr><td>Promotional content(with banner)</td><td><strong>Banner Image</strong><br>Choose an image to display in the mega menu.<br><br><strong>Link</strong><br>Include a link to the image in the mega menu.<br><br><strong>Text</strong><br>Add a descriptive caption to the image in the mega menu.</td><td></td></tr></tbody></table>

## Tabs mega menu

* Add the tabs mega menu.
* 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.&#x20;

<table data-header-hidden><thead><tr><th width="226"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Menu item</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><br><br><em>(<strong>Note</strong>: It's not applicable to hamburger menu style.)</em></td><td></td></tr><tr><td>Menu</td><td>Select menus from the backend default navigation list of Shopify. For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a></td><td></td></tr><tr><td>Columns in a row</td><td>Adjust the range bar to determine the number of columns in a row, on the desktop view.</td><td></td></tr><tr><td>Promo blocks</td><td><p><strong>Image</strong><br>Choose any image from the store library.<br><br><strong>Heading</strong><br>Enter the title.<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Link</strong><br>Add the link to redirect it.<br><br><strong>Heading font size</strong></p><p>Choose the font size from following options:<br>- Extra large<br>- Large<br>- Medium<br>- Regular<br><br><strong>Description font size</strong><br>Choose the font size from following options:<br>- Extra large<br>- Large<br>- Medium<br>- Regular<br>- Small<br>- Extra small<br><br><strong>Text color</strong><br>Choose any color for the text.<br><br><strong>Enable overlay</strong><br>Select this checkbox to show images overlay.<br><br><strong>Style</strong><br>Choose the overlay style from below options:<br>- Solid<br>- Gradient<br><br><strong>Color/Gradient</strong><br>Choose the sold or gradient color as per the chosen style</p></td><td></td></tr></tbody></table>

## Collections mega menu

* Add the collections mega menu.
* 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.&#x20;

<table><thead><tr><th width="229"></th><th></th></tr></thead><tbody><tr><td>Menu item</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><br><br><em>(<strong>Note</strong>: It's not applicable to hamburger menu style.)</em></td></tr><tr><td>Collections</td><td>Choose the collections list from store library.</td></tr><tr><td>Number of columns in a row</td><td>Adjust the range bar to determine the number of columns in a row, on the desktop view.</td></tr><tr><td>Maximum products to show</td><td>Adjust the range bar to determine the maximum number of products, on the desktop view.</td></tr><tr><td>Aspect ratio</td><td>Choose the images ratio from below options:<br>- Adapt to image<br>- Square<br>- Portrait<br>- Portrait slim<br>- Landscape</td></tr><tr><td>Button</td><td><strong>Button text</strong><br>Enter the button text.<br><em>(Note: Leave the label blank to hide the button.)</em><br><br><strong>Button link</strong><br>Add the button link to redirect it.<br><br><strong>Button style</strong><br>Choose the button style from the following options:<br>- Primary button<br>- Secondary button<br>- Primary outline button <br>- Secondary outline button <br>- Link</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://shinedezign.gitbook.io/metro/overview/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.