Skip to main content

Header v1

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

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, and other elements such as a phone number, email, etc.

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

Additionally, changing information about Email address, ... can be done here.

header main

Header settings​

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

  • 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

Create navigation: In the Online Store, click Navigation

header main

Go to Navigation to create a menu. 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.
  • Hamburger menu: If you select hamburger menu, you will have 3 options for displaying the hamburger menu.
  • Sticky header type: Have 3 option: Always, On scoll up and None.
  • Event type: When you hover over the menu, the mega menu will appear or you have to click.

header main

General settings​

Color schema: Set text color and background color with preset scheme
Section padding allows you to specify the space between the collection and the preceding or following sections, or both.

header main