Header v4

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.

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

Create navigation: In the Online Store, click Navigation

Go to Navigation to create a menu. Click Add menu to add new or choose any items below the menu to edit.

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.

important

Where you want to place the logo, fill in () in the Name

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

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.

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.