Product cards

In e-commerce, a Product card typically refers to a visual element displaying essential information about a product, including an image, title, price, and a brief description.

Setting
Description

Alignment

Choose to align text and content to the left or center of the product card.

Enable quick shop

Allow customers to preview product details in a popup without leaving the current page.

Enable color swatches

Display product variant options in product card.

Maximum swatches to show

Limit how many color swatches are shown per product.

Tags

Display product tags (e.g., “Hydrates”, “Brighten”) on product cards in:

  • All screens

  • Desktop only

  • Hidden

Vendor

Display vendor on the product cards in:

  • All screens

  • Desktop only

  • Hidden

Show rate

Display the product's rating

Show secondary image

Display the second product image when hovering over the product image

Image ratio

Determines the aspect ratio of the product card images.

  • Adapt to image ( Default )

  • Square ( 1:1 )

  • Portrait ( 3:4 )

  • Landscape ( 4:3 )

Play video on hover

When hovering on a video, the video will play.

Show quick add button on mobile

Display an "Add to Cart" button directly on product cards for faster shopping on mobile.

Last updated