Featured products
Show products from a collection or a hand-picked product list.
Featured products creates a product carousel or stacked grid. Use a collection for an automatically maintained selection, or choose individual products when the merchandising order must be exact.
Heading
The Heading group appears first.
| Setting | Default | What it controls |
|---|---|---|
| Eyebrow | Featured | Short text above the heading. |
| Heading | Featured products | Main heading for the product group. |
| Text | Show a collection or a hand-picked selection of products. | Optional rich text below the heading. |
| Heading alignment | Left | Left, Center, or Right. |
| Content width | Medium | Small, Medium, or Large width for the heading content. |
| Link label | View all products | Optional label for the heading link. |
| Link URL | Blank | Destination for the heading link. When blank, it falls back to the selected collection URL. |
Products
| Setting | Default | Options and use |
|---|---|---|
| Collection | Blank | Supplies products from the selected collection. |
| Products | Blank; up to 16 selected products | A hand-picked source. When populated, it replaces Collection. |
| Full width | On | On uses the wider product container; Off keeps it in the page-width container. |
| Stack products | Off | On renders a multi-row grid. Off renders a horizontal carousel. |
| Show carousel progress bar | On; visible when Stack products is Off | Shows carousel position feedback. It is not used for the stacked grid. |
| Products to show | 2–16, step 1; default 6 | Maximum number of products rendered from the selected source. |
| Products per row (mobile) | 1 or 2; default 2 | Card density on mobile. |
| Products per row (desktop) | 2–6, step 1; default 4 | Card density on desktop. |
| When both product sources are present, Products wins. If neither source supplies products, the implementation renders onboarding product placeholders; select a source before publishing. |
Spacing
| Setting | Options and default |
|---|---|
| Section spacing | None, Small, Medium, or Large; default Medium. |
| Top spacing | On by default. |
| Bottom spacing | On by default. |
Product card dependencies
Every item uses the global Product card settings for image ratio, vendor, badges, ratings, text alignment, quick buy, and related card controls. Product cards also use the global Color swatches switch and display mode when the product has an eligible color option.
Quick buy is available only for an available product and is disabled for products with selling plans. A product with multiple variants opens the option modal rather than adding a hidden default. After a successful add, the global Cart drawer setting determines whether the cart drawer is used on supported layouts.
Desktop and mobile behavior
The mobile and desktop column values are independent. Stack products changes the interaction model: use a stacked grid when all products should be visible in page flow; keep it Off when shoppers should move through a carousel. Check the final card and the last row/scroll position at both device previews.
Accessibility and motion
Product titles and images link to the product page. Check that heading links, card links, carousel arrows, progress feedback, and quick-buy controls have visible focus and useful accessible names. The implementation’s card reveal and carousel behavior should be checked with reduced motion enabled; this page does not add a separate motion setting.
Common issues
- The wrong products appear: confirm whether Products is populated; it replaces Collection.
- The heading link goes somewhere unexpected: enter Link URL; otherwise it follows the selected collection.
- The progress bar is missing: it is shown only when Stack products is Off.
- There are placeholders: choose a collection or product list before publishing.
- Quick buy is unavailable: check product availability, selling plans, and global Product card quick-buy settings.
- Swatches are absent: check Color swatches and the product’s option data.