The header is a content block at the upper part of your website that appears on every page. It usually contains the logo of a store, the main navigation menu, and other elements such as a search bar, shopping cart icon, etc. The header plays a vital role in branding your site, helping visitors navigate, and displaying your most important pages. You can freely customize your header to suit your business needs by adding your logo image, choosing the main menu, and other addons using our theme.
Header Layout
Header
then locate Header. Here you can make the necessary configurations.
- Header layout : Choose a layout for the header.
- Container : Select the container for the content header.
- Sticky on top : Allow header to stick on top when scrolling down sections below the page.
- Transparent on top : Background header is transparent (except for header when sticky).
Logo
The logo is usually a symbol or image representing the brand, typically located at the top of the page (header).
Header
then locate Logo. Here you can make the necessary configurations.
- Logo text : If there is no logo image, you can enter text to display it.
- Default logo : Upload or choose a logo from your store's library.
- Logo Sticky : Upload or choose a logo sticky from your store's library.
- Logo width (desktop) : Set width for logo. set -1 if you want to use the theme's default value.
- Logo width (sticky) : Set width for logo sticky. set -1 if you want to use the theme's default value.
Mix Logo On Home Page
Header
then locate Mix Logo On Home Page. Here you can make the necessary configurations.
If you want to set up a logo on the home page that is different from the rest of the website. You can configure the logo here.
If the logo does not have a logo, the default logo configuration will be applied.
- Transparent on top only homepage : Set background header is transparent only homepage (except for header sticky).
- Default logo : Upload or choose a logo from your store's library.
- Logo Sticky : Upload or choose a logo sticky from your store's library.
- Logo width (desktop) : Set width for logo. set -1 if you want to use the theme's default value.
- Logo width (sticky) : Set width for logo sticky. set -1 if you want to use the theme's default value.
Logo Mobile
Header
then locate Mobile. Here you can make the necessary configurations.
You can configure the mobile logo if you want a responsive logo that is perfect for devices with smaller screens.
If the logo does not have a logo, the default logo configuration will be applied.
- Default logo : Upload or choose a logo mobile from your store's library.
- Logo Sticky : Upload or choose a logo mobile sticky from your store's library.
- Logo width (desktop) : Set width for logo mobile. set -1 if you want to use the theme's default value.
- Logo width (sticky) : Set width for logo mobile sticky. set -1 if you want to use the theme's default value.
Mix Logo Mobile On Home Page
Header
then locate Mix Logo Mobile On Home Page. Here you can make the necessary configurations.
If you want to set up a logo mobile on the home page that is different from the rest of the website. You can configure the logo here.
If the logo does not have a logo, the default logo configuration will be applied.
- Default logo : Upload or choose a logo mobile from your store's library.
- Logo Sticky : Upload or choose a logo mobile sticky from your store's library.
- Logo width (desktop) : Set width for logo mobile. set -1 if you want to use the theme's default value.
- Logo width (sticky) : Set width for logo mobile sticky. set -1 if you want to use the theme's default value.
Menu
Header
then locate Menu. Here you can make the necessary configurations.
- Main Menu : Select the main menu displayed in the header.
- Secondary Menu : If you use a header layout there are 2 menus. Need to select 2nd menu to display.
- Mobile Menu : You can select a different menu for the mobile menu.
- Uppercase first level : Uppercase menu items (Do not apply to submenus).
Mega Menu
A mega menu is a drop-down menu in which the top-level item has two levels of nested drop-down menus. A mega menu impacts how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content. Different websites require different kinds of menus, depending on the size, nature, and objectives of your store. See How to build mega menu
Header
then locate Mega Menu. Here you can make the necessary configurations.
Addons
Header
then locate Addons. Here you can make the necessary configurations.
Depends on the header layout. Location of addons may vary.
- Show Search : Allows displaying search popup. See more search configuration in
theme settings
. - Show account icon : Allows displaying links leading to account page.
- Show cart icon : Allows displaying cart icon.
- Show wishlist icon : Allows displaying wishlist icon.
- Show compare icon : Allows displaying compare icon.
- Show currency selector : Allows displaying currency option. For the option to work, you need to add market where you want to adjust local currency settings.
- Show country/region selector : Allows displaying country/region option. For the option to work, you need to add market where you want to adjust local currency settings.
- Show language selector : Allows displaying language option. For the option to work, you need to add a language to your online store.
Addons Mobile
You should consider the necessary options for your business. Do not enable too many options as it can cause the mobile display to look bad.
Header
then locate Addons. Here you can make the necessary configurations.
- Show Search : Allows displaying search popup. See more search configuration in
theme settings
. - Show account icon : Allows displaying links leading to account page.
- Show cart icon : Allows displaying cart icon.
- Show wishlist icon : Allows displaying wishlist icon.
- Show compare icon : Allows displaying compare icon.
- Show currency selector : Allows displaying currency option. For the option to work, you need to add market where you want to adjust local currency settings.
- Show country/region selector : Allows displaying country/region option. For the option to work, you need to add market where you want to adjust local currency settings.
- Show language selector : Allows displaying language option. For the option to work, you need to add a language to your online store.
Addons Menu Mobile
Header
then locate Addons. Here you can make the necessary configurations.
- Show language selector : Allows displaying language option. For the option to work, you need to add a language to your online store.
- Show country/region selector : Allows displaying country/region option. For the option to work, you need to add market where you want to adjust local currency settings.
- Show login and register : Allows displaying login and register.
- Show social media links : Allows displaying social media links.