Product Card

The tall grid tile: a square product photo, the product name, its star rating and its price, all left aligned. It’s the card shape used in product grids and carousels, and it’s a different thing from the Product Row Card, which is the wide horizontal row with an Add button.

Everything on the card comes from the selected product. There is no add-to-cart control — the whole tile is a link through to the product page.

Settings

Setting	What it does
Product	The product to feature. The name, rating, price and sale state all come from it.
Featured image	Overrides the product’s featured image on the card.
Hover image	A second image that fades in when the customer hovers the card. Leave empty for no hover effect.
Title	Not connected. See the caution below.
Subtitle	Not connected. See the caution below.
Block ID	Optional anchor, so a link elsewhere can jump to this block.

Title and Subtitle do nothing

The Title and Subtitle fields appear in the customizer but are not passed through to the card — typing into them changes nothing on the page. The card always shows the product’s own title and has no subtitle line at all.

If you need per-card merchandising copy, use the Product Row Card instead, where the title and description overrides do work.

What the card shows

Nothing on the card is typed in; it’s all read from the product:

• Image — the selected variant’s image, falling back to the product’s featured image, falling back to your Featured image override. Always cropped square.
• Title — the product title, linking to the product page.
• Rating — stars filled to the product’s average rating, plus the review count. Comes from the stamped.reviews_average and stamped.reviews_count metafields, and hides entirely when the product has no reviews.
• Price — the current price. A product with several prices shows “From $12.95”.
• Sale — when the product has a compare-at price higher than its price, the price goes bold, the old price appears struck through beside it, and a small SALE chip is added.

The image zooms slightly on hover and on keyboard focus, so the card responds the same way to a mouse and to tabbing.

No Add to Cart

This card is a link, not a buying control. Customers go through to the product page to choose a pack and add to cart. For a card that adds to cart in place, use Product Row Card.

Where you can use it

Not currently available on any section

As the theme stands, no section offers Product Card in its “add block” list, so there is nowhere in the customizer to add one. The grid and carousel sections that show this card shape build their cards from a collection or a product list instead of from individual blocks.

If you want hand-picked cards in a grid, that needs a developer to enable the block on the relevant section. Until then, use Product Row Card in Featured Products for hand-picked products.

Tips

• Use a square image. The card crops to a square and centres the crop, so a tall or wide shot loses its edges.
• Set the hover image on a plain background. The two images cross-fade in place; a lifestyle shot swapping to a packshot reads as a glitch rather than a second view.
• Don’t rely on the rating being there. It vanishes on products with no reviews, which changes the card’s height. Preview a grid mixing reviewed and unreviewed products before launch.
• Reach for the row card for merchandising copy. This card shows only what’s on the product. Anything you want to say about a specific placement belongs on the Product Row Card.