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 settings
Customize the overall layout, color scheme, logo position, and header behavior for your section.
Section width
3 options for container
Stretch width: span the section width regardless of screen size.
Fixed width: depends on your page content width in Theme settings -> Layout.
Full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
Color scheme
Select colors from Theme settings -> Colors
Desktop logo position
2 options position logo desktop
Logo left, menu center
Logo center, menu left
Note: Logo position is automatically optimized for mobile.
Sticky header
3 options sticky
None: Do not display the sticky header
On scroll up: Display only on scroll up
Always: Always display
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.
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.
Fade in: Dropdown fades in smoothly.
Fade in down: Dropdown fades in while moving downward.
Down to up: Dropdown appears with a motion from bottom to top
Mobile menu settings
Add a banner image and link to enhance your mobile menu experience.
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.
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
Transparent header
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.
Ensure the first section on your homepage is configured as one of the following: a Slideshow, a Video with a text overlay, or an Image with a text overlay.
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
Top
Customize the top margin of the section
Bottom
Customize the bottom margin of the section
2. Block settings
Banner ( Mega menu )
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.
Color scheme
Choose a color scheme for the banner's background and text.
Subheading
Add a smaller title above the main heading.
Heading
Set the main title for the banner.
Description
Write supporting text to describe the banner's message.
Button label
Customize the text shown on the call-to-action button.
Link
Set the URL that the user will be redirected to when clicking the banner button
Product ( Mega Menu )
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 )
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
Last updated