Skip to main content
Product cards are the most repeated element on the storefront. They appear on the Collection Page (PLP), in search results, in Featured products, Related products, Recently viewed products and the quick view drawer, and these settings define them everywhere at once. Getting the card right, what it shows, how variants are represented and how promotions are flagged, has a direct effect on how quickly customers find and compare products.

​
What these settings control

  • Vendor line, second image on hover and how the image fills its frame
  • Variant swatches under the card and how the color option is drawn in the quick view drawer
  • Alignment of card text and whether title, price, swatches and tags stack or sit inline
  • The color scheme of the card’s information area
  • Product tags shown as pills and the metafield they come from
  • The quick add button on cards, which is always visible on mobile and appears on hover on desktop
  • Custom, discount and sold-out badges, their style, corners, alignment and colors
  • Product groups that link separate products, such as one product per color, as swatches
The card border and media aspect ratio are shared with collection and article cards and live in Cards.

​
How to access

1

Open the Theme Customizer

From your Shopify admin, go to Online Store, then Themes, and select Customize.
2

Open Theme settings

Select the Theme settings icon at the bottom of the left sidebar.
3

Select Product cards

Expand the Product cards group. Settings are arranged in the order below, with Tags, Mobile quick add, Badges and Product groups as sub-headers.
Product cards group in the Theme settings sidebar

​
Settings

These settings shape the card itself: what appears above and below the image and how the information area is laid out.Show product vendor: Adds the vendor name above the product title. Useful for multi-brand stores; redundant when every product is your own brand. Default: off.Show second image on hover: Swaps in the product’s second image while the card is hovered, so customers see a back view or a lifestyle shot without opening the product. The same swap happens when the card’s image link is reached with the keyboard, so keyboard and screen reader users get the alternate view too. Products with a single image are unaffected. Default: on.Media fit: How the product image fills the card’s media frame. Default: Cover.
  • Cover: The image is cropped to fill the frame set by the Media aspect ratio in Cards. Grids look uniform; edges of the image may be cut.
  • Contain: The whole image is shown inside the frame, with empty space around it where proportions differ. Nothing is cropped, which suits packaging and products on plain backgrounds.
Alignment: Aligns the title, price and other text to the left or the center of the card. Default: Left.Title & price / swatch & tag layout: How the two information rows are arranged. Default: Inline (space between).
  • Stacked: Title, price, swatches and tags each sit on their own line. Easier to read with long titles.
  • Inline (space between): Title and price share one row pushed to opposite edges, and swatches and tags share a second row in the same way. Compact and grid-friendly.
Color scheme: The color scheme used for the card’s information area, so cards can stand out from the section behind them. Default: Scheme 5. Sections that paint their cards with their own scheme override this for their cards only.

​
Best practices

  • Show the second image only if you have one: The hover swap is a strong feature when every product has a consistent second shot; with patchy coverage it feels inconsistent, so keep it on only once your catalog is ready.
  • Use Contain for packaged goods: Cover suits apparel on models; Contain avoids cutting off boxes, bottles and artwork.
  • Keep swatch rows short: Only four values show before the count, so put your most popular colors first in the option order.
  • Curate tags with a metafield: A dedicated metafield keeps marketing labels separate from the operational tags used for collections.
  • Put badges and quick add on opposite sides: Left badges with an inset quick add button on the right keep the image readable.
  • Match badge colors to your schemes: Badge colors are fixed and do not follow the section’s color scheme, so check them on both light and dark sections.
  • Use one card color scheme for the whole store: A single scheme for the info area keeps collection grids and featured sliders consistent.