One of the most common customizations that Shopify merchants want to make to their collection pages is adding all the available variants below each product. But you’ll often find that there’s no easy solution for doing this directly in the Shopify admin.
Indeed, in most cases there are only two ways in Shopify to show all variants on a collection page — you can custom-code your own solution, or you can skip the coding and use a third-party app to implement this feature instead. We’ll go over both of these methods in detail below:
Each Shopify theme offers its own set of default customization settings, which can be accessed through Shopify’s built-in theme editor. The exact options available to you will depend on which theme you’re using.
For example, if you’re using Shopify’s default Dawn theme, you’ll find that the built-in theme editor offers several ways to customize the product grid block on collection pages. This includes settings for adding product ratings, adjusting the product image ratio, and determining whether or not a second image is shown when the visitor hovers their cursor over the product image — but there’s no option for showing all the variants below each product.
When there’s no default customization setting for a feature that you want to implement, one workaround is that you can always code it yourself.
Thankfully, Shopify makes it easy to add custom code to your storefront. Here’s how:
This will take you to Shopify’s code editor, where you can access and edit all of your theme files.
To show all variants on your collection pages, you’ll first need to go to the “sections” folder in your theme files and open “main-collection-product-grid.liquid”. It’s worth noting again that we’re using the Dawn theme; if you’re using a different theme then the relevant file may have a different name. But even in that case, the name should only be slightly different, so just look for something similar.
Now, copy the following code:
{% 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 %}
Next, for this example, we’re going to paste our code where the red arrow is pointing in the screenshot below, just above “</li>”. It’s yet again worth mentioning that we’re using the Dawn theme here. If you’re using a different theme, the place where you need to insert your code may be a bit different — but by looking for a similar section of code and using a little trial and error if necessary, you should be able to find it without too much trouble.
Save your changes to “main-collection-product-grid.liquid”.
Now, go to the “Assets” folder, open “base.css”, and add the following code to the bottom of this file:
.card-wrapper {
height: auto!important;
}
.product-variant-dropdown{
display:block !important;
}
.product-variant-submit-button {
background-color: #121212;
color: #fff;
padding: 12px 25px;
border-radius: 0px;
border: 1px solid #121212;
display: block;
margin-bottom: 15px;
}
.product-variant-submit-button:hover {
background-color: #fff;
color: #121212;
cursor: pointer;
}
.product-variant-select {
border: 1px solid #121212;
}
.product-variant-select:focus-visible {
outline: none;
box-shadow: none;
}
.product-variant-select {
padding: 10px 10px;
display: block;
width: 100%;
margin-bottom: 10px;
}
Don’t forget to save your changes.
Once you’ve successfully added the code above, each product card on your collection pages will now have a dropdown menu that displays all the variants that are available.
Visitors will even be able to select a variant and then add the item to their cart directly from the collection page — by removing a step from the purchasing process like this, you’ll make it easier for customers to place an order on your store, which should in turn lead to a higher conversion rate and more sales.
You could also use Shogun Page Builder to show all variants on your Shopify collection pages — and with this method, you won’t need to touch any code.
If you’d like to edit one of your existing collection pages with Shogun, you first must import it:
Now, you’ll be able to add your variants and make any other edits you want to your imported page:
By default, each product in the collection will then be added to the page with its own product image, title, price, and add-to-cart button. If you’d like to add any more product details, just go back to the Shopify section of the element library and drag whatever other element you want to include wherever you want it to be located.
For example, you could add the “Variant” element from the “Shopify” collection. As mentioned above, the corresponding product data will automatically populate once the element has been placed on the page. You can also set it up so that whenever you make changes to one product in a “Collection” element, the change is applied to all products. That means you’ll be able to add all variants to your collection page with just a single movement of your mouse.
And as with all other Shogun elements, there are myriad ways to customize both the styling and functionality of the “Variant” element. These options include:
In addition to the “Variant” element and everything else in the “Shopify” section of the element library, Shogun also provides all kinds of other features that you can use to improve your site.
The “Structure” elements will allow you to establish page layouts just the way you want them (you can set up columns, sliders, tabs, etc.), and the “Content” elements enable you to add everything from text and images to interactive maps and countdown clocks. And with the “Forms” elements, you’ll be able to quickly build your own custom forms as well, complete with ReCaptcha security to help protect against spam and fraud.
Overall, no matter your design preferences, business goals, or any other variable, Shogun gives you everything you need to create the perfect Shopify collection page for your specific store.
