The Roller 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, click Customize (in your Theme Editor) > Sections > Header.

In this article
Announcement Bar
Top Bar
Logos
Menus
Search
Cart icons
Fixed sticky header


Announcement Bar
Here 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, and add a link to your text. If the text box is left blank, the announcement bar will disappear.



Top Bar
A Top bar can be enabled and will display above your 'Main Menu' and below your 'Announcement Bar' if you have that enabled. Within the Top Bar, you can choose to add the following options:
Social media header icons
Phone number
Top Bar menu



Notes: If you have the Customer Accounts enabled in Checkout settings, they will also show up here.

Logos
The Turbo theme allows you to upload two logo options: one main logo and one mobile logo. You can also adjust the logo display width on a slider which can be up to 205px.



Menus
In the Header, you have the option to enable a Main Menu.

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



Search
In the Header, you can choose to enable the Search box. 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:



Cart icons
Enable the Cart and choose whether you'd like it to display as a Bag or Cart icon:



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.

Was this article helpful?
Cancel
Thank you!