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.
.png)
1. Header settings
General settings
Customize the overall layout, color scheme, logo position, and header behavior for your section.
| Setting | Description |
|---|---|
| Section width | 3 options for container
|
| Color scheme | Select colors from Theme settings -> Colors |
| Desktop logo position | 2 options position logo desktop
Note: Logo position is automatically optimized for mobile. |
| Sticky header | 3 options sticky
|
Menu
Customize your site's main menu by selecting a menu and configuring how the desktop dropdown menu is triggered, as well as the dropdown animation style.
.png)
| Setting | Description |
|---|---|
| Menu | Select which menu will be used as the main navigation for your site. |
| Desktop dropdown menu trigger | Choose how the dropdown menu on desktop is triggered — either by clicking or hovering over the menu item. |
| Dropdowns animation | Select the animation style for the dropdown menus when they appear.
|
Mobile menu settings
Add a banner image and link to enhance your mobile menu experience.
.png)
| Setting | Description |
|---|---|
| Hamburger icon position | Choose where the hamburger menu appears on mobile. |
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.
| Setting | Description |
|---|---|
| Show search icon | Display a search icon in the header for quick product searches. |
| Show account icon | Show an account/login icon in the header. |
| Show shopping cart | Enable the shopping cart icon in the header. |
| Show offer | Enable the offer icon |
.png)
| Setting | Description |
|---|---|
| Enable transparent header | Display as transparent only on the homepage |
| Text and icon | Customize the color of text and icons in transparent header format |
Section padding
.png)
| Setting | Description |
|---|---|
| Top | Customize the top margin of the section |
| Bottom | Customize the bottom margin of the section |
2. Block settings
Banner ( Mega menu )
.png)
| 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 column |
| Width | Adjust the width of each banner as a percentage of the total container. |
| Number of columns | Set how many banners are displayed per row. |
| Content position | Select the position of the banner content, either below the image or overlayed on the image (top, middle, or bottom). |
| Content alignment | Set the horizontal alignment of the content (left, center, or right). |
| Image | Upload or select the banner image. (448px x 260px recommended) |
Product ( Mega Menu )
.png)
| 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 column |
| Width | Adjust the width of the product display area (%). |
| Number of columns | Set the number of product columns to display. |
| Heading | Enter a title for the product section. |
| Products | Select the products you want to display |
Collection ( Mega Menu )
.png)
| 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 column |
| Width | Adjust the width of the collection display area (%). |
| Number of columns | Set the number of collection columns to display. |
| Heading | Enter a title for the collection section. |
| Collections | Select the collections you want to display |
No comments yet