Choose product sections by shopping intent: direct purchase, curated edit, collection path, lifestyle context, product proof, or motion-led launch moment.
Product merchandising sections should reduce the distance between interest and purchase. The important settings are not only layout controls; they decide whether customers can compare products, select variants, add to cart, or understand why a product is featured.
The product set a section uses, either from a Shopify collection or manual picks.
A section pulls products automatically.
Use a collection for scalable product sets; use manual products for curated edits.
Using manual products everywhere and then expecting collection sorting to apply.
How many product cards appear before the section ends or paginates.
The section feels too long or too sparse.
3 to 6 for curated homepage edits; 8 to 12 for broader browsing sections.
Showing too many products before customers understand the page's main path.
The action customers use to add products from cards without opening the product page.
Customers can add products from cards.
Direct add for simple products, modal for variant-heavy products.
Direct add when customers must choose size, color, material, or subscription.
Extra product imagery shown from a product card through hover, arrows, dots, or gallery controls.
Customers need to inspect more than one product image from a card.
Enable for visual products with consistent media order.
Using card galleries when product media is inconsistent or low quality.
Small color, material, or option indicators shown on product cards.
Products have color, material, or finish variants.
Show swatches below the card for mobile clarity.
Expecting swatches to work when option names vary across products.
Art-directed image overrides and crop shapes used in featured product cards.
Featured product grid needs art direction beyond product media.
Use custom images for campaign edits and masks sparingly.
Using decorative masks that hide product detail.
Navigation controls that let customers move through product cards or slides.
The section contains more products than fit comfortably.
Use visible arrows/dots and keep product details readable.
Hiding controls or auto-rotating products too quickly.
The pace and start condition for motion-led merchandising sections.
Using Card reveal or other motion-led merchandising.
Use restrained timing and test mobile scroll pacing.
Making the shopping path depend on a long animation.
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| Homepage shopping edit | Featured product grid | 3 to 6 products, below-card swatches, quick add modal for variants | Use this before long editorial sections so customers see products early. |
| Single product launch block | Featured product or Product promo | One product, clear offer, primary CTA, concise supporting copy | Use Featured product when customers can buy in-section; use Product promo when click-through is better. |
| Lifestyle selling | Shop the look | One clear image with obvious products and hotspots | Hotspots should identify products customers can actually buy. |
| Proof-based merchandising | Best sellers or Best sellers slideshow | Real best-seller collection, readable names/prices, clear controls | Do not label products as best sellers unless the set is credible. |
| Motion-led product moment | Card reveal | One page moment, short section, nearby static product path | Use for brand impact, not as the only way to browse products. |