How to Show All Variants on a Collection Page in Shopify

By following this guide, you’ll easily enhance your Shopify store with variant displays that make shopping more enjoyable for your customers.

By Adeel Qayum

Edited by Kim Weidemann

Fact-check by Joel Taylor

Updated February 5, 2026

A woman pointing at product variants on a collection page

In this post, we take you through the steps to display all product variants on the collection page in your Shopify store. We’ll guide you through the process with clear steps, and by the end, you'll have a beautifully functional page that showcases all your product variants!

» Differentiate between Shopify collections and Shopify product types for optimal information architecture

What to Know Before Showing Variants On Collection Page

Metafields: Get familiar with using metafields, which allow you to add extra product details.
Theme compatibility: Ensure that your chosen theme supports the display and functionality of product variants. Themes can significantly impact how your variants, such as size or color, are presented to customers.

How Shopify Themes Impact Product Variant Display

Choosing a theme that complements your product presentation is essential for making the shopping experience as smooth as possible.

» Find out how to add, delete, and hide Shopify variant images

How to Show Variants on the Shopify Collection Page

You can show all variants on your collection page by tweaking some code in your Shopify theme. Here's how to make it happen.

Quick Reality Check

This requires editing your theme's code. If that sounds scary:

Easy route: Use an app from the Shopify App Store (search "variant display" or "color swatches").

Pro route: Hire a Shopify Expert ($200-500 typically).

DIY route: Follow this guide (15-30 minutes if you know basic code).

Prerequisites

Basic HTML/CSS knowledge.

Understanding of Shopify's Liquid language.

Willingness to break things (and fix them).

What to Know Before Showing Variants On Collection Page

Metafields: Get familiar with using metafields, which allow you to add extra product details.

Theme compatibility: Ensure that your chosen theme supports the display and functionality of product variants. Themes can significantly impact how your variants, such as size or color, are presented to customers.

How Shopify Themes Impact Product Variant Display

The theme you select for your Shopify store plays a vital role in how variants appear. Each theme handles variant displays uniquely, influencing how customers view and choose options like colors or sizes. Choosing a theme that complements your product presentation is essential for making the shopping experience as smooth as possible.

» Find out how to add, delete, and hide Shopify variant images

Steps to Show Variants on the Shopify Collection Page

Step 1: Backup Your Theme (Don't Skip This!)

Go to Online Store → Themes. Click ••• next to your theme, in the dropdown, click Duplicate.

Work on the copy, NOT your live theme. Why? When (not if) something breaks, your live store stays safe.

a screenshot of a web page with a text box highlighted

Step 2: Access the Code Editor

On your duplicate theme, click ••• and then Edit code. In the Sections folder, find and open:

main-collection.liquid

Or any file with {% for product in collection.products %}

Step 3: Replace the Product Loop

Replace the entire loop with this code:

{% for product in collection.products %}

{%- liquid

# Check for Size, Color, or Colour options

assign variant_option_index = -1

for option in product.options

assign downcased_option = option | downcase

if downcased_option == 'size' or downcased_option == 'color' or downcased_option == 'colour'

assign variant_option_index = forloop.index0

endif

endfor

-%}

{%- if variant_option_index > -1 -%}

{% comment %} CASE 1: Split variants for cakes {% endcomment %}

{%- assign displayed_variants = '' -%}

{%- for variant in product.variants -%}

{%- assign option_value = variant.options[variant_option_index] -%}

{%- unless displayed_variants contains option_value -%}

{% render 'card-variant-custom', product: product, variant: variant, option_value: option_value %}

</li>

{%- assign displayed_variants = displayed_variants | append: option_value | append: ',' -%}

{%- endunless -%}

{%- endfor -%}

{%- else -%}

{% comment %} CASE 2: Single card for regular products (no variants) {% endcomment %}

{% render 'card-variant-custom', product: product %}

</li>

{%- endif -%}

{% endfor %}

a screenshot of a web page with a lot of text

Step 4: Create the Card Variant Snippet

Go to Online Store → Themes. Click ••• next to your theme, in the dropdown, click Edit Code.

Under the Snippets folder, click Add a new snippet. Name it card-variant-custom.liquid and hit enter.

Paste this code (which handles the square shape, price alignment, and variant names):

{%- liquid

# If a variant is provided, use its image. Otherwise, use the product's main image.

assign card_image = variant.featured_media | default: product.featured_media

-%}

{% comment %} Image Section: Forced Square, Zero Top Margin {% endcomment %}

{%- if card_image -%}

<img

src="{{ card_image | image_url: width: 533 }}"

alt="{{ card_image.alt | escape }}"

loading="lazy"

width="533"

height="533"

style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border-radius: 0 !important;"

{%- else -%}

</div>

{%- endif -%}

</div>

{% comment %} Text Section: Pushed to the top of the info area {% endcomment %}

<div>

{%- if option_value -%}<br><span style="font-size: 12px; opacity: 0.6; font-weight: 300;">{{ option_value }}</span>{%- endif -%}

</h3>

</div>

{% comment %} Price: Locked to the bottom of the card {% endcomment %}

</span>

</div>

</a>

</div>

a screenshot of a computer screen with a text description

a screenshot of a web page with a number of lines

Click Save

Step 5: Test Your Changes

Click on the Shopify tab in the code editor and then click Preview store to view your duplicate store.

Check a collection page:

Each variant/color shows as a separate card?

Correct images?

Prices accurate?

Links work?

No weird duplicates?

Mobile looks good?

The result should look like this.

a series of photos showing different types of cakes

Example of a Successful Variant Display

a woman's underwear page on honeylove website

Honeylove is an example of a store that displays variants on its best sellers' collection page. With images of products at the top and product variants below, the brand makes it easy for customers to see and choose options.

Dos and Don'ts When Setting Up Product Variants

Dos:

Clarity in variant titles: Use simple titles for each variant to make it easier for customers to find what they want.
Keep images updated: Ensure that the photos for your variants are always up to date and accurately represent the products.

Don'ts:

Overload with choices: Too many options can overwhelm customers. Strike a balance between offering variety and simplicity.
Forget to update inventory: Always keep your variant inventory up to date to avoid frustrating customers with out-of-stock products.

» Find out how Shopify's variant inventory policy impacts your store

Consider using color psychology in your variant images when setting up product variants on Shopify. The right colors can subtly influence customer emotions and preferences, making your products more appealing and memorable.

Show Variants to Improve Customer Experience

Following these steps, you can easily display all product variants on your Shopify collection pages, giving customers a clearer view of their options. This enhances their shopping experience and drives more conversions by making products more accessible to find and select.

Keeping your variant images updated and using themes that support clear display options are crucial to maximizing the benefits of this setup.

» Check out our guide on creating smart collections in Shopify to improve product organization

How to Show All Variants on a Collection Page in Shopify

What to Know Before Showing Variants On Collection Page

How Shopify Themes Impact Product Variant Display