Product cards: Munich theme docs

Product cards

How products look wherever they appear as a card, from the collection grid to recommendations.

What it controls

Every product card in the theme: in the collection grid, in Featured collection, in Related products, Complementary products, search results, the cart drawer upsell and the mega menu. One set of settings, so a product looks the same wherever a visitor meets it.

Card style: Tile puts the photo on a tinted tile, Flat shows it on the section surface, Border draws a thin frame.
Image ratio and Image fit: the shape of the tile and whether the photo is contained (whole product visible) or covers it.
Show second image on hover: swaps to the product’s second image when the pointer is over the card.
Quick add: none, a button under the card, or an icon on the image. Adds the product’s default variant to the cart from the card.
Quick view: a link that opens the product in a modal with gallery and buy box.
Show vendor, Show product rating, Color swatches, Title alignment.

How it connects

The card is one shared component, so a change here is visible in every section listed above at once. Sections that show cards have their own settings for how many columns and whether the row scrolls, but not for what the card looks like.

Setting it up

Choose Card style. Tile needs the tile color metafield on each product to shine; Flat and Border work with any photography.
Set Image ratio to match your product photos. Square for packshots, Portrait for bottles and apparel.
Decide on Quick add. Icon is the least intrusive.
Turn on Quick view if your products have variants and you want buying from the collection page.

Settings

Setting	Type	What it does
Card style	Select	Tile places the product photo on a tinted tile, Flat shows it on the section surface, Border draws a thin frame around the card.Options: Tile, Flat, Border · Default: Tile
Image ratio	Select	The shape of the image area on every product card. Match it to your product photos.Options: Square, Portrait, Landscape · Default: Square
Image fit	Select	Contain keeps the whole product visible inside the tile, which suits cut-out packshots. Cover fills the tile and crops, which suits lifestyle photos.Options: Contain, Cover · Default: Contain
Show second image on hover	Checkbox	Swaps to the product's second image while the pointer is over the card. A hover background texture on the product takes precedence.Default: on
Quick add	Select	Adds the product's default variant to the cart straight from the card, as a button under it or an icon on the image. Products with required options open the product page or the quick view instead.Options: None, Button, Icon · Default: Icon
Quick view	Checkbox	Adds a link on the card that opens the product in a modal with gallery and buy box, so a visitor can choose a variant without leaving the page.Default: off
Show vendor	Checkbox	Shows the vendor name above the product title.Default: off
Show product rating	Checkbox	Shows the star rating and the number of reviews under the title, when a review app has written them to the product.Default: on
Color swatches	Select	Shows the product's color options under the title, as small dots or as text labels.Options: None, Dots, Labels · Default: Dots
Title alignment	Alignment	Whether title and price sit left, centered or right under the image.Default: center

Tips

Tile style with Contain fit is the Munich look: the product photo sits on a tinted tile the color of the product. The tile color comes from the product's custom.accent_color metafield, and the texture that fades in on hover from custom.hover_background. Without them the tile takes the secondary background of the color scheme, and the hover shows the second product image instead.
Quick add as an icon needs a product without required options. A product with variants opens its page or the quick view instead.
Ratings need a review app that writes the standard rating metafields (reviews.rating and reviews.rating_count). Without them the row is simply not shown.