> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-grid/display-chosen-variant-image-after-filtering.md).

# 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](/product-grid/show-variants-as-separate-products.md) is turned on — 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 card**.
2. Check **Display price and image of variants that match the filters**.
3. Click **Save** in the bar at the top of the page.

![Settings > Product card — "Display price and image of variants that match the filters" checkbox](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-0401a5d544c74b4ede39730a18865c3f963e5fbe%2Fsettings-product-card-template.png?alt=media)

## Related pages

* [Choose product list template](/product-grid/choose-product-list-template.md)
* [Use variant-specific product URLs](/product-grid/use-variant-specific-product-urls.md)
* [Show variants as individual products](/product-grid/show-variants-as-separate-products.md)
