In this knowledge base article, you will know how to set up the Header in Blum theme. As you can see, you can customize the header by set up for these part:
Most importantly, Blum theme lets you enable or disable the drawer menu on large screens and sticky header.
You will be able to select menu style on large screens including:
- Logo left, menu left
- Logo left, menu below
- Logo left, menu center
- Logo center, menu below
By default, the layout will be set at Logo left, menu left.
To add the logo image, click the Select image button. The media manager will open up. There, drag and drop your logo, or select it if it is already uploaded. Note that you can adjust Logo max width on large screen (min 40px, max 120px) and on Mobile (min 40px, max 90px). By default, logo will be set at 80px on both screen.
You can click on the Select menu button then select the menu to display or create a new one here.
Clicking on the Main menu here, it will direct you to go to your Shopify store’s main menu page. You can freely add more main menu item here.
Clicking on the Change button, you will have 2 option here:
- Change menu: you can select existing menu or create a new one
- Remove menu: remove the selected menu immediately
This part lets you Enable or disable collection browsing menu: show a list of product collections next to the menu for better catalog navigation. Together with that, you can add heading and select the collection from your Shopify store by clicking on the Select Collection button. The maximum number of collections you can add is 6 collections.
To enable the Show currency selector here, first, you need to add a currency on your Shopify store’s payment settings.
Same as currency, to enable show language selector here, first, you need to add a language on your Shopify store’s language settings.
At this part, you can enable or disable to show:
- Email address and phone number
- Social media icons
This part lets you enable to show transparent header and use text color for transparent header content. Then select Transparent header’s logo image by clicking on the Select image button. If you do not set up the image here, it will auto display the default image logo.
You can add more details for Header by adding Mega menu. Note that Mega menu only works on large screens.
To add Mega menu, firstly, you need to set up menu item for the main menu from Navigation
Then Click on Mega Menu on the Header to add a new item:
Note that you must add the correct menu item name which has been set up on the Navigation. If the main menu item has not been added any child item, mega item will not display.
In the Mega Menu, you can set up to 2 Promotional Contents, along with the Mega Item Name. Each Promotional Content has settings for its heading, image, link, and overlay opacity.
To adjust the Promotional Content image, click the Select Image button and select an existing image or upload a new one. The recommended image size is 900 x 500px .jpg.
You can also adjust the Heading text on the content box, and paste or search a link in the Link field.
The Overlay Opacity for the Collection Card can be adjusted from 0% to 90%.