Articles on: Online store
This article is also available in:

Customize Header sections

Each store theme includes a highly customizable Header section. The Header combines many built-in settings, including different options for your logo sizes. In order to set up the Header, go to Online Store > Themes > Customize > Sections > Header. In this article, we will guide you on how to adjust your Header sections.

In this article

A. Announcement Bar
B. Top Bar
C. Logos
D. Menus
E. Search
F. Cart icons
G. Fixed sticky header
H. Layout & Padding

A. Announcement Bar

You can enable the Announcement bar. This bar will appear as a banner at the top of the header. It's a great way to promote discount codes, sales, or important information to your customers! The text area includes several options such as bold, italicize, insert image and link to your text. If the text box is left blank, the announcement bar will disappear.

For Roller theme: Announcement bar can be enabled within the Header section. Select Show announcement bar and customize the content however you like.

For Inside theme: Announcement bar is an independent section within your theme. In this section, you can edit the content, link, text color, and background of your Announcement bar to your preference.

In Inside theme, click on "Announcement bar" section...
...and edit each element of your announcement bar to your preference.

B. Top Bar

A Top bar can be enabled and will display above your Main Menu and below your Announcement Bar.

For Roller theme: Within the Top Bar, you can choose to add the following options:

Social media header icons
Phone number
Top Bar menu

Top bar settings for Roller theme
If you have the Customer Accounts enabled in Checkout settings, they will also show up here.

For Inside theme: You can enable Top bar menu in the Header section by going to Navigation and ticking on the Enable Topbar menu. Then, choose the menu you want to display in the drop-down list.

Top bar settings for Inside theme

C. Logos

Roller and Inside theme allow you to upload two logo options: one desktop logo and one mobile logo. You can also adjust the logo display width on a slider which can be up to 180px. The recommended logo size is 180 x 48 px.

Logo settings for Roller & Inside themes

D. Menus

In the Header, you have the option to enable a Main Menu. For Inside theme, you will have more options to customize your menus such as:

Enable mega menu.
Adjust menu position (Left or Center).

Menu settings for Roller theme
Menu settings for Inside theme

In the Header, you can choose to enable the Search. Your Search results will be set to Products. On the desktop view, the Search input will show up as a search box. On mobile, the search box gets minimized to a magnifying glass which users can then click on:

Search settings for Roller theme
Search settings for Inside theme

F. Cart icons

Enable the Cart and choose whether to display it as a Bag or Cart icon:

Cart icon settings for Roller theme
Cart icon settings for Inside theme

G. Fixed sticky header

Here, you have the option to enable the Fixed (sticky) header. This can be applied for both desktop and mobile. If you enable the fixed (sticky) header option, the header will drop-down and stay fixed once you start scrolling down your page.

Fixed (sticky) header setting for Roller theme
Fixed header setting for Inside theme

H. Layout & Padding

For Roller theme: the Main menu top padding setting determines the area above your main menu/navigation. If your logo is fairly high, you may want to push down your menu a bit to be centered with the logo.

For Inside theme: you can choose among three theme's layouts such as Inline, Rich and Minimal. You can adjust the padding by scaling to your preference.

Overview of Themes

Updated on: 19/10/2022

Was this article helpful?

Share your feedback


Thank you!