Skip to main content

Header v2

Edit header for your store

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 your theme.

header main

Header settings​

1. Layout settings​

  • Container type: Specifies the width of the header content

  • Sticky header type: Have 3 option: Always, On scoll up and None.

  • You can control how the transparent background is displayed by checking/unchecking the checkboxes.

Image comparison

2. Topbar settings​

The top bar is a content block at the upper part of your website that appears on every page. It usually contains the language, country, etc.

You can control how the bar displays by ticking/unticking the checkboxes.

Additionally, changing information about menu,email ... can be done here.

Image comparison

3. Logo settings​

  • Add a logo in the header to grab visitors' attention and set the tone for your brand. The recommended image size and format is 120x30px .png with a transparent background.
tip
  1. In the theme editor (Customize), click Header
  2. Select image under Logo image
  3. Save
  • Resize the logo image by increasing or decreasing the width on desktop/mobile.

header main

4. Menu Settings​

header main

In the Store, click Menu

header main

Click Add menu to add new or choose any items below the menu to edit.

header main

Write the menu's name, then choose Add menu item. Write the menu item's name and choose the item in the dropdown box > click Add.

header main

To make an item to a child menu, drag it under the main item. Menu items can also be added to create the same level as a child menu. Save

header main

In the theme editor (Customize), click Header
Go to Menu, select menu created

  • Menu: Select the created navigation menu.
  • Menu type: You can choose the default landscape menu or the hamburger menu.
  • Event type: When you hover over the menu, the mega menu will appear or you have to click.
  • Hamburger menu: If you select hamburger menu, you will have 3 options for displaying the hamburger menu.

header main

5. Drawer hamburger settings​

header main

6. Submenu settings​

header main

7. General settings​

Color schema: Set text color and background color with preset scheme

header main