Section: Featured Product

Everything you'll need to know on how to setup your Featured Product section.

The Featured Product section displays a single product with the same rich layout as your product page — gallery on the left, title, price, variants, and call-to-action on the right. Use it to spotlight a specific product anywhere on your store (homepage, landing pages, blog articles). Supports 14 modular block types: title, description, rating, price, variant selector, features list, add-to-cart, bulk pricing, promo banner, subscription selling plans, reviews carousel, custom text, spacer, and collapsible rows.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Featured Product, then click on it.

3) Done — your Featured Product section is added. Pick a product in the section settings to see it appear.

The general settings contain the product, gallery dimensions, badge configuration, placeholder, and collapsible row styles. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, text colors, button styles, and badge colors.

Pick the product to display. Pick from any of the products in your store catalog. If left empty, the section shows a placeholder layout in the theme editor.

Percentage of total width occupied by the gallery column on desktop, between 35% and 60%. Default: 50%. Lower values give more room to the product info column.

Width of the main gallery image inside the gallery column, between 50% and 100%. Default: 100%. Lower values create margin around the main image when thumbnails sit beside it.

Fixed height of the main image on mobile in pixels (200–500). Default: 320 px.

Size of each thumbnail in the gallery on desktop in pixels (60–120). Default: 80 px.

Size of each thumbnail on mobile in pixels (40–80). Default: 55 px.

Tick this box to display sale, discount, or product tag badges on the main gallery image. Default: on.

Choose between horizontal badges or diagonal ribbon style. Normal - Pill badge for a rounded horizontal pill, or Ticker - Diagonal corner ribbon for an angled ribbon across the corner.

How to display the savings amount. Money format uses your shop's currency automatically. Percentage shows SAVE 25%; Money shows SAVE $30.00.

What to show when product has both discount and special tag. Discount Only, Tag Only, or Both. Tag badges read from product tags like NEW, HOT, EXCLUSIVE.

Position of the badge on product images. Choose Top Left or Top Right.

Message shown in the theme editor when no product is selected. Default: Please select a product to feature. Helps you remember to pick a product before publishing.

Visual style of the Collapsible Row blocks: Minimal (clean lines) for a subtle look with horizontal dividers, or Filled (dark header) for bold colored headers that stand out. Default: Minimal.

Background color of the Collapsible Row header when closed. Default: #2b2020 (dark brown).

Text and icon color when the row is closed. Default: #ffffff (white).

Background color of the header when the row is expanded. Default: #f5f0eb (light cream).

Text and icon color when the row is expanded. Default: #2b2020.

Background color of Collapsible Rows in Minimal style. Default: #f5f4f2 (very light grey).

The Featured Product section supports 14 block types — drag and drop them to build your product layout. Click Add block inside the section to choose. Most blocks have limit: 1 per section.

Displays the product title as an H2 tag. No settings — uses the product's title automatically. Limit: 1.

Displays the product description. Use Custom description to override the product's description with custom rich text. Truncate length (50–500 characters) limits the displayed length. Limit: 1.

Displays a circular rating ring with a percentage and a label. Configure Rating percentage (0–100%) and Rating text (e.g. 97% of customers love it). Useful for trust signals. Limit: 1.

Displays the product price with optional Shop Pay Installments info below. Updates automatically when the visitor selects a different variant. Limit: 1.

Displays variant options (color, size, etc.) for the product. Display style: Button, Swatch, Image, or Select dropdown. Label prefix: prepends text like Choose to each option. Show sold-out badge: marks unavailable variants. Color swatches: enable visual color swatches with optional metafield-driven colors. Image swatches: enable per-variant image swatches. Limit: 1.

Displays up to 6 short bulleted feature statements. Customize the Bullet style (e.g. •, ✓, ★) and fill in Feature 1 through Feature 6. Perfect for highlighting key product benefits at a glance. Limit: 1.

The main purchase button. Show quantity: include a quantity selector. Button text: customize the label (default ADD TO CART). Sold out text and Buy It Now text: customize labels. Show ATC button and Show dynamic checkout control which buttons appear. Limit: 1.

Displays a quantity-based pricing matrix (Buy 2, save 10%; Buy 3, save 20%). Title: customize the heading. Bundle option: pick which product option (1, 2, or 3) drives the bulk pricing. Only renders for products with the chosen option. Limit: 1.

Displays a promotional banner with up to two icon + text statements (e.g. Free Shipping over $60, Get a Free Coconut Bar). Highly customizable: background image with overlay, gradient or solid background colors, padding (responsive), border radius, typography settings, 14 icon options, and per-statement toggles. Use to call out shipping incentives, gifts with purchase, or limited-time offers right inside the product info column.

Displays a subscription selector for products with active selling plans (Shopify Subscriptions). Customize Label (e.g. Purchase options), One-time label, Save label, and Frequency label. Visitors choose between one-time purchase or subscription with savings. Only renders when the product has selling plans. Limit: 1.

Displays up to 3 customer reviews in a rotating carousel below the gallery. Each review has an avatar, highlight (short headline), review text, author name, and an optional Verified Buyer badge. Manually curated — perfect for showcasing your best reviews next to a product. Limit: 1.

Displays free-form rich text. Text: any HTML rich-text content. Alignment: Left, Center, or Right. Use for compatibility notes, sizing guidance, or any custom message that doesn't fit elsewhere.

Adds vertical empty space between blocks. Set Height in pixels (10–100). Useful for fine-tuning spacing without changing block-level margins.

An expandable row with a heading and rich-text content. Set Heading (e.g. Shipping & Returns), Content, Open by default (start expanded), Show icon, and pick an Icon (Menu, Package, Shipping, Returns, Guarantee, Tag, Discount, Gift, Payment, Info, Star, Check, Heart, Settings, Globe). Add multiple Collapsible Rows for shipping, returns, ingredients, dimensions, etc.

Featured Product supports app blocks (@app) — third-party Shopify apps that integrate into product pages can install their blocks here. Common examples: review apps, upsell apps, custom field apps, and product personalization tools.

You need to pick a product in the Product setting at the top of the section. If empty, the section shows a placeholder layout. Make sure the product is published (not in draft) — drafts won't render on the storefront.

Yes — Featured Product can be added anywhere (homepage, landing pages, blog articles, custom pages). Each instance can feature a different product. Useful for spotlighting different bestsellers across your store.

Bulk pricing reads from a chosen product option (typically a Quantity or Pack size option). Set up the option's values with their corresponding prices in the product variants, then pick that option in the Bulk Pricing block's Bundle option field. Visitors click a tier to switch the variant.

The Selling plan block only renders when the product has active selling plans (Shopify Subscriptions). If the product has none, the block is hidden — it won't appear as an empty placeholder. Configure subscriptions via Shopify's Subscriptions app.

Color swatches use either CSS color metafields (recommended) or fall back to variant images. Set up a Color metafield definition with the swatch color values per variant in Settings → Custom data → Variants. With Use metafield colors on, the swatches automatically pick up the colors.