Skip to content
Dynamic product cards
Slab builds product cards in two different ways. Most collection and slider grids render a Product card block that lives on that page’s template. Recently viewed (grid and slider) loads the separate product-card product template over the network. Use the section below to find the right place to edit for the area you care about.
Choose where to customize
Product card blocks on page templates
Use this path for collection pages, search results, product grids and sliders, and recommendations when the theme loops products on the server.
- Open the template for the page where the grid or slider appears (for example the default Collection or Search template, or a template that includes a Section block with a product list).
- Select the block that drives the product list. Common editor names from the Slab schema include Collection grid, Search grid, Product grid, Slider products, and Product recommendations (grid and slider layouts can share that label—pick the block that matches your section).
- Open the nested Product card block and edit its inner blocks (for example Product media, Rich text, Price).
Each template stores its own Product card setup. Changing the card on the collection template does not change Recently viewed, and the other way around.
Card chrome—padding, color scheme, borders, corner radius, gap between inner blocks, visibility, scroll animation—is controlled on the Product card block itself. See the Product card reference for those settings and the full list of blocks you can nest.
Recently viewed and the product-card template
Recently viewed (grid and slider) does not use the Product card block from your collection template. The storefront fetches each product using the product-card product template (product.product-card.json in theme files).
Optional: Shopify loads this with the alternate template view parameter (?view=product-card).
That template uses the Product section. The theme’s default layout is a Container that groups Product media, Rich text (often wired to the product title), Price, and Swatches—you can add, remove, or reorder blocks in the editor the same way as on other product templates.
Edits here apply to any feature that loads that template with the product-card view (including Recently viewed). They do not change cards on collection or search pages unless those pages are also loading that view (they normally are not).
Edit the product-card template (Recently viewed)
Open the template
- Open the theme editor and go to any product template.
- Open the template picker.
- Select the
product-cardtemplate.
Update the Product section
- Select the Product section.
- Add, remove, or reorder blocks to control what each fetched card shows. The default structure uses a Container; you can keep that pattern or rebuild the layout using blocks the editor allows for this section (for example Product media, Price, Buy buttons, Badges, Swatches, Rich text inside Container or other Theme blocks, plus App blocks where supported).
The Product section allows a different mix of blocks than the nested list inside a Product card block on collection templates—for example Buy buttons and Product options are available here if you want that experience inside a fetched card.
Save and preview
Save your changes, then open a page with Recently viewed (grid or slider) and confirm the card matches what you expect.
Show titles, metafields, and other product details
What appears on a card depends on which surface you are editing (page Product card block vs product-card product template). In both cases, content comes from the blocks you add—not from one combined “product card settings” panel.
| What you want | What to use |
|---|---|
| Formatted title or body copy | Rich text (on page cards, nested in Product card; on the product-card template, usually inside a Container or other theme block that supports it) |
| Price | Price |
| Images or video | Product media |
| Tags, sale, or custom labels | Badges (including metafield-based badges) |
| Variant color or pattern chips | Swatches |
| Stock messaging | Inventory availability |
| Quick add from a grid or slider card | Quick buy button inside the Product card block (see Quick actions) |
| Full add to cart / options on the fetched product-card template | Buy buttons, Product options, and related blocks in the Product section when editing the product-card template |
Titles and text from product data
Add or edit a Rich text block and connect the field to product information (for example the product title) when the editor offers that connection. The default product-card template ships with rich text using the product title. The same pattern works for many metafields when you connect a supported setting to a metafield you defined in Shopify admin.
Metafields on badges
To surface custom attributes as badges, configure the Badges block as described in Badges.
Related guides
- Quick add and quick edit—Quick buy and Quick edit use the Quick buy template and Quick edit template fields under Theme settings > Quick actions, not the
product-cardview by default. You can still enter the same template suffix as your card layout if you want overlapping designs.