Product Cards

Settings that apply to the product cards in every section at once: Featured Products, the collection grid, Product Recommendations, Recently Viewed and the search results. You find them under Theme settings → Cards, below the card container options.

Sections keep their own card settings too. What is listed here is what would otherwise have to be set five times and drift apart.

Title size and weight

Out of the box each section brings its own title size — 20px on desktop and 16px on mobile in most of them — and the weight follows your heading weight under Theme settings → Typography.

Switch Title size and weight to Custom to take over:

Setting	Range	Default
Title size (desktop)	12–28px	20px
Title size (mobile)	11–24px	16px
Title weight	Normal, Medium, Semi bold, Bold	Medium

In Section defaults mode nothing changes, so updating the theme never alters a shop that has not touched this.

A smaller, heavier title usually reads better in a grid than a large light one: 15px semi bold takes less room than 20px medium and still stands out against the price. With four cards in a row it is often the difference between one line and two.

Similar Products is not covered. That block has its own title and price sizes because it sits inside the product page, not in a grid of its own.

Title lines

Option	What it does
As set in each section	follows the section's own Card title two line checkbox — the default
One line	every card title is one line, the rest is cut with an ellipsis
Two lines	two lines everywhere
No limit	titles are never cut

One line gives the calmest grid: all prices and buttons sit on the same height no matter how long a title is.

The end of the title is what gets cut. Name your products so that the part that tells them apart comes first:

Summit Fox – T-Shirt        →  Summit Fox – T-Sh…     still recognizable
T-Shirt – Summit Fox        →  T-Shirt – Summit…      every card looks the same

Swatches on product cards

Whether a section shows swatches at all is decided in the section: Show variant options on cards in Featured Products and the collection grid, Show color swatches in Product Recommendations and the search results. The settings here control how they look everywhere.

Color only, or every option

Right below that checkbox each section has Which options to show:

	What the card shows	What add to cart does
Color only (default)	one row of color swatches, nothing else	adds the first size of the tapped color
All options	swatches plus size and any other option, as pills or a dropdown	adds the exact variant the shopper picked

Color only is the right choice for apparel. A shopper scanning a grid wants to see what colors exist and how the shirt looks in each — a tap on the swatch swaps the image and price, and that is the whole job of the card. Choosing a size belongs on the product page, where the size chart is.

All options makes sense where the second option decides the price or the look — a frame size, a material, a bundle — and the card should add the exact variant without a detour.

With Color only, size pills never appear on the card and Non-color options display has no effect.

What a circle shows

The cards follow Theme settings → Variant Swatches → Swatch source, the same setting the product page uses:

Swatch source	On the card
Shopify color swatches	the color or image from the product's category metafields. Without swatch data the color name is tried as a plain CSS color, and the header group's Color Variant Settings can override any single shade
Variant images	the variant's own image inside the circle. A variant without an image keeps its color
None	the color option as small text buttons, like size

All three work side by side with the other options of the product. Size and the like render as pills or a dropdown, whichever the section is set to.

Which option counts as the color

An option is treated as the color option when any of these is true:

1. Its values carry Shopify swatch data. This needs no setup and does not care about language — "Farbe", "Couleur" and "Kleur" are all recognized the moment the option is linked to the color metafield.
2. Its name contains "color" or "colour".
3. Its name contains one of your own names from Theme settings → Variant Swatches → Color option names. Comma separated, e.g. color, colour, farbe.

The third one is for shops that name the option in their own language and do not use swatch data. Without it such an option would show up as text pills with its name in front instead of circles.

The same check runs on the product page, so an option is never circles on a card and pills on the product page.

Maximum swatches

Maximum swatches (desktop) and (mobile) limit how many circles a card shows. 0 shows all. With a limit, the rest hides behind a +N link that leads to the product page.

A product with eight colors fills a row on desktop but wraps into two or three rows in a two-column mobile grid, pushing the title and price of that card below its neighbours. Four or five on mobile keeps the grid level.

The selected color always stays visible, even when it sits past the limit. The hidden circles are still part of the page, so variant images, prices and the add to cart button keep working exactly as before.

Option name before the swatches

When the color option is called something other than "Color", the card prints its name in front of the circles — "Shirt Color:". Show option name before swatches turns that off. A row of colored circles explains itself; the label mostly matters when a product has two swatch-like options.

Related

Under Getting Started: Customizing Color Swatches covers the swatches on the product page, Adding & Customizing Color Variants the header group's Color Variant Settings.