Product card style

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

Product card images


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

Go to Theme settings > Product listing to find settings

Setting
Description

Show second image on hover

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

Image aspect ratio

Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.

Media fit

Make product images Cover the full product card or Fit within the card with its original shape.

Product card details


Choose which product details to display on product cards. You can choose to show swatches, chips, vendors, and a border when customers hover over the products.

Go to Theme settings > Product listing to find settings

Setting
Description

Show vendor

Display vendor name beneath the product information.

Show swatches

Show product swatches on hover. Learn how to set up swatches.

Swatch size

Change the size of swatches on products cards. Select Small, Medium, or Large.

Show sibling swatches

Display sibling products as swatches below the product. Learn how to set up sibling product swatches.

Swatch source

Use the Product color or Product image as the swatch.

Show chips

Show product chips (variant boxes) on hover. Learn how to set up variant chips.

Show border on hover

Show a border line around the product cards when hovered over.

Product rating

If you have a product reviews app, display ratings with either stars. Learn about using product review apps.

Show discount

Display the discount price on the product card. You can change the discount format and choose how to display $0 prices and sold-out prices.

Last updated