Header

Let’s set up the Blum Theme Header properly with this article!

About Blum Theme HeaderClick to copy 2222

The Blum theme header is the top section of your website that appears on every page. It typically includes your brand name, logo, and navigation menu.

Access To Edit Blum Theme HeaderClick to copy 2222

From any page in your Blum Admin Dashboard, please visit Header Group > Header.

While you can add more sections to the header group, it’s not recommended. The header remains the same on all pages, so only essential information like brand details and default settings should be included in the header group.

The header itself cannot be deleted, but you can remove individual items within it.

Customize Blum HeaderClick to copy 2222

Edit General SettingsClick to copy 2222

Color SchemeClick to copy 2222

Under the Color Scheme, you can choose a specific scheme for the Header section: including Text color and Background color. To modify or add a new color scheme, go to Theme Settings > Color.

Drawer MenuClick to copy 2222

The drawer menu is a hidden navigation menu that slides out from the side of the screen. It is commonly used on mobile devices to save screen space, but it can also be used on larger screens to create a more minimalist look.

To turn on the drawer menu on large screens, check the “Enable drawer menu on large screens” box. To turn it off, uncheck the box.

A sticky header is a header that remains fixed at the top of the screen even when scrolling down the page. This can be useful for keeping your navigation menu and other important information easily accessible to customers.

Note: The sticky header will hide when you scroll down the page and only appear when you scroll up.

To enable the sticky header, check the “Enable sticky header” box. To disable this function, uncheck the box.

Edit Layout SettingsClick to copy 2222

Blum theme provides several layout options for larger screens:

  • Logo left, menu left
  • Logo left, menu below
  • Logo left, menu center
  • Logo center, menu below

The default is logo left, menu left. To change the layout, select your preferred option from the “Menu style on large screens” dropdown.

Note: The layout settings will only apply if you turn off the “Enable drawer menu on large screens” option.

For mobile screens, the drawer menu will be enabled as default so the layout settings will not apply.

Edit Logo SettingsClick to copy 2222

To add a logo:

  1. Go to the Blum header settings > Logo
  2. Click “Select image” button under the logo section.
  3. Upload your logo or select an existing image from your media library.

You can set maximum logo widths for desktop and mobile. The default width is 40px for both desktop and mobile, but you can drag the slider or enter a number between 40px and 200px for desktop and 40px and 140px for mobile in the box.

Edit Navigation SettingsClick to copy 2222

To choose a navigation menu:

  1. Go to the Blum header settings > Navigation.
  2. Under Navigation, click “Select menu” button.
  3. Pick an existing menu or create a new one.

To change or remove the selected menu, click on “Change” button.

You can manage your navigation menus under Online Store > Navigation.

You can choose whether to open external links in a new tab or not. This option can help improve your store’s SEO and increase visitor engagement by keeping them on your website longer.

Edit Currency Selector SettingsClick to copy 2222

To enable the currency selector, check the Show currency selector box. Once enabled, a currency dropdown will appear in the header. This dropdown allows customers to change the currency that they see in the store.

Note: If the drawer menu is enabled, the currency selector will appear in the bottom of the drawer menu of the header.

To enable the currency selector, you must first add countries to your Shopify store’s Markets.

Edit Language Selector SettingsClick to copy 2222

The language selector is the same as the currency selector and appears next to it in the header menu. To enable it in the drawer menu, check the “Show language selector” box.

Note: If the drawer menu is enabled, the Language selector will appear in the bottom of the drawer menu and next to the Currency Selector. This feature only works if your store has multiple languages. To set this up, please follow the Shopify guide on adding and managing languages on your site.

To enable the language selector here, you must first add a language to your Shopify store’s language settings and assign it to the market you want to show.

Edit Contact Information SettingsClick to copy 2222

In this section, you can enable or disable the following:

  • Email address and phone number
  • Social media icons

The contact information will appear in the drawer menu of the header.

Note: If the drawer menu is not enabled, the currency selector will not appear in the header.

To make the contact information appear after enabling it, you must first add the contact information in the theme settings.

Edit Transparent Header SettingsClick to copy 2222

Here, you can enable a transparent header for the homepage only. This will make the header background invisible, allowing your website’s content to blend seamlessly with the background image or color of the homepage.

To enable the transparent header, simply check the Enable Transparent Header checkbox.

You can also select a custom logo image to be displayed in the transparent header. To do so, click on the Select Image button and choose the desired image from your media library.

Note:
  • If you do not select a custom logo image, the default logo image will be used in the transparent header.
  • If you have not uploaded a default logo image in the Logo section, the logo image selected here will not be displayed.

You can customize the colors of the text and icons in the transparent header by clicking on the Transparent Content color picker.

Edit Header Menu BlocksClick to copy 2222

The Header section provides two menu types: Mega Menu and Collection Menu. These menus allow you to organize and display your website’s content in a visually appealing and user-friendly manner.

To add a Mega Menu or Collection Menu to the header, simply click the “Add Block” button. This will open a menu selection dropdown, where you can choose the desired menu type.

To modify an existing block, click on it to open the settings modal.

Edit Mega MenuClick to copy 2222

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 “Add Block” button > select 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 to any child item, the 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 mask 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 Mask overlay Opacity for the Collection Card can be adjusted from 0% to 90%.

Edit Collection MenuClick to copy 2222

The Blum theme allows you to display a dropdown menu of product collections in the header. This makes it easy for customers to browse your store catalog.

Click on “Add Block” button > select Collection Menu on the Header to add a new item. Then, you can start to customize for the Collection menu in the settings.

Note: You can change the content color for the Collection menu by accessing Theme settings > Collection card > select Color scheme you want to apply.

collection menu color text

  1. Add a heading that will display above the collection menu.

  1. Click Select Collections and choose collections to display (maximum 6 collections).

  1. Select Items per row on large screen

You can customize the number of collections displayed on large screens, such as desktops and laptops, to ensure a visually appealing and organized layout. The number of collections can be set from 4 to 6 items.

To modify the number of collections, simply drag the slider to the desired value.

Once enabled, customers will see the collection browsing menu appear next to the main navigation menu in the header. It will contain clickable links for each collection you selected.

Frequently Asked QuestionsClick to copy 2222

What Is The Defaulted Logo Size To Edit In Blum Theme Header?Click to copy 2222

40px for both desktop and mobile, but you can drag the slider or enter a number between (1) 40px and 200px for desktop and (2) 40px and 140px for mobile in the box.

Can I NOT Show Social Media Icons In Contact Information Settings?Click to copy 2222

Yes, simply untick the box

Where Can I Change Text Color For The Header’s Collection Menu?Click to copy 2222

To change the color of all text in the Collection menu, please access Theme settings > Collection Card > Color scheme

Navigate this category

Previous