Header

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.

#

Example of Header on website

Header Layout

In the theme editor (Customize), click section Header then locate Header. Here you can make the necessary configurations.

#

Config Layout Header
  • 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

#

Logo on Header

The logo is usually a symbol or image representing the brand, typically located at the top of the page (header).

In the theme editor (Customize), click section Header then locate Logo. Here you can make the necessary configurations.

#

Config Logo
  • 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

In the theme editor (Customize), click section 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.

#

Config Layout Header
  • 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

#

Logo on Header Mobile
In the theme editor (Customize), click section 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.

#

Config Logo Mobile
  • 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

In the theme editor (Customize), click section 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.

#

Config Logo Mobile on Homepage
  • 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

In the theme editor (Customize), click section Header then locate Menu. Here you can make the necessary configurations.

#

Config Menu
  • 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

#

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

In the theme editor (Customize), click section Header then locate Mega Menu. Here you can make the necessary configurations.

#

Container configuration for menu content

Addons

#

Addon example on header
In the theme editor (Customize), click section Header then locate Addons. Here you can make the necessary configurations.

Depends on the header layout. Location of addons may vary.

#

Config addons
  • 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

#

Addon example on header header

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.

In the theme editor (Customize), click section Header then locate Addons. Here you can make the necessary configurations.

#

Config addons mobile
  • 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

#

addon in mobile menu
In the theme editor (Customize), click section Header then locate Addons. Here you can make the necessary configurations.

#

Config addons menu mobile
  • 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.
On this page
Check
No recent searches
No results for ""