Header

The header is a prominent element that spans the top of your store, showcasing vital components such as your logo, navigation menu, cart icon, and more. Ensuring a consistent presence on every page, the header plays a pivotal role in reinforcing your brand identity.

How to set-up header section?

In the Header configuration, you have a suite of options to meticulously shape the visual and functional aspects of your storefront's header

Click the Header section to open general settings for the feature.

Desktop Header Layout : Make your header match your brand’s style effortlessly:

Desktop View Layout: Choose how your logo and menu are arranged for a clean, polished look.
Open dropdown Items Decide if dropdown menus open when you hover or only when you click.
Enable sticky header Keep your header sticky (always visible) or let it hide when scrolling.
Show bottom shadow Add a subtle bottom shadow for a sleek effect (only works if your header is placed below the announcement bar).

Note : Bottom shadow will only be applied to header if it is placed after announcement bar to have proper UI consistency.

Logo Customization

Your logo is a big part of your brand, so let’s make sure it looks just right!

  • Upload your logo (recommended size: 270 px x 80 px).
  • Adjust the width separately for desktop and mobile for the perfect fit.
Navigation & Menu Options

Help customers find what they need quickly with these menu options:

  • Stick to the Main Menu for a classic, easy-to-use navigation bar.
  • Go for the Drawer Menu if you want a modern, slide-out style menu.
  • Show Search Icon – Want a search button in your header? Now you can toggle it on or off!
Highlight Button Want to highlight something important? Add a custom button in your header with a message like "Shop Now" or "Get Started" and link it wherever you want!
Transparent Header Option

Want a sleek, modern feel? Enable a transparent header for that stylish touch: Make your header blend seamlessly with your background.

  • Content color : Adjust text colors so everything stays readable.

  • Logo image For transparent header: If you’re using a transparent header, your regular logo might not always look good on top of images or light backgrounds. No worries! You can upload a different logo just for the transparent header.

    ✔️ Use a lighter or darker version of your logo to make sure it stands out.

    ✔️ This keeps your branding consistent and easy to read, no matter what’s behind it!

  • Apply transparency only on your homepage or across your site.
Mobile & Hamburger Menu Settings

Your header automatically switches to a hamburger menu (three-line icon) on mobile for a clean look.

  • Choose whether to show a Language Selector and Country Selector in the drawer menu in mobile.
  • If you’ve set the Desktop Header to use the Drawer Menu, these settings will also apply there!
Appearance Settings Define your brand's visual identity by choosing a color scheme for Header and menu seperately that harmonizes with your overall design aesthetics.

The hamburger drawer will be the default layout for mobile devices. If you set the Desktop View Layout to Drawer, all the settings under this section will be applied in both scenario.

Advanced Customization: Dive deeper into the customization realm with Theme Settings and Custom CSS, granting you precise control over every aspect of your header's aesthetic appeal.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us

Related Articles