# 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F2fRnRFQ7q0T3fbyXAqF2%2Fimage.png?alt=media&#x26;token=4df1e21e-592e-410f-8117-43c90bc974f8" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2Ft1qTKlK5ghhEHJblwV1r%2Fimage.png?alt=media&#x26;token=c617761c-eb89-47f9-8726-d892774a4ee4" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F9nYs7fzXBbMdRMRqWuA1%2Fimage.png?alt=media&#x26;token=ab90c96f-9c2d-4c32-a054-3f742b75a0b8" alt=""><figcaption></figcaption></figure>

### Mobile settings

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F1fVAcuNEwJM2UV7Sw3o4%2Fimage.png?alt=media&#x26;token=0d409f50-25dd-4f5c-b8ba-867cdd8cb9a5" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2Ffm3i18MmBncE3r2Va4Zk%2Fimage.png?alt=media&#x26;token=982987c3-5760-408b-b169-1cbbdfc52f6b" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FRn2Hqfwr0XzRLvUugseP%2Fimage.png?alt=media&#x26;token=d9dee3d3-cebb-4ea6-8638-64e9aad8d4e0" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F9Tsh3TNC3pWC2Rvmcx0t%2Fimage.png?alt=media&#x26;token=d39752b3-63cb-40e8-9d9b-ffaa70ca6442" 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>