Header

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:

General

Most importantly, Blum theme lets you enable or disable the drawer menu on large screens and sticky header.

Layout

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.

Logo

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.

Navigation

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

Collection Browsing

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.

Currency Selector

To enable the Show currency selector here, first, you need to add a currency on your Shopify store’s payment settings.

Language Selector

Same as currency, to enable show language selector here, first, you need to add a language on your Shopify store’s language settings.

Contact Information

At this part, you can enable or disable to show:

• Email address and phone number
• Social media icons

Transparent Header

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.

Mega Menu

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%.