Header settings

Everything you will need to know on how to setup your header

Jalal avatar
Written by Jalal
Updated over a week ago

The header settings make it possible for you to fully customize the header of the theme. Upload your logo, move the search bar etc.

To change/configure the header, you'll first have to go to the settings.
You do this by simply clicking on the 'Header' to open the settings.

Once you've clicked on header, the settings will open in the right sidebar!


Configure the header

As stated before, the settings will open on the right side of your screen, this will be the following settings

Layout:

The layout setting provides you with 4 templates you can choose from, this will determine the look (and layout) of your header.
Choose from:
- Logo left, extended searchbar
- Logo left, variant extended searchbar
- Logo center, compact searchbar
- Logo center, extended searchbar

Keep in mind, the 'Logo center, extended searchbar' does not include the button menu. You can activate an horizontal menu by selecting a menu in the 'navigation settings' later on this list.

Width:

By default, the header content will have the same boxed width as the rest of your page's content. But with this setting you can choose to show the header content in full-width.

Colors

Top bar color scheme:
Select the color scheme for the top bar (the bar with the feedback widget, customer service link and language selector)

Main bar color scheme:
Select the color scheme for the main header, where your main header elements are, like your logo, search bar, button etc.

Search bar color scheme:
Select the color scheme for the search bar, this will change the background of the searchbox and the text.

Menu bar color scheme:
Select the color scheme for the horizontal menu bar, as stated above, you can activate this option later in the header settings.

Dropdown menu color scheme:
Select the color scheme for the dropdowns of the menu.

Logo

Logo image:
Ofcourse, your brand is nothing without a good logo. Upload your logo here!

Logo width:
Configure your logo width here, this will make the logo wider. You can set it to a maximum of 200px.

Use .svg format:
Don't want to use a .png or .jpg file? You can use a .svg file logo aswell!
Simply upload your .svg file in 'Files' in the Shopify admin and paste the url to the file in this field. More info on how to upload the file can be found here.

Top bar

Enable top bar:
The settings already tells you what it does, check this to enable the top bar.

Show country selector:
Check this if you want the country selector to show up in the top bar.

Show language selector:
Check this if you want to show a language selector in the top bar

Extra menu item in top bar:
You can enable an extra link for the top bar, use this for quick access to for example the customer service page!

Link:
Set the link of the extra menu item here, for example the customer service page.

Top bar information

Enable slider:
Do you want the topbar items to show in a slider?


Show slider arrows:
Do you want to show slider arrows so customers can click through the USPs?

Enable autoplay:
Do you want the items to autoplay? So the items will slide automaticly.

Seconds between slides:
Set the seconds between the slides

Sticky header:
Want the header to be sticky? In other words, it stays in screen when you scroll.
You can set the following option:
- Sticky header (whole header is sticky)
- Sticky menu (only the horizontal menu is sticky)

Cart icon

Cart icon:
Select the cart icon you want, there are different styles to choose from!

Cart items indicator color scheme:
Set the color scheme for the items indicator (circle with number of items in the cart)

Navigation menu

Menu:
Select the menu you want to show in your horizontal menu bar.

Menu type:
Select the type of menu to show the subcategories in, you can choose a default submenu or a mega menu.

Show collection images in the dropdown:
Do you also want to show miniature images of the collection in the dropdowns? Check this setting.

Auto-fill collection images:
Check this box to automaticly use the image of the first product as a collection image when the collection doesnt have an image.

Align menubar in the center:
Do you want the menu bar to be aligned in the center? Check this box. If you want it aligned on the left, uncheck this box.

Main menu items clickable:
Check the box to make the main menu items clickable. This way the customer can navigate to the main category.

Menu in ALL CAPS:
Check the box if you want all the menu items to be capitalized.

Highlight sale menu item:
Check the box if you want your menu item called 'Sale' to be highlighted in the menu. It will get a red background and white text.

Menu font:
Select the font to show the menu items in, you can choose between the body font or the heading font. Both of these options can be customized in the general theme settings under "Typography".

Socials

Want to show your social media (clickable icons) in your header? Check this box!
For more info on how to connect your social media accounts click here.

Trustmark

Image:
Want to use a trustmark, you can upload the image here.

Max. image width:
Select the width of your trustmark image. Maximum is 150px, but the default is set to 130px.

Use a logo in .svg format:
Don't want to use a .png or .jpg file? You can use a .svg file logo aswell!
Simply upload your .svg file in 'Files' in the Shopify admin and paste the url to the file in this field. More info on how to upload the file can be found here.

Trustmark link:
Fill in the link of your trustmark page, this will open when the customer clicks on the image/logo.

Online store

Disable cart and account:
Want to use your store as a online catalogue, then this option is perfect.
You can disable the cart and account pages, so customers can't order online.

Mobile Layout

Mobile logo image:
Upload your logo to be shown on mobile devices. If not used, your logo that you've uploaded for desktop will be used.

Mobile logo width:
Configure your logo width for mobile here here, this will make the logo wider. You can set it to a maximum of 200px.

Use .svg format:
Don't want to use a .png or .jpg file? You can use a .svg file logo aswell!
Simply upload your .svg file in 'Files' in the Shopify admin and paste the url to the file in this field. More info on how to upload the file can be found here.

Enable compact search icon:
Don't want to show the full search bar by default on mobile devices? Check this option to enable the compact search icon. The user will have to press the search icon before the search field will be visible.

Extra blocks

Ofcourse you can add new blocks, like the 'Button menu' or some 'Information' in the top bar. There is only 1 Button menu allowed, and 3 Information items.
To add blocks you simply click on the 'Add block' button in your sidebar on the left of your screen.

After you clicked 'Add block', you can select the button menu (if not already in your header) or a Top bar information item.

Button menu settings

Use this menu in mobile navigation:
Enable this to also show your button menu in the mobile menu. If you leave this unchecked the button menu will only be enabled on desktop view.

Menu:
Select the menu that you want to show in the button menu.

Menu button color scheme:
What color does the button have to be, what color scheme do you want to use?

Top bar information settings

Heading:
Fill in your information, for example: Free shipping for orders above $25,-

Did this answer your question?