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.
For Bassy theme: Announcement bar can be enabled within the Header section. You can edit the message displayed on your announcement bar, and select to display it on the homepage only.
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.
This setting is not available for Bassy 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.
For Bassy theme, you can upload only one logo for both desktop and mobile, and include alt text.
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:
This setting is not available for Bassy 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.
This setting is not available for Bassy 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.
This setting is not available for Bassy theme.
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.
For Bassy theme: Announcement bar can be enabled within the Header section. You can edit the message displayed on your announcement bar, and select to display it on the homepage only.
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.
This setting is not available for Bassy 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.
For Bassy theme, you can upload only one logo for both desktop and mobile, and include alt text.
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:
This setting is not available for Bassy 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.
This setting is not available for Bassy 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.
This setting is not available for Bassy theme.
Overview of Themes
Updated on: 24 / 08 / 2022