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
- Logo left, extended searchbar right

- Logo center, compact searchbar right

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 be 1600px but you can change width using the width setting slider. 2000px is fullwidth.

Height:

You can use this setting to control the height of header from small, medium and large all responsive sizes.

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.

Top bar

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

Top bar font size:
You can control the font size of top bar content.

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

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.

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.

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.

Menubar height:
Select the menu bar height from small, medium and large.

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 a custom font as well.

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.

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.

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,-

Promo banners

Other than these 2 menu items, you have 2 new blocks in Xclusive theme:

These can help you create promo banner inside the mega menu > sub menu items:

You can create something awesome with these new blocks. Looking forward to seeing your creations.

Did this answer your question?