Display chosen variant image after filtering

When a shopper filters by a variant option like color or size, show that specific variant's price and image on the product card instead of the default.

What this does

When a shopper filters by a variant option like color or size, the product card in the grid updates to show that specific variant's price and image, instead of always showing the product's default variant.

For example, if a product comes in Red and Blue, and a shopper filters by Blue, the card shows the Blue variant's photo and price — even though the product itself defaults to Red. Without this on, every card always shows the product's default variant, regardless of which variant the shopper actually filtered for.

This setting isn't available if Show variants as individual products is turned on in Settings > General — the switch is disabled with a note explaining why. Once each variant already gets its own card, that card already shows the right image and price by default, so this setting has nothing left to do.

Steps

1. In the app, go to Settings > Product grid.

2. In the Variants card, turn on Show the matching variant.

3. Click Save in the bar at the top of the page.

Settings > Product grid — Variants card, Show the matching variant switch

Related pages

• Choose product list template

• Use variant-specific product URLs

• Show variants as individual products