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


---

# Agent Instructions: 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:

```
GET https://nextsky.gitbook.io/agile-theme/sections/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.