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
1. Header settings
General
| Setting | Description |
|---|---|
| Section width | 3 options for container
|
| Color scheme | Select colors from Theme settings -> Colors |
| Desktop logo position | 2 options position logo desktop
|
| Logo image | Upload your store's logo |
| Desktop logo width | Customize the size of the logo on desktop screens |
| Mobile logo width | Customize the size of the logo on mobile screens |
| Sticky header | 3 options sticky
|
Navigation
Customize your website's main menu and choose to display uppercase text for the first menu item
To add, remove, or edit menus in your Shopify store, please refer to: 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.
Mobile settings
| Setting | Description |
|---|---|
| Media type | 3 options for media type
|
| Collection | Select the collection to display when you choose the "collection" type |
| Banner image | Choose the image to display when you select the "Banner image" type |
| Banner link | Customize the link to the desired page when you select the "Banner image" type |
| Show border | Display border |
| Title | Customize options for the title text |
| Setting | Description |
|---|---|
| Transparent on home page | Display as transparent only on the homepage |
| Logo image | Logo displayed on the transparent header |
| Text and icon | Customize the color of text and icons in transparent header format |
| Setting | Description |
|---|---|
| Menu item | Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters |
| Banner position | 2 options for banner position
|
| Desktop menu columns | Choose the number of columns from 2 to 5 |
| Banner image | Choose the image to display |
| Banner image width | Customize the size of the banner |
| Banner link | Customize the link to the desired page |
Mega menu with product
| Setting | Description |
|---|---|
| Menu item | Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters |
| Desktop menu columns | Choose the number of columns from 2 to 5 |
| Product | Select the products you want to display |
Mega menu with collection
| Setting | Description |
|---|---|
| Menu item | Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters |
| Desktop menu columns | Choose the number of columns from 2 to 5 |
| Collection | Select the products you want to display |
| Collection width | Customize the size of the collection if choosing from 5 collections will automatically set the collection width to 100% |
No comments yet