Header Settings

How to setup Header in Booster theme

header settings

The Booster theme has been specifically designed to provide Shopify store owners with a seamless navigation experience for their web pages. With its intuitive interface and customizable header settings, Booster theme streamlines the process of creating a navigation and settings menu for online store.

In this article:

  1. Accessing header settings
  2. Global Header Settings
  3. Enable shadow
  4. Menu Links 
  5. Enable Megamenu 
  6. Logo Width & Height
  7. Make the Header Stick to the Top 
  8. New update! (Booster V7) - Login Popup
  9. Show Cart (desktop)
  10. Background color
  11. Link Style
  12. Hover Style 
  13. Font Size and Font family
  14. Cart icon
  15. Make the Header Transparent
  16. Mobile Header settings

Accessing header settings

Booster theme offers the ease of customizing the entire header with the help of a variety of distinct options provided. In order to access header settings, click on Sections > Header.

acess header settings

 

Global Header Settings

There are four different types of section layout available for the header in the Booster theme. These layouts include Global default, Boxed, Full Width, and Full-Width Background.

You also have the option to adjust the height of the header and the border-radius.

Enable shadow

You can add a small shadow under your header to make it more visually appealing.

Results on with shadow enabled.

header shadow

 

Menu Links 

With this setting, you can choose different menu links that you want to add to your header. Add or alter according to your store design.  

Header Settings 2

 

Enable Megamenu

With this Header setting, you get the convenience of making a mega menu for your storefront.
Here is a complete setup article: Megamenu and rich submenu Navigation

Logo Width & Height

Want to adjust the width of your logo? We have provided this setting with the option of doing so. If you feel that your logo is just not fitting in right, modify the size to fit it perfectly well. You can modify the Width and the Height of your logo image.

 

Make the Header Stick to the Top 

You can make the header of your storefront stick to the same position at the top of the screen. You can scroll the rest of the screen, but the header will still be there at the top. Either enable or disable this option according to your desire.

Navigate through the entire website with the header stuck at the top.  

Header Settings 4

 

Login Popup

This feature enables a convenient login popup, allowing users to log in directly from the homepage without navigating away from it.

Login Popup SettingLogin Popup

Show Cart (desktop)

Background color

This setting is used to visually separate it from your website's main content, provide balance to the layout, and make the header area more visually appealing. You can now also add a Gradient color to your site.

Header Background color

Note: You need to remove the gradient color selected to use the default background color.

 

Link Style

You also have the option to customize the style of the links in the header section. This allows you to modify the color of the text or elements in the menu section. Additionally, you can change the color of the accent under the active menu elements.

Hover Style 

With this setting, modify the hover style for your menu section. You can pick from 6 varied styles available: Fill(1), Underline(2), Opacity(3), Line through Text(4), Dot Below(5), Dot Above(6).   

Here is how it show on front end.

Header Settings 7

Font Size and Font family

Modify the size and type of fonts used in the header section to customize its appearance.

Cart icon

With this option in Booster Theme, you can alter the cart icon for your storefront.

Select the icon you like best. There are varied options for the user to choose from. The available options include Bag(1), Cart(2), and Basket(3). Pick one according to what you prefer. 

How it looks in-store

 

Make the Header Transparent

You have the option to make the header transparent and customize the text color and active accent color when the header is transparent.

Mobile Header settings

This mobile menu setting modifies the position of the logo for its user. You can choose to position it either in the left or center or on the right.  

How it looks to the user on the front end.

You also have the option to show the cart icon on mobile.

 

- End of the article -