Product cards

These settings control the product cards shown in product lists, collections, and search results. Changes apply to every product card in the store.

For the whole picture of color swatches (how colors are decided, the two shape settings, and the two color-name settings), see How color swatches work.

In the theme editor, open Theme settings → Product cards.

Appearance

Style (Standard / Card) — Card puts the image and text inside one framed card.

Image padding (0–20, in px) — Space around the card image. When Add space around product card images is on, Photo space amount under Theme settings → Images and videos is added as well.

Add space around product card images (default OFF) — Adds space around images and adjusts the card title and price sizes.

Text alignment (Left / Center / Right) — Alignment of the text on cards.

Color scheme — The color scheme used for cards.

Border Thickness, Opacity, and Corner radius — The card’s border. In the editor, they are under the “Border” heading.

Shadow Opacity, Horizontal offset, Vertical offset, and Blur — The card’s shadow, under the “Shadow” heading. The shadow Opacity is separate from the border opacity, and its default is 10%.

Stock badges

Short labels (badges) are added to product cards. Badges appear only on products that are not sold out.

Show stock badges (default ON) — Shows the Low stock, Quick ship, Preorder, and NEW badges. Turned off, none of the badges under this heading appear.

Low-stock threshold (inventory) (1–50, default 5) — Shows “Low stock” when total inventory is at or below this number. Only variants whose inventory Shopify tracks (“Track quantity” on) are counted. Not shown for products whose inventory is not tracked.

Show exact stock count (default OFF) — Shows the actual number, such as “Only 3 left”, instead of “Low stock”.

Quick-ship threshold (inventory) (1–100, default 20) — Shows “Quick ship” when total inventory is at or above this number. Set it higher than the low-stock number. Not shown for products whose inventory is not tracked.

NEW badge period (days) (1–90, default 14) — Shows “NEW” for this many days after the product is published. It can appear next to another badge.

Preorder display: New themes use the optional boolean custom.preorder. Explicit false suppresses the compatibility tag __preorder. Stock zero with continue-selling enabled is not a preorder signal. This marker does not create payment schedules or preorder fulfillment.

Note

Only one stock badge appears per product, in this order: Low stock → Preorder → Quick ship. For example, a preorder product with little stock shows “Low stock”. NEW appears separately, next to it.

Color swatches

Show color swatches (default ON) — Shows a product’s color choices as small dots (color chips) on the card. Products without a color option do not show them.

Maximum swatches shown (2–8, default 4) — The maximum number of colors on a card. The remaining colors are summarized, such as “+2”.

Product card swatch shape — Shape of the color swatches on product cards. For product pages, set the shape in the Variant picker block of the Product information section.

• Circle (default)
• Square
• Rounded square — Uses the button corner-radius setting
• None — no color dots; the color name is shown as text (even when “Show card color names” is off)

Show card color names (default ON) — Shows the color name next to the swatches. Turned off, only the color marks (dots) are shown. For products that can be added to cart from the card, names appear only when “Show color names on swatches” is also on.

No effect while “Add to cart from the card” is on

While Add to cart from the card is on (the default), cards for products with up to 100 variants switch to a color and size picker for adding to cart. For those products, “Show color swatches”, “Maximum swatches shown”, and “Show sizes” are not used. These settings apply when:

• “Add to cart from the card” is turned off, or
• the product has more than 100 variants

Size list

Show sizes (default ON) — Lists the available sizes as text on product cards. Products without a size option do not show them. While “Add to cart from the card” is on, this has no effect on covered products.

Highlight the AI-suggested size in the size table (default OFF) — Highlights the row of the size the shopper confirmed in chat and agreed to save, in the product page’s size guide table. The selected size does not change automatically. It works only when “Highlight the size suggested in chat” in the Size guide section is also on, and when the size column holds just the size name, such as “M”.

Add to cart from the card

Add to cart from the card (default ON) — Shoppers pick color and size on the card and add the product to the cart directly. Applies to products with up to 100 variants. For products with more, shoppers use quick view.

Not combined with the section’s Quick add

Cards of covered products do not show the Quick add button from the section settings. To use Quick add, turn this setting off.

Show color names on swatches (default ON) — Shows color names beside the swatches when adding to cart from the card. Names appear only when Show card color names is also on.

Add button style (default: Solid) — Choose a filled or outlined (border and text color only) style for the card’s add-to-cart button. Used instead of the style under Buttons.

Favorites

Show favorite button (default ON) — Shows a heart button on product cards. Products the shopper saves are kept in their browser (no login needed).

Favorites page — Even without choosing a page, the heart icon in the header opens favorites (a list slides in from the side). If you choose a page that has the Favorites list section, the list links to that page.

Quick view

Show quick view button (default ON) — Shows a button on product cards that opens product details and purchase options without leaving the page. The product page template must contain the Quick view section (the bundled templates already have it).

Troubleshooting

Stock badges do not appear

Check that the product’s inventory is tracked (“Track quantity” is on in the product page of the admin). NEW depends on the number of days since publishing, so older products do not show it.

Changing the swatch count or size list has no visible effect

Check whether “Add to cart from the card” is on. While it is on, most products show the add-to-cart picker, and these settings are not used.