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

# Header

The **Header** on an e-commerce website enhances user experience by providing easy navigation, reinforcing branding, enabling quick search, displaying cart previews, offering contact information, showcasing promotions, and ensuring a consistent, user-friendly design across all pages

<figure><img src="/files/rd6BUYKzsXv8agVvxFNi" alt=""><figcaption></figcaption></figure>

## 1. Header settings

### General

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p></p><p>3 options for container</p><ul><li><em><strong>Stretch width</strong></em>: span the section width regardless of screen size.</li><li><em><strong>Fix width</strong></em>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><em><strong>Expand full width</strong></em>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Desktop logo position</strong></td><td><p>2 options position logo desktop</p><ul><li>Logo left, menu center</li><li>Logo center, menu left</li></ul></td></tr><tr><td><strong>Logo image</strong></td><td>Upload your store's logo</td></tr><tr><td><strong>Desktop logo width</strong></td><td>Customize the size of the logo on desktop screens</td></tr><tr><td><strong>Mobile logo width</strong></td><td>Customize the size of the logo on mobile screens</td></tr><tr><td><strong>Sticky header</strong></td><td><p>3 options sticky</p><ul><li>None: Do not display the sticky header</li><li>On scroll up: Display only on scroll up</li><li>Always: Always display</li></ul></td></tr></tbody></table>

### Navigation

Customize your website's main menu and choose to display uppercase text for the first menu item

<figure><img src="/files/LO4w1xiHvbppD1LJzE8f" alt=""><figcaption></figcaption></figure>

To add, remove, or edit menus in your Shopify store, please refer to: [Editing menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)

### Addons

Addons offer additional settings for the header, including features like search, currency selector, language selector, and more. Enable the relevant checkboxes to activate them.

<figure><img src="/files/tP51JAT1G4q8SKy7fOlM" alt=""><figcaption></figcaption></figure>

### Mobile settings

<figure><img src="/files/QmX3AunxJuAcuEBxgLm8" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Media type</strong></td><td><p>3 options for media type</p><ul><li><em><strong>Collection</strong></em>: Customize the display of collections</li><li><em><strong>Banner image</strong></em>: Display the desired banner image</li><li><em><strong>None</strong></em>: Do not display</li></ul></td></tr><tr><td><strong>Collection</strong></td><td>Select the collection to display when you choose the "collection" type</td></tr><tr><td><strong>Banner image</strong></td><td>Choose the image to display when you select the "Banner image" type</td></tr><tr><td><strong>Banner link</strong></td><td>Customize the link to the desired page when you select the "Banner image" type</td></tr><tr><td><strong>Show border</strong></td><td>Display border</td></tr><tr><td><strong>Title</strong></td><td>Customize options for the title text</td></tr></tbody></table>

### Transparent

A transparent header is a see-through top section on a website or mobile app, allowing the content or background to show through instead of having a solid color background

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Transparent on home page</strong></td><td>Display as transparent only on the homepage</td></tr><tr><td><strong>Logo image</strong></td><td>Logo displayed on the transparent header</td></tr><tr><td><strong>Text and icon</strong></td><td>Customize the color of text and icons in transparent header format</td></tr></tbody></table>

## 2. Block settings

### Mega menu with banner image

<figure><img src="/files/8fR41S9nsUwy8wgGZlpi" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Menu item</strong></td><td>Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters</td></tr><tr><td><strong>Banner position</strong></td><td><p>2 options for banner position</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td><strong>Desktop menu columns</strong></td><td>Choose the number of columns from 2 to 5</td></tr><tr><td><strong>Banner image</strong></td><td>Choose the image to display</td></tr><tr><td><strong>Banner image width</strong></td><td>Customize the size of the banner</td></tr><tr><td><strong>Banner link</strong></td><td>Customize the link to the desired page</td></tr></tbody></table>

### Mega menu with product&#x20;

<figure><img src="/files/yOtRnWvyRRy3PQi3advp" alt="" width="387"><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Menu item</strong></td><td>Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters</td></tr><tr><td><strong>Desktop menu columns</strong></td><td>Choose the number of columns from 2 to 5</td></tr><tr><td><strong>Product</strong></td><td>Select the products you want to display</td></tr></tbody></table>

### Mega menu with collection

<figure><img src="/files/Fd3XybTSc89EBf0I7KAV" alt="" width="371"><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Menu item</strong></td><td>Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters</td></tr><tr><td><strong>Desktop menu columns</strong></td><td>Choose the number of columns from 2 to 5</td></tr><tr><td><strong>Collection</strong></td><td>Select the products you want to display</td></tr><tr><td><strong>Collection width</strong></td><td>Customize the size of the collection if choosing from 5 collections will automatically set the collection width to 100%</td></tr></tbody></table>