Product cards
The product card shows a product in collection grids, carousels, search, and recommendations. These settings control how it looks.
Card Style
Pick how your product cards look — Standard or Card.
Image Presentation
Sets how product images are cropped and sized in the card.
Original — Keeps each image's original proportions. Best when all photos share the same ratio; mixed ratios make card heights uneven.
Square / Portrait / Landscape fill — Crops all images to one ratio for a uniform grid. The "fill" variants crop to fill the frame; the plain variants add letterbox or pillarbox bars.
Title Line Limit
Sets the maximum number of lines a product title can use, so the grid stays consistent when titles vary in length.
Layout & Spacing
Show price next to title on desktop — Puts the price at the end of the title line on desktop. When a title runs long, the price moves to a line of its own. While this is on, card content aligns left and the Alignment setting is hidden.
Content alignment — Aligns the title, price, and metadata to the left, center, or right.
Gap & Spacing — Set separately for desktop and mobile. Controls the spacing between the image and content, between content rows, and between metadata lines.
Quick Add & Quick View
Both let customers act without leaving the collection page.
Quick Add — Adds an Add to Cart action to the card. Choose an icon or text button; the text button can be full-width, which works well on mobile.
Quick View — Opens a product overlay to view images, read the description, and pick variants without leaving the page.
Display Options
Show second image on hover: Enable this to display the product's second image when a customer hovers the card.
Show sale badge: Show a sale badge on discounted products.
Show sold out badge: Display a sold-out badge on out-of-stock products.
Show vendor: Display the product's vendor name on the card.
Show type: Show the product type on the card.
Swatches on Product Cards
Swatches on the card let customers browse variants without opening a product page.
Swatch Appearance on Cards
Controls how each swatch looks:
Position — Show swatches above or below the product info.
Swatch type — Show each swatch as a Color or a Variant image.
Swatch limit — Maximum number of swatches shown before an overflow indicator appears.
Item gap — Space between swatches.
Desktop width / Mobile width — Swatch width on each screen size.
Height ratio — Swatch shape. Only available for Color swatches.
Selected variant style — Mark the selected swatch with a Border or an Underline.
Global swatch appearance (shape, color mapping, product-page behavior) is configured under Swatches. These settings control only the card-level display.
Last updated