Blum Hero Image With Text
Theme: Blum · Section type: All-template section
The Hero image with text section places a large image next to a heading, description, and up to 2 buttons. Below it, you can show a row of highlighted collections so customers can start shopping right away.
Note: You can add this section to any template, except the header and footer.
What you can do
- Add the section, your image, and text
- Show highlighted collections below the hero
- Add a prominent badge
- See what customers see
- Change the layout and collection card style
- Fix common problems
Add the section, your image, and text
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Hero image with text.
- Under Image, select an Image and choose its Image ratio.
- Under Text, enter a Subheading, Heading, and Description.
- Under Buttons, enter a Primary button label and Primary button link. Add a secondary button the same way, or clear a label to hide that button.
- Under Layout, set Content alignment to Left or Center.
- Click Save.
Show highlighted collections below the hero
- Under Highlighted collections, make sure Enable highlighted collections is on.
- Enter a Heading, for example "Shop by category".
- In Collections, select your collections. 6 collections work best.
- Choose a Style: Standard (title below the image) or Card (title on the image, with a mask overlay).
- Set Items per row on desktop to 4, 5, or 6.
- Optional: turn on Show 'View all' button to view all collections and edit the 'View all' button label.
- Click Save.
Tip: The collection images, product count, and overlay come from Theme settings > Collection card. Change them there to update every collection card in the store.
Add a prominent badge
- Under Prominent badge, enter the badge Text. Leave it empty to hide the badge.
- Choose the Accent scheme, Position, and Shape.
- Click Save.
What customers see
- Hero: the image sits beside the text and buttons on desktop, and above or below them on phones.
- Highlighted collections: a row of collection cards that customers can scroll sideways. Arrows appear when there are more collections than fit in the row.
- View all: the button opens your all-collections page.
- Phones: customers swipe through the collection cards. Turn on Show navigation on mobile to show the arrows as well.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
Layout
Setting | What it does |
|---|---|
Content alignment | Aligns the hero text Left or Center. |
Remove padding top | Removes the space above the section. |
Remove padding bottom | Removes the space below the section. |
Text
Setting | What it does |
|---|---|
Subheading, Heading, Description | The hero text. |
Image
Setting | What it does |
|---|---|
Image | The hero image. |
Image ratio | Shapes the image as Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image (keeps the original shape). |
Buttons
Setting | What it does |
|---|---|
Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. |
Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. |
Highlighted collections
Setting | What it does |
|---|---|
Enable highlighted collections | Shows the row of collections below the hero. |
Style | Standard shows the title below the image. Card shows the title on the image, over a mask overlay. The mask overlay doesn't apply to Standard. |
Heading | The title above the collections. |
Collections | The collections to show. 6 collections recommended. |
Items per row on desktop | Shows 4, 5, or 6 collections per row on desktop. |
Show 'View all' button to view all collections | Shows a button that opens the all-collections page. |
'View all' button label | The text of that button. |
Show navigation on mobile | Shows the arrows on phones. |
Prominent badge
Setting | What it does |
|---|---|
Text | The badge text. Leave it empty to hide the badge. |
Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
Position | Places the badge on the Left or Right. Appears after you enter text. |
Shape | Star, Diamond, or Asterisk. Appears after you enter text. |
Troubleshooting
The collections show placeholder images.
No collections are selected yet. Select them in Collections under Highlighted collections.
The collection cards look different from what I set here.
Image ratio, product count, and overlay opacity of the cards come from Theme settings > Collection card.
I don't want the collections row.
Turn off Enable highlighted collections.
Related articles
Updated on: 23/10/2026
Thank you!