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.
- Sticky Options: Choose whether the header remains fixed at the top of the screen or dynamically hides as users scroll.
- Enable Bottom Shadow: Choose whether you need a bottom shadow to your header layout
Note : Bottom shadow will only be applied to header if it is placed after announcement bar to have proper UI consistency.
- Logo Customization: Easily upload your logo, adhering to the recommended dimensions of 270 px x 80 px. Fine-tune image width separately for desktop and mobile displays.
- Navigation Choices: Opt for the default Main Menu or introduce the Drawer menu, adding a touch of elegance with a stylish side drawer appearance.
- Highlight Button : You can add customizable CTA button in header and link it with right url.
- Desktop View Layout: Tailor the desktop view by customizing logo and menu placements, ensuring a seamless and brand-aligned experience for your visitors.
- Mobile/ Hamburger Layout: You can enable or disable the Language Selector and Country Selector under these settings.
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.
- Transparent Header Settings: The Transparent Header option helps you to set your header to transparent, update text color, and enable transparency specifically on the homepage as needed.
- Appearance Settings: Define your brand's visual identity by choosing a color scheme that harmonizes with your overall design aesthetics.
- 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.