The header settings make it possible for you to customize the header of the theme.
Configure Announcement bar.
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 8 templates you can choose from, this will determine the look (and layout) of your header.
Choose from:
Width:
By default, the header content will be 1600px but you can change width using the width setting slider. 2000px is fullwidth.
Minimal height:
You can use this setting to control the height of header from small, medium and large all responsive sizes.
Show header border:
Displays a border top/bottom or in both positions.
Header border opacity:
Control the transparency of border.
Header borders width and settings:
Controls the width of header either boxed or fullwidth. You can also check the option to either display a shadow or not and control the transparency of shadow.
Transparent header:
Check the option to enable the transparent header, it works if the first section is static section or a slideshow section.
When you have transparent header enabled you can choose to show a background on hover.
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.
Enable top bar:
The settings already tells you what it does, check this to enable the top bar.
Top bar height:
You can control the height of top bar in the xpert theme.
Top bar font:
You can control the font size of top bar content and choose whether to go with primary or secondary font family.
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!
Icon:
This icon will display beside the extra menu item in topbar.
Link:
Set the link of the extra menu item here, for example the customer service page.
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
You can upload the logos from theme settings > logos.
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.
Search bar:
With these options you can control the font size in search bar and control the height/width of search 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:
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)
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 menus:
Do you also want to show miniature images of the collection in the parent and submenus?
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.
Show collection images in a circle:
Check this option it will display the images in circle.
Align menu items:
You can align the menu items left/right/center and divide evenly.
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.
Sale menu item:
Write the menu item in your header which you want to highlight as sale.
Menu font:
Customize the menu fonts using these options.
Megamenu:
With these settings you can define custom menu items per column for both menu structures. You can control first level of menu items added in dropdown and also control the submenu items.
Dropmenu:
You can here customize the dropdown menu items font family, font size and weight.
Image:
Want to use a trustmark, you can upload the images 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.
Login button:
If you want to have a custom login you can enable this option and customize it according to your need.
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.
Header layout:
Control the logo alignment in the header.
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 88px.
Menu icon:
To give you more control you can change standard mobile menu icon.
Enable compact search icon:
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.
Header blocks
Ofcourse you can add more blocks in the header:
Top bar information settings
Heading:
Fill in your information, for example: Free shipping for orders above $25,-
Icon or custom image:
By default with top bar information text you will check ✅ icon which you can change from these settings either change the icon or upload custom image.
Promo banners
Other than these 2 menu items, you have 2 new blocks in Xpert theme:
These can help you create promo banner inside the mega menu > sub menu items:
You can create something awesome with these new blocks.
You can also add Custom liquid block in your headers to add custom content.
Looking forward to seeing your creations.