Blum Header
Theme: Blum · Section type: Header group section
The Header section sits at the top of every page. It holds your logo, main menu, search, account, and cart icons, plus optional currency and language selectors. Add mega menus and a collections menu to help customers find products faster.
Note: The header is part of the Header group, so it appears on every page. You can't delete it, but you can turn off the parts you don't need. Keep other sections out of the Header group, because they would also show on every page.
What you can do
- Set up your logo and main menu
- Choose the menu layout on large screens and mobile
- Add a mega menu with images and promotions
- Add a collections menu
- Make the header transparent on the homepage
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems
Set up your logo and main menu
- In the theme editor, under Header, click the Header section.
- Under Logo, select an Image. If you don't add one, the header shows your store name as text.
- Set Max width on large screen and Max width on mobile.
- Under Navigation, select a Menu.
- Click Save.
Tip: You create and edit menus in your Shopify admin, under Content > Menus. Nest links under a menu item to create a dropdown with up to 3 levels.
Choose the menu layout on large screens and mobile
- In the Header section, under Layout, select a Menu style on large screens, for example Logo left, menu center.
- Select a Logo position on mobile: Left or Center.
- Select how child menus open: Click or Hover.
- Optional: under General, check Enable drawer menu on large screens to hide the menu behind a menu icon on all screen sizes.
- If you use the drawer menu, select a Drawer style: Dropdown or Scroll.
- Click Save.
Note: Menu style on large screens applies only when Enable drawer menu on large screens is off. Mobile always uses the drawer menu.
Add a mega menu with images and promotions
A mega menu turns the dropdown of one main menu item into a wide panel. It can show images next to the menu links and up to 2 promotional images.
- In your Shopify admin, under Content > Menus, make sure the menu item has child links. A mega menu shows only for an item with child links.
- In the theme editor, under Header, click Add block > Mega Menu.
- In Menu item name, enter the name of the menu item exactly as it appears in your menu, for example Shop. Capital letters don't matter.
- Under Menu image, choose where to show images with Apply menu image to, and pick the image sizes.
- Under Promotional content 1 and Promotional content 2, select an Image, enter a Heading, and add a Link.
- Under Promotion style, select an Image ratio and a Promotion card style.
- Click Save. Repeat for each menu item that needs a mega menu.
Note: On large screens, the mega menu works only with the horizontal menu (Enable drawer menu on large screens off). In the drawer menu, menu images and promotions appear only when Drawer style is Scroll.
Tip: Menu images come from the linked page. A link to a collection shows the collection image, and a link to a product shows its featured image. Links to other pages don't show an image.
Add a collections menu
A collections menu adds an extra menu item that opens a panel of collection cards.
- In the Header section, click Add block > Collections Menu.
- In Menu item name, enter the name customers see, for example Collections.
- Under Collections, select the collections to show.
- Under Layout, select a Style and the Items per row on desktop.
- Click Save.
Note: The collections menu appears before your main menu items. The cards use the image ratio, product count, and overlay settings from Theme settings > Collection card.
Make the header transparent on the homepage
- In the Header section, under Transparent header, check Enable on homepage.
- Optional: select a Logo image that stands out on your first homepage section, for example a white logo.
- Pick a Transparent content color for the menu text and icons.
- Click Save.
Tip: Use a transparent header with a full-width image or video as the first homepage section, and check that the menu text is easy to read on it.
What customers see
- Large screens: the logo, the menu, and the icons sit in one bar, in the layout you chose. Customers click or hover a menu item to open its dropdown or mega menu.
- Mega menu: a wide panel opens below the header with the child links, their images, and your promotional images. Customers click a promotion to open its link.
- Collections menu: a panel with collection cards opens below the header. In the drawer menu, the cards show 2 per row.
- Mobile and drawer menu: customers tap the menu icon to open the drawer from the left. With Dropdown, menu levels open one below the other. With Scroll, top-level items show as tabs, and mega menu images and promotions appear in the drawer. The drawer also shows the account link, the selectors, and your contact information and social icons when they are turned on.
- Sticky header: with Always, the header stays at the top while customers scroll. With On scroll up, it hides when customers scroll down and comes back when they scroll up.
- Transparent header: on the homepage, the header sits on top of the first section, with your transparent logo and content color.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the background and text colors of the header. You edit color schemes in Theme settings > Colors. |
Enable drawer menu on large screens | Hides the menu behind a menu icon on large screens too, so the menu opens in a drawer on all screen sizes. |
Drawer style | Sets how the drawer menu shows menu levels: Dropdown (levels open one below the other) or Scroll (top-level items as tabs, with mega menu images and promotions). |
Enable collapsible menu | Turns second-level items that have child links into expandable rows with a plus and minus icon in the drawer. Appears only when Drawer style is Scroll. |
Header sticky | Keeps the header visible while customers scroll: Not use, Always, or On scroll up. |
Layout
Setting | What it does |
|---|---|
Menu style on large screens | Places the logo and menu: Logo left, menu left; Logo left, menu below; Logo left, menu center; Logo center, menu below; or Logo center, menu left. Applies only when the drawer menu on large screens is off. |
Logo position on mobile | Places the logo on the Left or in the Center of the header on mobile. |
Open child menu by | Opens dropdown menus on Click or on Hover. Touch devices and the drawer menu always use Click. |
Logo
Setting | What it does |
|---|---|
Image | Your logo. If you don't add one, the header shows your store name as text. |
Max width on large screen | Sets the logo width on large screens, from 40 px to 200 px. |
Max width on mobile | Sets the logo width on mobile, from 40 px to 140 px. |
Navigation
Setting | What it does |
|---|---|
Menu | The menu shown in the header. You edit menus in Content > Menus in your Shopify admin. |
Open external link in a new tab | Opens menu links that go to other websites in a new browser tab. |
Currency selector and Language selector
Setting | What it does |
|---|---|
Show currency selector | Shows a country and currency selector. It appears only when your store sells to more than one country in Shopify Markets. |
Show language selector | Shows a language selector. It appears only when your store has more than one published language. |
Contact information
Setting | What it does |
|---|---|
Show email address and phone number | Shows your email address and phone number at the bottom of the drawer menu. You add them in Theme settings > Email address and phone number. |
Show social media icons | Shows your social media icons at the bottom of the drawer menu. You add the links in Theme settings > Social media. |
Transparent header
Setting | What it does |
|---|---|
Enable on homepage | Makes the header background transparent on the homepage, so it sits on top of the first section. |
Logo image | A second logo for the transparent header. If you don't add one, the header uses the main logo. |
Transparent content | Sets the color of the menu text and icons in the transparent header. |
Mega Menu block settings
Setting | What it does |
|---|---|
Menu item name | The name of the main menu item that opens this mega menu. It must match the menu item name in your menu, and the item must have child links. |
Apply menu image to | Shows images next to the links on Level 2, Level 3, or Level 2 & 3 of the menu, or Not use. |
Menu level 2 image size | Sets the size of level 2 images: Small, Regular, or Large. Appears with Level 2 or Level 2 & 3. |
Menu level 3 image size | Sets the size of level 3 images: Small, Regular, or Large. Appears with Level 3 or Level 2 & 3. |
Image ratio | Sets the shape of the promotional images: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
Promotion card style | Card shows the heading on top of the image with a mask overlay. Standard shows the heading below the image. |
Promotional content 1 and Promotional content 2
Setting | What it does |
|---|---|
Image | The promotional image. |
Heading | The text shown with the image. |
Link | The page customers open when they click the promotion. Appears after you enter a heading. |
Mask overlay opacity | Darkens the image so the heading is easier to read, from 0 % to 90 %. Appears only with the Card style. |
Custom mask overlay color | Sets a custom color for the mask overlay. |
Custom content overlay color | Sets a custom color for the heading on the image. |
Collections Menu block settings
Setting | What it does |
|---|---|
Menu item name | The name of the menu item customers click to open the collections panel. The block shows only when this field has text. |
Collections | The collections shown in the panel. |
Style | Card shows the collection title on top of the image. Standard shows it below the image, without a mask overlay. |
Items per row on desktop | Shows 4, 5, or 6 collection cards per row on large screens. |
Troubleshooting
My mega menu doesn't show.
Check that Menu item name matches the menu item in your menu, and that the item has child links. On large screens, also check that Enable drawer menu on large screens is off.
Mega menu images and promotions don't show in the drawer menu.
They appear in the drawer only when Drawer style is Scroll. Menu images also need links to collections or products that have an image.
I can't find "Enable collapsible menu".
This setting appears only when Drawer style is Scroll.
The currency or language selector doesn't appear.
The currency selector needs more than one country in Shopify Markets. The language selector needs more than one published language. Check both in your Shopify admin.
I can't find the free shipping notification in the header settings.
The free shipping notification is in Theme settings > Cart, not in the Header. See "Blum Cart Template".
Related articles
- Blum Announcement Bar
- Blum Footer
- Blum Cart Template
- Blum Search Result Template & Quick Search
- Blum Theme Settings
Updated on: 26/10/2026
Thank you!