Product cards

A product card is the small tile that shows a product in a grid or a carousel: the picture, the vendor, the title, the price and the swatches. These settings shape every card in the store, so cards look the same in the collection page, search results, recommendations and every product section.

Open it from Theme settings (the gear icon at the top left of the editor) → Product cards.

Setting	Description
Image ratio	The shape of the card's picture: Square (1:1), Portrait (3:4), or Adapt to image, which keeps each product's own image shape. A fixed shape keeps every row even, whatever photos you upload.
Text alignment	Lines the vendor, title, price and swatches up on the Left or in the Center.
Show vendor	Shows the product's vendor (brand) as a small label above the title.
Show product rating	Shows the average rating as a small star label on the picture, for products that have reviews. Ratings come from a product reviews app; see Product reviews.
Rating star	The color of the stars.
Enable quick view	Adds a quick view button to the card on computers. It opens the product's options, price and Add to cart in a panel, so customers can buy without leaving the page.
Show second image on hover	Swaps to the product's second image when the pointer is on the card. On a product with color variants, it shows the second image of the chosen color.

How customers add to cart from a card

• On a computer, an Add to cart button slides up over the picture when the pointer is on the card.
• On a phone or tablet, a round cart button sits on the picture all the time.
• A product with options, such as sizes or shades, opens quick view instead of adding straight away, so the customer always sees which option they are buying.

Note

Each section that shows product cards has its own Vendor, Product rating, Quick view and Second image on hover settings. Use theme setting follows this page; Show or Hide changes it for that section only.