Product card settings

Featured links

1. Shopify documentation on customizing themes
2. Shopify documentation on sections and blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

These settings define the default appearance and behavior of product cards across your theme. Use them to create a consistent browsing experience for product grids, listings, and other card-based product displays, then override them only where a specific template needs a different approach. For a broader overview of theme-level configuration, see Shopify documentation on customizing themes

Global card layout

Start here to shape the overall structure of your product cards. Card style, image ratio, text display, alignment, and button treatment all work together to determine how visual, compact, or information-rich your product listings feel.

Use separate desktop and mobile image ratios to keep cards balanced on different screen sizes. A consistent ratio is especially helpful when product photography varies, because it makes grids feel cleaner and easier to scan.

Text settings control how much context appears before a customer opens the product. Showing both title and excerpt can support discovery, while title-only layouts usually work better for denser grids or highly visual catalogs.

Banner-style cards always show a single image, so slideshow settings do not apply. Middle vertical text alignment also only works with the banner style.

Product details and actions

These controls determine which key product details appear on cards, including price, vendor, badges, quick-add actions, and variant selectors. Use them to decide how much shopping can happen directly from the card versus on the product page.

Quick-add is most useful when customers can confidently purchase from the grid. If variant selection is enabled and the product is available, the card can support a more direct add-to-cart flow; otherwise, the action may instead lead customers to the full product page.

Collection badges can highlight selected products with lightweight merchandising labels. This works well for promotions, curated edits, or product groups you want customers to notice quickly.

Hover settings

Hover media lets product cards reveal an alternate asset when customers move over them on desktop. This is useful for showing a second angle, a detail view, or another supporting visual without adding more text to the card.

You can choose a gallery position automatically or point to a metafield when you want tighter control over the hover asset on each product. A metafield-based setup is especially helpful when the ideal hover image is not consistently in the same position across your catalog.

Hover media does not work when the product card image style is set to slideshow.

Slideshow settings

If you use slideshow-style product cards, this subgroup controls how those galleries behave on desktop and mobile. You can adjust visible slide count, animation style, speed, autoplay, looping, and on-card navigation or pagination.

Slideshows work best when multiple product images help customers compare or evaluate items from the grid. For simpler catalogs, a single-image setup is usually easier to scan and keeps more attention on the product list as a whole.

Fade animation creates a simpler presentation, but it also forces a single-slide layout and does not show pagination. If slide count and navigation feedback matter, choose a non-fade animation style.

Caution

With the default animation style, cards for products with fewer than four media items will not loop, even if looping is enabled.

Color swatch settings

Color swatches let customers preview variant choices directly on the product card. They are most effective when color is a primary browsing decision and your option naming is consistent across products.

Enter option names, not option values, for the variant options that should display swatches. If naming is inconsistent, swatches may appear only on some products or not at all.

Custom color definitions are useful when your color naming goes beyond standard named colors or when you want tighter control over how swatches appear.

Image swatch settings

Image swatches replace flat color chips with variant-linked thumbnails. This is a strong choice when the difference between variants is better shown through pattern, texture, finish, or a small product image.

Each relevant variant option needs an associated image to display well. If some variants do not have images, those swatches can look incomplete.

When both image and color swatches are configured for the same option naming pattern, image swatches take priority. In most cases, it is better to choose one main swatch method for each variant type.

Swatch border settings

Swatch border controls help color and image swatches stay visible against different backgrounds and imagery. They are especially useful for light swatches, low-contrast card designs, or themes with subtle interface styling.

If you leave border colors blank, the theme uses the primary button border colors instead. The active variant always keeps a visible selected state, so customers can still tell which option is currently chosen.

Usage notes

1. Set defaults before making exceptions. Build a strong global product card style here first, then use template-level overrides only when a specific layout truly needs different behavior. For guidance on how theme areas are organized, see Shopify documentation on sections and blocks
2. Choose one media pattern. Use single images for fast scanning, hover media for a quick second view, or slideshows when multiple card-level images clearly improve browsing.
3. Review both breakpoints. Desktop and mobile cards can behave differently, so check image ratios, alignment, navigation, and media visibility on both screen sizes before publishing.
4. Keep fallback styling clear. Blank or default-style values usually preserve the theme’s built-in look, while explicit colors, gradients, or media overrides make a product card area feel more independent.
5. Watch feature interactions. Banner cards do not use slideshows, slideshow cards do not support hover media, and image swatches override color swatches when both target the same option.