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.
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:
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.
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.
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.
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.
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:
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.
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.
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.
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!
