> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Featured product carousel with a heading, a badge, and a row of product cards](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fpc-1_q0yq6u.png)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Featured product carousel**.
3. Under **General**, enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
4. Under **Product item**, click **Select** next to **Products**, and choose the products.
5. Drag the products in the list to change their order.
6. Click **Save**.

## Choose the card style and layout
1. Click **Featured product carousel**.
2. 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.
3. Choose the **Content alignment**: **Left**, **Center**, or **Diagonal**.
4. Choose the **Items per row on desktop**: 2, 3, or 4. This doesn't apply to **Diagonal**.
5. 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
1. Under **Product item**, select **Show ranking badges on products**.
2. Choose the **Ranking badge shape**: **Ribbon** or **Rectangle**.
3. Choose the **Ranking badge accent scheme**: **Main** or **Extra**.
4. 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.
1. Under **Product item**, drag **Mask overlay opacity** to make the overlay lighter or darker.
2. Choose the mask overlay color, the **Content overlay** color, and the **Star rating overlay** color.
3. 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.
![Mobile view: customers swipe through the products, with a next arrow](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fpc-2_1ax3jeo.png)

## 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
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Featured Collections](https://doc.ecomx.co/en/article/blum-featured-collections-1ioinmx/)
- [Blum Featured Product](https://doc.ecomx.co/en/article/blum-featured-product-1euueqp/)
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)