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.
A. Announcement Bar
B. Top Bar
C. Logos
D. Menus
E. Search
F. Cart icons
G. Fixed sticky header
H. Layout & Padding
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.
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
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.
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.
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).
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:
Enable the Cart and choose whether to display it as a Bag or Cart icon:
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.
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
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.
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
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.
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.
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).
E. Search
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:
F. Cart icons
Enable the Cart and choose whether to display it as a Bag or Cart icon:
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.
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.
Related articles
Overview of Themes
Updated on: 19/10/2022
Thank you!