How to Show All Product Variants on Shopify Collection Pages

If you run a Shopify store, you’ve probably wanted to make it easier for customers to see all the options your products come in whether it’s size, colour, or style without needing to click into each product page. As of 2025, Shopify still doesn’t offer a built-in feature to show all product variants directly on collection pages. But the good news is, you can add this feature with a bit of code. This guide will walk you through exactly how to do it step-by-step, so your customers can view and buy variants faster—helping you improve the shopping experience and boost conversions.

Step-by-Step: Show Variants with Code

Example uses Shopify’s default Dawn theme (Online Store 2.0). Other themes may have slightly different file names or layouts.

1. Open the Shopify Theme Code Editor

Log in to the Shopify admin
Go to Online Store → Themes
Click … next to your active theme and choose Edit code

2. Find the Collection Grid File

Go to the Sections folder
Open main-collection-product-grid.liquid
(If your theme doesn’t have this, look for a file like collection-products.liquid or similar)

3. Insert the Variant Dropdown Code

Locate the area inside the loop that renders each product card (usually inside a <li> tag).
Paste this snippet just above </li>:

{% if request.page_type == 'collection' %}
  {% if product.variants.size > 1 %}
    <div class="product-variant-dropdown">
      <form action="/cart/add" method="post">
        <select name="id" class="product-variant-select">
          {% for variant in product.variants %}
            {% if variant.available %}
              <option value="{{ variant.id }}">{{ variant.title }}</option>
            {% else %}
              <option disabled="disabled">{{ variant.title }} - Sold Out</option>
            {% endif %}
          {% endfor %}
        </select>
        <input type="submit" value="Buy now" class="product-variant-submit-button" />
      </form>
    </div>
  {% endif %}
{% endif %}

{% if product.has_only_default_variant %}
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="submit" value="Buy now" class="product-variant-submit-button" />
  </form>
{% endif %}

4. Add Custom CSS

Now go to the Assets folder and open base.css or theme.css. Add this at the bottom:

.card-wrapper {
  height: auto !important;
}

.product-variant-dropdown {
  display: block !important;
}

.product-variant-select {
  border: 1px solid #121212;
  padding: 10px 10px;
  width: 100%;
  margin-bottom: 10px;
  display: block;
}

.product-variant-select:focus-visible {
  outline: none;
  box-shadow: none;
}

.product-variant-submit-button {
  background-color: #121212;
  color: #fff;
  padding: 12px 25px;
  border: 1px solid #121212;
  border-radius: 0px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
}

.product-variant-submit-button:hover {
  background-color: #fff;
  color: #121212;
}

This ensures your dropdown and button display correctly across all devices.

Result: What You’ll See

Each product card will now display:
– A dropdown of available variants
– A “Buy Now” button to add the chosen variant to the cart directly

Alternative: Use a Shopify App

If coding isn’t ideal for your client or readers, you can mention third-party apps like:
– Varia – Displays each variant as its own listing on collection pages
– Variator – Adds dropdowns and variant options without editing theme code

These options are easier to manage for non-technical users, but often come with extra cost.

Conclusion

Until Shopify offers a native option, this is one of the cleanest ways to enhance the collection page experience. Adding this small piece of code can make a big difference.