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.

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