Blum Featured Product Carousel
Theme: Blum · Section type: All-template section
A Featured product carousel shows a hand-picked list of products in a row that customers scroll through. Use it for best sellers, new arrivals, or products on promotion, and add ranking badges to show a top-10 style list.
Note: You can add this section to any template, except the header and footer. Until you select products, the section shows sample product cards.
What you can do
- Add the section and choose the products
- Choose the card style and layout
- Show ranking badges
- Change the overlay colors of Card style
- See what customers see
- Change the Featured product carousel settings
- Fix common problems
Add the section and choose the products
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Featured product carousel.
- Under General, enter a Section subheading, Section heading, and Section description. Leave a field empty to hide it.
- Under Product item, click Select next to Products, and choose the products.
- Drag the products in the list to change their order.
- Click Save.
Choose the card style and layout
- Click Featured product carousel.
- Under Layout, choose a Style:
- Standard: the product details appear below the image.
- Card: the product details appear on the image, over a mask overlay.
- Choose the Content alignment: Left, Center, or Diagonal.
- Choose the Items per row on desktop: 2, 3, or 4. This doesn't apply to Diagonal.
- Click Save.
Tip: Diagonal shows 2 products at a time on large screens next to the heading. Use it when you feature a few products with strong images.
Show ranking badges
- Under Product item, select Show ranking badges on products.
- Choose the Ranking badge shape: Ribbon or Rectangle.
- Choose the Ranking badge accent scheme: Main or Extra.
- Click Save.
The badges number the products 1, 2, 3, and so on, in the order of the Products list. To change a product's rank, drag it to a new place in the list.
Change the overlay colors of Card style
These settings apply only to the Card style.
- Under Product item, drag Mask overlay opacity to make the overlay lighter or darker.
- Choose the mask overlay color, the Content overlay color, and the Star rating overlay color.
- Click Save.
Note: In the editor, the mask overlay color picker is labelled "Mask overlay will be disabled on Standard style." It's the first color picker under Mask overlay opacity.
What customers see
- Large screens: the products appear in one row. Customers scroll with the previous and next arrows.
- Mobile: customers swipe through the products. Arrows appear only when Show navigation on mobile is selected.
- Ranking badges: each card shows its number in a ribbon or a rectangle.
- Product cards: the cards follow Theme settings > Product card, for example the hover image, badges, and quick shop.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. Edit the schemes in Theme settings > Colors. |
Section subheading | Adds a short line above the heading. |
Section heading | Adds the section title. |
Section description | Adds a short text below the heading. |
Layout
Setting | What it does |
|---|---|
Style | Standard shows the product details below the image. Card shows them on the image, over a mask overlay. |
Items per row on desktop | Shows 2, 3, or 4 products at a time on large screens. Doesn't apply to Diagonal. |
Content alignment | Aligns the heading and products Left or Center, or uses the Diagonal layout. |
Show navigation on mobile | Shows previous and next arrows on mobile. |
Remove padding top | Removes the space above the section. |
Remove padding bottom | Removes the space below the section. |
Product item
Setting | What it does |
|---|---|
Products | Selects the products in the carousel, in the order shown. |
Show ranking badges on products | Numbers the products in the order of the Products list. |
Ranking badge shape | Shows the rank in a Ribbon or a Rectangle. |
Ranking badge accent scheme | Uses the Main or Extra accent color for the ranking badge. |
Image ratio | Sets the card image shape: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
Mask overlay opacity | Sets how dark the overlay on the image is, from 0 % to 90 %. Card style only. |
Mask overlay | Sets the overlay color. Overrides the banner mask overlay color. Card style only. |
Content overlay | Sets the text color on the image. Overrides the banner content overlay color. Card style only. |
Star rating overlay | Sets the star color on the image. Configure ratings in Theme settings > Product information. |
Prominent badge
Setting | What it does |
|---|---|
Text | Sets the badge text. Leave it empty to hide the badge. |
Accent scheme | Uses the Main or Extra accent color. Appears after you enter a Text. |
Position | Places the badge on the Left or Right. Appears after you enter a Text. |
Shape | Shows the badge as a Star, Diamond, or Asterisk. Appears after you enter a Text. |
Troubleshooting
The section shows sample products.
No products are selected. Under Product item, select the Products.
Changing Items per row on desktop does nothing.
Items per row on desktop doesn't apply when Content alignment is Diagonal.
The overlay settings don't change anything.
The mask overlay and content overlay apply only to the Card style.
The ranking numbers are in the wrong order.
The numbers follow the order of the Products list. Drag the products to reorder them.
Related articles
Updated on: 23/10/2026
Thank you!