Featured product

The featured product gives one piece (a best seller, a new arrival, a limited edition) a moment of its own on the home page or a content page: a large photograph the shopper steps through, beside a buy box, with a link to the product page for everything else.

Name in the editor

Featured product (FR: Produit en vedette)

Where to add it

Any template (except the header and footer and Overlays group)

Accepted blocks

All theme blocksApp blocks

Settings

The Heading is optional. It appears as a small label above the product's title.

Layout

On desktop, the photograph runs to the edge of the screen and the buy box stands centered in the remaining space. Media width sets how much of the width the photograph takes: Media-led, Balanced or Even. The buy box always keeps a minimum width. Below 990px, the buy box sits under the photograph.

The section is never taller than the screen: the photograph's frame is capped at the screen height, so the buy box stays in view beside it.

Gallery

This isn't the product page's gallery in miniature. It shows one picture at a time, at every screen size:

• shoppers swipe from one picture to the next, or use the arrows with a mouse (the arrows are hidden on touch screens);
• when the product has more than one media, a progress bar shows where the shopper is;
• there's no zoom here. The full gallery, zoom included, is on the product page.

Image fit sets the frame:

Image fit	Frame
Fit inside the frame (default)	The frame takes the shape of the product's first photograph. Every picture is shown whole inside it.
Fill the frame	Every picture fills a frame of the shape chosen in Image shape (square, portrait or tall), cropped around its focal point.

Image shape only appears in the editor when Image fit is set to Fill the frame.

Blocks

The section accepts all product blocks and content blocks, as well as app blocks. The preset contains the title, price, variant picker, selling plan and buy buttons. Blocks automatically use the product selected in the section. The tax and shipping note, the quantity selector, the dynamic checkout buttons, and the buy bar on phones follow Theme settings > Product, like the product page.

Under the blocks, a "View full details" link always leads to the product page, where the shopper finds the description and every picture.

Changing variants

Choosing an option updates the section in place, without leaving the page: the price, availability, buttons, SKU, and in-store pickup follow the variant, and the gallery moves to the variant's image when it has one. The page address doesn't change.

If the update can't load (a lost connection, for example), the shopper is taken to the product page with their selection, so they always see the right price and availability.

Without a product

Until a product is selected, the section shows a placeholder product ("Example product", a placeholder image and a sample price), including on your online store.