Featured product
Add one purchasable product and its essential buying controls to another page.
Featured product places one product’s media, information, variants, and buy controls inside a non-product template. Use it for a campaign focus or a product that needs more detail than a product card.
Product
The Product group contains one setting:
| Setting | Default | What it controls |
|---|---|---|
| Product | Blank | Chooses the product shown by this section. Select one before publishing. |
When Product is blank, the section shows an onboarding gallery placeholder and a choose-product message rather than a purchasable item.
Layout
| Setting | Default | What it controls |
|---|---|---|
| Full width | Off | On uses the wider section container. Off keeps the featured product in the page-width container. |
Media
| Setting | Options and default | What it controls |
|---|---|---|
| Desktop media size | 40–70%, step 1; default 50% | The media share of the desktop two-column layout. |
| Enable video looping | On | Allows product video media to loop during playback. |
| Enable image zoom | On | Shows the image zoom control when the product has image media. |
The gallery uses the selected product’s media. Multiple media items provide thumbnails and previous/next controls; on smaller screens it also provides media dots and a counter. Zoom is for image media, so the control is hidden while a non-image item is active.
Product blocks
Add and reorder blocks to match the buying decision. The preset starts with the core blocks below; each named core block is limited to one instance.
| Block | Limit | What it does |
|---|---|---|
| Vendor | 1 | Shows the product vendor when it is available. |
| Title | 1 | Shows the product title. In this section it is rendered as the product heading. |
| Price | 1 | Shows the current price, sale comparison when applicable, unit price, and tax note. |
| Payment installments | 1 | Renders Shopify payment-term information when available. |
| Description | 1 | Shows the product description in the featured-product details area when it is not blank. |
| Variant picker | 1 | Lets shoppers select a variant. It contains the Style setting. |
| Quantity selector | 1 | Lets shoppers set quantity subject to the selected variant’s quantity rules. |
| Buy buttons | 1 | Provides Add to cart and the optional dynamic checkout button. |
| App | App block | Renders a compatible app block in the details area. |
| Custom liquid | No stated limit | Renders the block’s Custom liquid value. |
Blocks render in the order shown in the Theme Editor. Keep Title, Price, Variant picker, Quantity selector, and Buy buttons together so shoppers can understand what they are buying.
Variant picker
The Variant picker block has one setting:
| Setting | Default | Options and use |
|---|---|---|
| Style | Auto | Auto uses swatches for eligible color options, buttons for up to five short values, and a dropdown for longer lists. |
| Swatches requests swatches but falls back to buttons when the option is not eligible or the global product-page swatch setting is off. Buttons uses text buttons. Dropdown uses a select control. |
The global Color swatches settings can therefore change the result of Auto and Swatches. A color option must also expose eligible swatch data for swatches to render.
Buy buttons
The Buy buttons block has Show dynamic checkout button, On by default. When enabled and the current variant is available, Shopify’s accelerated payment button is rendered alongside Add to cart. It is hidden for an unavailable variant. Review it with the store’s payment providers before publishing.
The standard Add to cart flow uses the global Cart behavior where supported. A dynamic checkout button can take shoppers directly through an accelerated payment flow instead.
Spacing
| Setting | Options and default |
|---|---|
| Section spacing | Small, Medium, or Large; default Medium. This section has no None option. |
| Top spacing | On by default. |
| Bottom spacing | On by default. |
Desktop and mobile behavior
The desktop media allocation is controlled by Desktop media size. The gallery and product details become a responsive single-column presentation on smaller screens; use Shopify’s device previews to check the chosen product’s real media and block order. Do not use the desktop percentage as a mobile width promise.
Availability, cart, and empty states
- The current variant controls the displayed price, quantity rules, and button availability.
- An unavailable variant disables Add to cart and hides the dynamic checkout button.
- A product with selling plans may expose purchase options through the shared product form.
- A blank Product setting produces placeholders and a choose-product message, not a real purchase flow.
- This section is a product detail layout, not a Product card; global Product card settings do not control its media or text. Global Color swatches and Cart settings can still affect its variant controls and add-to-cart path.
Accessibility and motion
The gallery labels thumbnails and navigation controls, tracks the selected media, and exposes a zoom button for images. Variant choices use a fieldset/legend or a labelled select, quantity controls can be disabled for unavailable variants, and form errors are announced as alerts. Check keyboard focus, screen-reader labels, and a reduced-motion preference with the real product. The section has no separate motion toggle.
Common issues
- The section shows a placeholder: select a Product in the Product group.
- Swatches do not appear: check the global product-page swatch setting, the variant option’s swatch data, and the Style value.
- The dynamic checkout button is missing: check Show dynamic checkout button, the current variant’s availability, and Shopify payment configuration.
- Zoom is missing: enable Enable image zoom, choose an image item, and confirm the product has image media.
- The gallery feels too narrow or wide: adjust Desktop media size and review the mobile layout separately.
- Add to cart opens the wrong surface: review the global Cart drawer setting and test on the actual template.