Featured Product

What it is / what it's for#

The Featured Product section lets you showcase one specific product anywhere, on the homepage, a landing page, or any other page, as a compact "mini product page." Shoppers can pick a variant and add it to the cart right there, without going to the full product page.

Under the hood it's essentially a portable copy of the [Main Product Section](./Main%20Product%20Section.md): same gallery, same reorderable information blocks, same live variant updates. The main difference is where the product comes from, you choose it in the theme editor instead of it being the current page's product.

Because it's a near‑twin of the Main Product Section, this document focuses on what's different. For full details of the shared parts (layout, gallery, blocks, colours), read the Main Product Section doc.

Where it lives#

How it's different from the Main Product Section#

Everything else, the two‑column layout, media gallery options, zoom/lightbox, the information blocks and how they're arranged, light/dark colour behaviour, conditional asset loading, and the live variant updates, works the same as the Main Product Section.

Settings you can change#

All the same layout / media / zoom / colour settings as the Main Product Section, plus:

…and minus the section error‑colour fields.

Blocks#

The same information blocks as the Main Product Section, except Vendor and Selling plan are not available here.

When you first add the section, it comes pre‑filled with a sensible default set: Title, Price, Variant picker, Quantity, Buy buttons, Pickup availability, Description. You can then add, remove, and reorder blocks as usual.

What it depends on#

The same snippets, scripts, and styles as the Main Product Section, with these differences:

• It reuses `main-product.css` (and the main-product-section-id-… styling), so it inherits the PDP's look automatically.
• It does not load the 3D model viewer (model-3d.js).
• Conditional loading (gift‑wrap CSS, pickup scripts, etc.) works the same way, just counted within this section.

How it connects to the rest of the theme#

• Use it to promote a hero product on the homepage or campaign pages.
• It shares the exact building blocks (price, options, inventory, buy buttons) with the product card and the Main Product Section, keeping everything consistent. See [Shared Product Components.md](./Shared%20Product%20Components.md).

Product data it uses#

Same as the Main Product Section (variants, media, metafields, inventory, pickup, structured data), but the product is the one you selected in the section's settings rather than the current page's product.

Customization points & important notes#

• Always pick a product in the section settings, otherwise shoppers see the placeholder.
• Don't expect the URL to change when a variant is chosen here; that's intentional for an embedded product.
• Styling is shared with the PDP (main-product.css / src/styles/scss/sections/main-product.scss). Changing that SCSS affects both the Main Product Section and Featured Product. There's no separate Featured Product stylesheet to edit.
• No Vendor / Selling‑plan / 3D / error‑colour options here, use the Main Product Section if you need those.

Behind the scenes (for developers)#

Product resolution & empty state (featured-product.liquid:1-11): assign featured_product = section.settings.product then assign product = featured_product, so all downstream block logic (identical to main‑product) works unchanged; if featured_product == blank, renders a placeholder and the whole body is wrapped in else/endif.

Root element (featured-product.liquid:12-19): <product-info id="FeaturedProduct-{{ section.id }}" … data-update-url="false"> the key behavioural difference (no URL/history rewrite on variant change).

Twin of main‑product. Same section_id alias, same <style> block, same layout‑class {% liquid %}, same block‑dispatch case, and same post‑loop modal/structured‑data rendering as main-product.liquid. Differences:

• Schema adds a product picker (featured-product.liquid:~5649) and omits light_section_error_color / dark_section_error_color.
• Block schema omits vendor and selling_plan (and the dispatch has no when 'vendor' / when 'selling_plan').
• Has a preset with 7 default blocks (so it's insertable on any page), unlike main‑product's "presets": [].
• 3D model script commented out (no model-3d.js).
• Gift‑wrap and product‑essentials colour CSS use a different variable/selector scheme than main‑product.
• Reuses main-product.css and the main-product-section-id- class prefix.

Custom elements / behaviour: identical to main‑product (<product-info>, <price-per-item>, <volume-pricing>, <show-more-button>), driven by assets/product-info.js. See the Main Product Section developer notes for the shared internals.