Product-Card Blocks
Product-card blocks control the Product item cards customers see in product grids, search results, recommendation carousels, complementary products, and product catalog sections.
Use the Product Card guide for the screenshot-led setup order across Product card background, Product media, Product details, title, price, and swatches.
Common Card Content
| Card content | Used for | Setup area |
|---|---|---|
| Media | Product image or variant image. | Product media, parent surface settings, and Product item block settings. |
| Title | Product name. | Product admin, parent surface settings, and Product item block settings. |
| Price | Regular price, sale price, and currency display. | Product pricing, Prices, and Product item block settings. |
| Badges | Sale, sold-out, search-result, or custom collection badges. | Product state, collections, Badges, and Product item block settings. |
| Swatches | Variant options, color options, and variant images. | Variant Pickers and Swatches, Variant pickers, Swatches, Product item block settings, and product option data. |
| Quick add | Add-to-cart or quick-add modal entry from product cards. | Parent surface settings, Search quick-add defaults, Modals, and product variant data. |
For the merchant-facing block composition behind these cards, see the Product item block. Shoppable image and video media use Product link cards instead; those cards have their own product picker, optional image, price, custom link, product-page/quick-add action, and card/text style controls.
Where Product Cards Appear
- Collection templates.
- Search and Search grid mode.
- Product Recommendations and Complementary products.
- Featured grid and Featured carousel product sections.
Publish Checks
- Test one simple product and one product with multiple options.
- Test sale, sold-out, and unavailable states where those products exist.
- Test quick add on desktop and mobile.
- Confirm product-card text, badges, swatches, and prices stay readable on the chosen card background.
- For shoppable image or video media, review Product links blocks instead of Product item controls.