Product card styles

Product listing

Go to Theme settings > Product listing to customize the appearance of product cards.

Product card images


Change the shape (aspect ratio) of the product images, and enable a secondary image on hover.

Setting
Description
Options

Show second image on hover

Display the second product image when a cursor hovers over a product card.

Aspect ratio

Make product images consistent by cropping them to a square or rectangular shape. Select Natural to maintain their original shape without cropping.

Natural Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

Product card details


Choose to show vendor names, swatches, and product ratings.

Show vendor


Setting
Description
Options

Show vendor

Show vendor names on product cards.

Show swatches


Go to Theme settings > Swatches to show swatches on product listings.

Setting
Description
Options

Enable product listing swatches

Show product variant swatches on hover. Go to Theme settings to set up swatches.

Show product ratings


Setting
Description
Options

Show product ratings

If you have a product reviews app, display ratings with either stars, the number of reviews, or both.

Rating & Count Default

Rating

Count

Last updated