Product card
Controls how product cards look and behave across collection pages, search results, and featured product sections.
Theme Editor → Theme settings → Product card
Your collection grid is your store's first impression
Every product card on a collection page is a micro-landing page. The image, the price, the swatches, whether it plays a video on hover — all of it determines whether a customer clicks through or scrolls past. Product card settings give you global control over card behavior across your entire store, so your collection pages feel like a curated boutique, not a generic catalog.
Image ratio, quick view button, show vendor, and other layout options are configured per section, not here. Open the individual section in Theme Editor to adjust those.
General
Show main image
Always leads with the product's hero shot instead of the first variant image. Useful when a lifestyle image communicates more than a color close-up.
Update variant price and badge
Price and sale badge update in real time as a customer selects color swatches on the card. No surprises at the product page.
Show product pre-order badge
Displays a pre-order label on cards for products using the product.preorder template.
Show general product media
When a variant is selected, also shows images not attached to any specific variant (e.g. lifestyle shots, packaging).
Media
Enable autoplay video
Videos start playing automatically on hover. Turns a static grid into a dynamic, high-engagement browsing experience.
Fit media inside container
Scales media to fit the card without cropping. Ideal for full-height product shots (shoes, accessories, full outfits).
Container inner spacing
Adds padding inside the card around the media. Only available when Fit media inside container is enabled.
Placeholder
Shown on cards for products with no images. Upload images — replace the default placeholder with a custom image (e.g. your logo or a "coming soon" graphic).
Pro tip: Combine Fit media inside container with Container inner spacing to display full-body product images without cropping while keeping the grid consistent.
Color blending
If your product photos have white or near-white backgrounds, Color blending tints the card background to match — so images blend into the page instead of looking like floating cutouts. The result is a cleaner, more premium grid across any brand palette.
Enable
Activates color blending on cards
Apply to color swatches
Also blends the background behind color swatch thumbnails
Color
The tint color (default #FFFFFF)
Gradient
Optional gradient instead of a solid tint
Variant options on the card
Show color swatches or size pills directly on collection cards — no product page click required.
Pills — choose which swatches appear on cards:
Variants
Native Shopify variant swatches
Linked product
Linked Products swatches (separate product listings)
Both
Both types together
Size label — enter the option name (e.g. Size) to display size options as pills directly on the card.
See Variant images vs Color Swatches and Linked Products for full setup instructions.
Pickup availability
Show in-store pickup availability on product cards. Requires pickup to also be enabled per section.
Hide 'select a store' text if no store is selected — hides the store prompt until the customer has chosen a location.
Select a store text — customize the label of the store selector prompt.
Pickup availability on cards must also be enabled per section. See Store Selector.
Last updated
Was this helpful?