> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.variantify.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Displaying variants on collection pages

By default, Shopify shows all variants under a single product.
Variantify lets you display each variant as its own product card on **collection pages**.

This article explains how variant display works on collection pages and how to set it up correctly.



# What does variant display on collection pages mean?

Instead of showing:
* One product with multiple variants hidden behind it

Your collection page will show:
* One product card per variant
* Each variant with its own image, price, and availability
![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/tutorial-split-variants_9mka7.png =800x306)

This improves product visibility and makes collections easier to browse.



# Before you start

Make sure Variantify is installed and activated.

👉 See: [How to install and activate Variantify](https://help.variantify.io/en/article/how-to-install-and-activate-variantify-1n9sjqe/)



# Step 1 – Understand how collections work in Variantify


Variantify applies variant display at the collection level, using your existing Shopify collections.

Collections can be:
* Created in Shopify
* Or created from inside Variantify

In both cases, they are **standard Shopify collections** and stay fully synced between Shopify and Variantify.

Each collection can have its own configuration.


# Step 2 – Enable variant display (required)

From the collections grid in Variantify:

1. Open **Variantify** in your Shopify admin
2. Find the collection
3. Toggle **Variant Display → ON**
![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/image_233zbv.png =800x307)

The change is applied **immediately**.
There is **no Save button** required when using the toggle from the grid.

If this toggle is OFF, variants will not appear for this collection.



# Step 3 – Choose a split option (required)

Variantify **cannot display variants without a split option**.

Variants are split based on **one product option**, for example:
* Color
* Size
* Material
* Style

1. In the collection page, scroll down to **Display settings**
2. Select the option(s) that makes the most sense for browsing this collection.


![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/image_1gp377g.png =800x433)


# Step 4 – Make sure all products match the selected option

All products in the collection must:

* Have the **same option name**
* Match **exactly** the option selected in Variantify

### Example

Selected split option: **Color**

✅ All products use **Color**  
❌ Some products use **Color** and others **Colour**  
❌ Some products don’t have this option

Option names must match **exactly** (same spelling and language).

If a product does not match the selected option, its variants cannot be displayed correctly.



# Step 5 – Variant title format


Define how variant titles are displayed in the collection grid by choosing one of the available formats.

1. In the collection page, scroll down to **Display settings**
2. Select one of the available formats.

###### Available formats

* **Format 1 – Product title – Option 1**
* **Format 2 – Product title – Option 2**
* **Format 3 – Product title**

Variant title format controls **what customers see as the product name** for each variant on collection pages.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/image_1kzuroc.png =600x539)



###### Example for a product with the following informations

* **Product title:** T-shirt Marcel
* **Variant title:** Blue / S
* **Option 1 (Color):** Blue
* **Option 2 (Size):** S

###### Results:

* **Format 1:** T-shirt Marcel – Blue
* **Format 2:** T-shirt Marcel – S
* **Format 3:** T-shirt Marcel


###### How to identify Option 1 and Option 2


Variantify uses the **order of options defined in Shopify** to determine Option 1 and Option 2.

On the product page in Shopify:

* The **first option** is **Option 1**
* The **second option** is **Option 2**

![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/image_1lpdyq6.png =800x579)


This order is defined directly in the product editor.

Changing the order of options in Shopify will also change how Variantify interprets Option 1 and Option 2.


###### Important notes


* Variant title format applies **only to collections where variant display is enabled**
* It does **not** modify product titles in Shopify
* It affects **collection pages only**, not product pages



# Step 6 – Optional display settings

You can refine how variants appear on the collection page:

* **Hide out-of-stock variants**
  → Only display available variants
* **Show only discounted variants**
  → Useful for sales or promotions

These settings apply only to collections where variant display is enabled



# Step 7 – Check the result on your store

Use the preview button to open the collection page on your storefront.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/d/6/1/5d61daf505ff4c00/image_4ha0oe.png =360x222)


You should now see:
* One product card per variant
* Correct images and prices
* Only the variants matching your settings

If variants don’t appear, see:
👉 [Why my variants don’t appear on collection pages](https://help.variantify.io/en/article/why-my-variants-dont-appear-on-collection-pages-rsbycz/)