> 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/show-variants-as-separate-products.md).

# Show variants as individual products

List each variant of a product as its own card in the product grid, instead of grouping all variants under a single product card.

## What this does

Normally, a product with multiple variants (e.g. a T-shirt in Red, Blue, and Green) shows as **one card** in the grid, with shoppers picking a variant after clicking in. With this on, each qualifying variant becomes **its own card** — so that same T-shirt shows up as three separate cards ("T-shirt - Red", "T-shirt - Blue", "T-shirt - Green"), each linking to the product page with that exact variant already selected.

This is useful when variants are visually distinct enough (e.g. different colors) that shoppers expect to browse and filter them as individual products, rather than digging through a variant picker on one card.

Turning this on makes [Display chosen variant image after filtering](/product-grid/display-chosen-variant-image-after-filtering.md) unavailable, since each split card already shows its own correct image and price by default.

{% hint style="warning" %}
**Important:** This feature is only available if you have enabled our app's filter sidebar for your collection pages. If the sidebar is disabled, variants will not be shown as individual products.
{% endhint %}

## Steps

1. In the app, go to **Settings > General**.
2. Turn on **Show variants as individual products**.
3. Configure the settings that appear once it's on (see below).
4. Click **Save** in the bar at the top of the page.

![Settings > General — "Show variants as individual products" switch](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-7d944a158c70107b1715d046140598f84eb7f0e3%2Fsettings-general-variants-toggle.png?alt=media)

## Settings that appear once this is on

Turning on **Show variants as individual products** reveals several more settings that control exactly how the split works:

* **Separate variants based on options** *(required)* — pick which product option(s) trigger the split (for example, Color). Only variants that differ by a selected option become their own card; other options (like Size) stay as a variant selector on that card.
* **Retain product images and options after splitting** — when on, each split card still shows the full original image gallery and full variant/option picker, instead of narrowing them down to just the split value.
* **Show product title only (hide variant name)** — when on, the split card's title shows only the base product name (e.g. "Mini Dress") instead of appending the option value (e.g. "Mini Dress - Blue").
* **Select collections to display variants** — limit where splitting applies: specific collections, **All Collection Pages**, **All Products Page & Search Page**, or **All** (everywhere).

![Settings > General — variant-separation sub-settings, expanded](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-cb868f2b6a2d671ffb3bf6bd4a4fa125e319eddf%2Fsettings-general-variants-expanded.png?alt=media)

## Related pages

* [Display chosen variant image after filtering](/product-grid/display-chosen-variant-image-after-filtering.md)
* [Use variant-specific product URLs](/product-grid/use-variant-specific-product-urls.md)