Ultimate Shopify Display Product Variants Guide | Product Customizer

Deborah Mecca
February 23, 2024

Your Shopify collection page is your chance to show buyers that you offer a range of inventory and that it can meet their needs. By showcasing your variants, you demonstrate your product line’s versatility. Displaying product variants on your collection pages not only creates a more visually interesting site, but also helps catch your shoppers’ eyes by showing them what you offer, leading to boosted conversion rates. In today’s post, we’ll take a look at your options for displaying product variant options, and how to do it using Shopify’s native functionality or third-party app. Ready to put the pieces together and understand Shopify display product variants for good? Keep reading.

Options to Display Variants on Shopify Collection Pages

Let’s start with the facts. Unfortunately, the default settings for Shopify collection pages don’t showcase variant options very well. Product listings appear in a static format that doesn’t show how customizable they are.

To make product listings on your collection pages more robust and show the variants you offer, you’ll need a workaround. Your options include:

  • Use a third-party app (Best option): Third-party apps are an ideal solution to improving the functionality of each product page, keeping your online store clean, and increasing the power of multiple variants without cluttering up your shop. We’ll discuss their power in greater detail below.
  • Design product photos to include variant options (“OK” option): Some store owners opt to create main product images that show color swatches, design choices, and more in a corner of the image. This solution is time-consuming, though, and often doesn’t showcase the full range of customization anyway.
  • Create separate product listings for variant options (Not recommended): This will enable you to show every possible combination of products and customization. However, it also results in a separate SKU for each separate product, which in turn results in a massive and less manageable product catalog. This is not an ideal solution.
  • Develop a custom, manually coded solution (Difficult option): This option requires coding knowledge. You or a hired developer can create a customized Shopify theme code that will display the product variants when the user clicks on or hovers over the product image. This has some significant caveats, but it is possible.

You already know how to create product listings, so there’s no need to explain that option at length. And with user-friendly design tools available, such as Canva, we’re confident that you can easily design new product photos if you decide to take that path. For the rest of this article, we’re going to focus on the two remaining two options for displaying product variants on your collection pages: using an easy third-party solution, and customizing your Shopify theme code. Since that one is harder, let’s start there.

How to Show Variants on Shopify Collection Pages

While it’s not entirely intuitive, Shopify does allow you to modify how your collection pages display products. This requires customizing your store’s theme, and this process of course will vary based on the theme you’ve chosen.

Although this option does involve a bit of coding, it can be done by motivated store owners with a bit of research and pre-learning on Shopify theme development. Here’s the step-by-step guidance for using Shopify’s functionality for displaying product variants.

1. Enable “Product Variants” and Set Specifications

First, head to the Shopify Admin dashboard and click on “Products.” Choose the specific product you want to update. Within the Product Details page, click on “Variants” and add the relevant variants for that product. For example, common choices for a t-shirt may include size, color, and fabric, while common choices for jewelry may include size, metal, gem, or engraving. Note that Shopify has a three-option, 100-variant limit, but there are ways to get around this using a third-party app (discussed in detail below).

At this step, ensure that your variants are completely filled out with pricing information, relevant attributes, and unique SKUs.

2. Create New Variants & Add Variant Details

Adding new variants to your store is easy. Within the same “Variants” page, simply create a new variant option. Include a variant image, option name, upcharge pricing (if any), variant image, and any required metafield data for every new option value you create. Once all details are added, be sure to save your changes before navigating away from variant information pages.

3. Customize the Collection Page Display

This is where it gets technical. Though you’ll only be adding code snippets, you’ll have to know exactly which snippets to add (based on which variants you want to appear), and where to add them in your Shopify theme code. Because all Shopify themes are different, there’s no way to provide explicit step-by-step directions here. If you’re uncomfortable with coding, you might want to get some help. Note that Shopify does not offer support for significant changes to your theme code, so if you get too far afield and can’t fix a mistake, you will have to reload your theme and start from scratch.

Disclaimers aside, here’s the basic approach for customizing your collection page display:

  1. If you can’t write your own code, then first find the code snippet you’ll need by searching the web for your variant ideas. There are lots of posts on displaying product variants in the Shopify Community forum, such as this discussion on adding color swatch variants.
  2. Next, locate the section of your theme code that deals with the collection pages. You will see div class and tag indicators that show you’re dealing with variants, such as variant.id, variant. Title, collection-product, and liquid file. There may be other tags, depending on your theme.
  3. Add in the code snippet you found, following the guidelines of the user(s) who provided that code. Be sure to insert the code snippet exactly where users say to put it.
  4. Confirm that the new code snippet falls within the variant section. You should see tags such as endif and end for after your code.

Again, it is critical to note that if you don’t know how to code, you should stick to the native Shopify functionalities for editing. In almost all cases, you will need to make minor adjustments to the above steps to get the new code to play nicely with your existing theme. Even a single misplaced comma or bracket can break your theme and require you to search the code line by line for errors or to start again.

4. Save, Preview, and Publish

Once again, save your changes, then preview them to make sure you like what you see. When making adjustments, save them again before previewing. That way, you’ll always have the latest version, and a server timeout or glitch with the preview tool won’t result in lost work.

in lost work. When you’re happy with what you see, hit Publish and test the live page to ensure that product variants are now showing as intended alongside standard product details, like product title and product price.

Don’t feel like coding? That’s okay. There’s another way to clean up your collections pages, and it’s to use an app. Let’s take a quick look at how you can skirt that 100-variant limit and find truly limitless freedom in designing the perfect product line and shopfront.

Using a Third-Party App to Add Variants to Shopify Product Pages

Even within your product pages, Shopify doesn’t make it easy to offer and display several product variants at the same time. In fact, the ecommerce giant allows only three variant options per page, with no more than 100 variant possibilities.

This becomes an issue when your three variant options (like different color variants, different sizes, and different designs), have more than a handful of options each. For instance, even if each of those variants has just five options each, you now have 125 variants total... exceeding Shopify’s variant limit.

5 x 5 x 5 = 125

This is exactly why third-party apps are hugely popular for increasing variant options on product pages. Such apps allow store managers to streamline their SKUs and product catalogs, enhance their product listings with a full series of customization options, and otherwise provide a cohesive shopping experience for your customers.

Best Product Variant App for Shopify Product Pages

We understand the need to streamline your online store and provide a great user experience more than anyone. Product Options & Customizer supports those goals, enabling you to clean up your product catalog by placing unlimited product variants on each and every product page on your site.

With Product Options & Customizer, you can display variant options for color swatches, image swatches, text styles, and more. And, you can display them in different formats, such as drop-down boxes, checkboxes, and radio buttons.

Want to see just how easy our app is to use? Check out this Shopify set-up tutorial to see how easy Product Customizer is to install and use. Or, visit the Shopify App Store and start a free 14-day trial now to get enhanced product variants today!

Start Your Free 14-Day Trial Today!