> ## 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

**Theme:** Blum · **Section type:** All-template section

A Featured product section shows one product with its media, price, variants, and buy button on any page. Use it to promote a launch, a best seller, or a seasonal product, so customers can buy it without opening the product page.

> **Note:** You can add this section to any template, except the header and footer. Most blocks can be added once per section. Custom Liquid and Custom text can be added several times.

**What you can do**
- Add the section and choose a product
- Add and arrange product information blocks
- Style the price
- Show safety and regulatory disclosures
- Add a badge to the section heading
- See what customers see
- Change the Featured product settings
- Fix common problems

---

## Add the section and choose a product
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Featured product**. The section comes with the **Vendor**, **Title**, **Variant selector**, **Price**, and **Purchasing** blocks.
3. Under **General**, select a **Product**.
4. Optional: enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
5. Under **Media**, choose the **Media ratio** and **Thumbnail ratio**.
6. Click **Save**.

> **Tip:** If your product images have a transparent background, set a **Media background** color so they match the section.

## Add and arrange product information blocks
1. In the left sidebar, under **Featured product**, click **Add block**.
2. Select a block, for example **View details button**, **Size guide**, **Extra information**, or **Rating**.
3. Drag the blocks up or down to change their order.
4. Click a block to change its settings.
5. Click **Save**.

> **Tip:** Add a **View details button** so customers can open the full product page for more information.

## Style the price
1. Click the **Price** block.
2. Under **Appearance**, select **Show background** to place the price in a shaded box.
3. Choose a **Text size**: **Small**, **Medium**, **Large**, or **Custom**.
4. With **Custom**, drag **Custom text size** from 14 px to 48 px.
5. Choose a **Text color**.
6. Click **Save**.

## Show safety and regulatory disclosures
The **Disclosures** block shows the safety warnings and regulatory notices that you add to the product in the Shopify admin. Available in Blum 3.9 and later.

1. In the Shopify admin, add the disclosures to the product, and choose to show them on the product page.
2. In the theme editor, under **Featured product**, click **Add block** > **Disclosures**.
3. Enter a **Heading**.
4. Optional: clear **Collapse content** to show the disclosures open.
5. Click **Save**.

## Add a badge to the section heading
1. Click **Featured product**.
2. Under **Prominent badge**, enter a **Text**, for example "New".
3. Choose the **Accent scheme**, **Position**, and **Shape**.
4. Click **Save**.

## What customers see
- **Large screens:** the product media appears on the left with thumbnails beside it. The product details and the buy button appear on the right.
- **Mobile:** the media appears above the details. Customers swipe through the media and see a number counter or thumbnails.
- **Variants:** when customers pick a variant, the price, stock, image, and buy button update for that variant.
- **Add to cart:** customers add the product to the cart without leaving the page. What happens next depends on **Theme settings** > **Cart** > **Add to cart confirmation**.
- **Pre-order:** when pre-order applies to the product, the buy button shows the pre-order label. See the article "Pre-order".

## 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. |
| Product | Selects the product to feature. |

### Media
| Setting | What it does |
| ---- | ---- |
| Media ratio | Sets the shape of the main media: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
| Thumbnail ratio | Sets the shape of the thumbnails: Square (1:1), Portrait (2:3), or Landscape (3:2). Options under Fill crop the image to fill the shape. Options under Fit show the whole image. |
| Show paginations as number on mobile | Shows a counter (for example 1/5) on the mobile media slider. |
| Show media thumbnails on mobile | Shows thumbnails under the media on mobile. |
| Media background | Sets the color behind transparent images. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### 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. |

### Title block settings
| Setting | What it does |
| ---- | ---- |
| Enable share | Shows a share button next to the product title. |

### Vendor and SKU blocks
These blocks have no settings. They show the product vendor and the SKU of the selected variant.

### Price block settings
| Setting | What it does |
| ---- | ---- |
| Show sale badge | Shows a sale badge next to the price when the variant has a compare-at price. |
| Show tax and shipping policy | Shows a note about taxes and a link to your shipping policy below the price. |
| Show background | Places the price in a shaded box. |
| Text size | Sets the price size: Small, Medium, Large, or Custom. |
| Custom text size | Sets the price size from 14 px to 48 px. Appears only with Custom. |
| Text color | Sets the price color. |

### Variant selector block settings
| Setting | What it does |
| ---- | ---- |
| Show stock number | Shows how many items are left. Without it, customers still see a basic stock status. |
| Selector type | Shows the options as Button or Dropdown. |
| Show variant swatches | Shows color or image swatches. Set up the swatches in Theme settings > Product information > Variant swatches. |

### Purchasing block settings
| Setting | What it does |
| ---- | ---- |
| Show quantity selector | Shows the quantity field Always, Never, or After adding to cart once. |
| Show dynamic checkout buttons | Shows buttons such as Shop Pay, PayPal, or Apple Pay under Add to cart. |

### View details button block settings
| Setting | What it does |
| ---- | ---- |
| Button style | Shows the link to the product page as a Primary button, a Secondary button, or a Link. |

### Disclosures block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the title of the disclosures group. |
| Collapse content | Shows the disclosures closed, so customers click the heading to open them. |

### Size guide block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the link text that opens the size guide popup. |
| Content source | Shows content from a Static page or a Product metafield in the popup. |
| Selected page | Selects the page to show. Contact forms on the page don't appear. |
| Product metafield name | Shows the content of the connected product metafield. Connect it with the dynamic source button. |
| Icon source | Uses an icon from the Theme library, a Custom image, or Custom SVG code next to the link. |

### Custom text and Custom Liquid block settings
| Setting | What it does |
| ---- | ---- |
| Text | Adds a short line of text (Custom text). |
| Text style | Shows the text in Body or Body light style (Custom text). |
| Liquid code | Adds your own Liquid code (Custom Liquid). |

### Extra information block settings
| Setting | What it does |
| ---- | ---- |
| Accent scheme | Colors the icons with the Main or Extra accent color, or None. |
| Display style | Shows up to 4 items as Horizontal blocks or Vertical collapsibles. |
| Icon source (Item 1–4) | Uses an icon from the Theme library, a Custom image, or Custom SVG code for the item. |
| Heading (Item 1–4) | Sets the item title. Leave it empty to hide the item. |
| Content (Item 1–4) | Sets the item text. |

### Share block settings
| Setting | What it does |
| ---- | ---- |
| Facebook, X / Twitter, Pinterest, Email | Choose which share buttons to show. |

### Rating block settings
| Setting | What it does |
| ---- | ---- |
| Star rating | Sets the star color. Choose your review app in Theme settings > Product information. |

## Troubleshooting
**The section shows a placeholder product.**
No product is selected. Click the section and select a **Product** under **General**.

**The Disclosures block doesn't show.**
The block appears only when the product has disclosures set to show on the product page. Add them to the product in the Shopify admin.

**The Size guide link can't be clicked.**
The link is turned off when it has no content. Select a page in **Selected page**, or connect **Product metafield name** to a metafield.

**My custom price size doesn't change.**
**Custom text size** applies only when **Text size** is set to **Custom**.

## Related articles
- [Blum Product Template](https://doc.ecomx.co/en/article/blum-product-template-cv3oj3/)
- [Blum Featured Product Carousel](https://doc.ecomx.co/en/article/blum-featured-product-carousel-t3g24r/)
- [Blum Product Hotspot](https://doc.ecomx.co/en/article/blum-product-hotspot-1f6iw6d/)
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)