> 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. A shopper filtering **Color: Red** sees the red variant as its own card.

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. In the **Variants as separate products** card, turn on **Show variants as individual products**.
3. Configure the settings that appear below it (see next section). **Split by these options** is required.
4. Click **Save** in the bar at the top of the page.

![Settings > General — Variants as separate products card](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-365b0226476a88d30a2f37483d7700d749bd6f80%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, indented under the switch, that control exactly how the split works:

* **Split by these options** *(required)* — pick which product option(s) trigger the split (for example, Color). You get one card per value of these options; other options (like Size) stay as a variant selector on that card.
* **Keep 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.
* **Variant name in the title** — **Show** appends the option value to the card title (e.g. "Mini Dress - Blue"); **Hide** shows only the base product name (e.g. "Mini Dress").
* **Only in these collections** — limit where splitting applies: pick specific collections, or **All Collection Pages**, **All Products Page & Search Page**, or **All**. Leave it empty to split everywhere.

![Settings > General — Variants as separate products, expanded](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-d663ee407feb30cf3f61b44d8b52f62b9cb9e603%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)