Product cards

This page covers three groups in the theme editor: Theme settings → Product cards, Theme settings → Badges, and Theme settings → Blog. They are documented together because they all configure the same object, a card in a grid.

You set a card up once and every grid in the theme follows it. That covers the collection template, search results, Featured collection, Product carousel, Related products, and Recently viewed. There is no per-section copy of these settings to keep in sync.

Product cards

Found under Theme settings → Product cards.

Setting	What it does	Default
Image ratio	The shape every card image is cut to: Adapt to the image, Square (1:1), or Portrait (4:5).	Portrait (4:5)
Show second image on hover	Cross-fades to the product’s second image when a shopper points at the card. Products with only one image are unaffected.	On
Show color swatches	Draws a row of color swatches under the price. Swatches come from your product options. Set a swatch on every value of a color option, or the card skips that option.	On
Show quick button	A control laid over the card image, revealed on hover. Choose what it does below.	On
Quick button action	Quick view opens the product in a panel over the grid so a shopper can choose a size or a color without leaving the page. Add to cart / Choose options adds single-variant products straight to the cart and sends products with options to their page to choose.	Quick view
Show vendor	Shows the product’s vendor above the title.	Off
Show rating	Shows a star rating under the price, read from the product’s review metafields.	Off
Autoplay video	Plays a product’s video on its card, muted and looping, when the first media on the product is a video. Off, the card shows the video’s cover image instead.	On

How the image ratio behaves

Portrait (4:5) and Square (1:1) cut every card in a row to one shape, so the row shares a horizon and the titles beneath it line up. Shopify crops the file to that shape for you, which is why picking a ratio is cheaper than cropping your photography by hand.

Adapt to the image does the opposite on purpose. Each card keeps its own photograph’s proportions, and the title and price sit directly under their own picture. A row of mixed crops will be ragged.

Use it when your product photography is deliberately varied, such as an editorial mix of flat-lay, on-figure and detail shots. Switch back to consistent crops if it reads as an accident rather than a decision.

Swatches, hover, and the quick button

These three interact, and the rules are worth knowing before you switch things on.

• A swatch row only appears when an option is fully swatched. The theme looks for the first product option where every value carries a swatch, meaning a color or an image set on the option’s values in your Shopify admin. A half-configured option is skipped whole, rather than drawing a row of empty boxes. Which option it is has nothing to do with what it is named, so “Color”, “Shade” or “Couleur” all work. See Fit & swatches for the setup.
• Swatches replace the hover image on that card. Where a card has swatches, the second-image hover is switched off. Otherwise the photograph would change once when the pointer crossed the card and again when it reached a swatch, and changing back would answer with an image of the wrong color. Cards without swatches still use the hover image.
• Pointing at a swatch previews that color on the card, where that variant carries an image of its own. A swatch whose variant has no image leaves the photograph alone. Clicking a swatch goes to that variant. Where Quick button action is Quick view, a swatch opens the quick view panel already on the color that was pointed at, even if Show quick button is off. Turning the button off quietens the card without taking the panel away from the swatches.
• Only the first five swatches are drawn, followed by a +N count so a product with thirty colors does not push the grid out of shape.
• The quick button never appears on a sold-out product. There is nothing to add and nothing to choose.
• On touch devices the quick button is always visible, since there is no hover to reveal it. On the same devices the second hover image is not downloaded at all, which is one fewer photograph per card on a phone.
• Autoplay video applies only where the product’s first media is a video. A product whose video sits second or third still leads with its photograph. The film is always muted and always looping. It never starts for a visitor whose device asks for reduced motion. They get the cover image, and nothing moves.

Note

A row you switch on is a row every card keeps. Vendor, rating and swatches are all a global switch over per-product data, so a product with no vendor, no reviews or no swatched option still reserves that line. That is what keeps a row of cards standing at the same height, with every price on the same line.

Ratings need a reviews app

Show rating reads Shopify’s two standard product rating fields, the average score and the number of reviews. Lapels does not collect reviews itself and adds no fields of its own. It displays what a review app writes to those two, which is where most Shopify review apps put them.

With no review app installed, or on a product that has no reviews yet, the card shows nothing in that row. Check your app’s documentation if you have reviews live on the product page but no stars on the card: an app that keeps its ratings somewhere of its own, rather than in Shopify’s standard rating fields, cannot be read by the theme.

Badges

Found under Theme settings → Badges. Badges are drawn in the top corner of the card image.

Setting	What it does	Default
Show sale badge	Adds a badge when the product is reduced.	On
Sale badge value	What the sale badge says: Sale, The percent saved, or The amount saved.	Sale
Show sold out badge	Adds a “Sold out” badge when the product is unavailable.	On

A few details on how the sale badge decides what to say:

• It is judged on the whole product, not on the one variant the card happens to be quoting. A markdown that lives only on the third color is still a markdown, and the card says so.
• A sold-out product never shows a sale badge. The sold-out badge takes the corner. If you have switched that badge off, the corner is simply left empty rather than advertising an offer nobody can take.
• The percent saved and The amount saved are only quoted when the variant the card is showing is itself the reduced one. Where the markdown sits elsewhere in the range, the badge falls back to the plain word Sale. That is the one claim that is true of the whole product. It keeps the badge and the struck-through price under it saying the same thing.

Blog

Found under Theme settings → Blog. The shape of an article image is the one thing the blog page and the Blog posts section have to agree on, so it is set once here rather than on each section.

Setting	What it does	Default
Image ratio	The shape article card images are cut to: Tall (2:3), Portrait (3:4), Square (1:1), or Landscape (4:3).	Landscape (4:3)

This applies to the article cards on the blog page and in the Blog posts section. An article’s own page is unaffected. The image there is sized by that page’s hero settings.

Related: Layout · Quick view · Fit & swatches · Collection & search templates · Lapels support replies within 12 hours.