Workaround for the Shopify 100 Variant Limit

Workaround for the Shopify 100 Variant Limit

Shopify is a fantastic ‘Managed Ecommerce’ platform that provides a powerful, safe and easy to use online store for business of all sizes.  Unfortunately as its a hosted platform, the core codebase is a ‘one size fits’ all arrangement, enforcing some limitations on stores.

One of these limitations we fell foul of recently was the 100 Variant Limit.

What is a variant?  For all intents and purposes, a variant is a SKU (Stock Keeping Unit) or unique variation of a product.  If you have a t-shirt that comes in 5 sizes and 5 colours, you have 25 variations or variants of it.  The key purpose of variants in Shopify is to allow different SKUs to have different prices and different inventory levels (e.g. 37 blue XL shirts, 23 blue Small shirts, etc.)

Unfortunately, 100 variants simply isn’t enough for some product ranges so you have a find a work around.  At present there are really only two options, each with their own benefits:

SolutionProsCons
Rethink the ProductAllows the use of Inventory LevelsSplits Variations of the Same Product
Use a Custom Line Item FieldAllows an almost unlimited number of additional optionsYou lose the unique SKU naming for each variant
Harder to manage
You cannot use Shopify’s inventory management for these SKUs

How Do I Work Around the 100 Variant Limit in Shopify?

Below the two options are broken down in to more detail

Answer 1: Rethink the Product

In some cases, it may make more sense to logically separate the product variants in to different products. For example, if you have t-shirt that comes in 9 sizes (S, M, L, XL, 2XL, 3XL, 4XL, 5XL) and 14 colours, it may be simpler to break this down in to one product called ‘Acme T-Shirt’ and another called ‘Acme T-Shirt, Larger’. You can then link between them in the narrative and customers will still be able to find their products using product filtering options.

Answer 2: Use a Custom Line Item Field

You can create a custom product template in Shopify to add your own additional fields to the ‘Add to Cart’ area of product pages and then capture this information in the shopping cart and order process.   Obviously you probably don’t want a custom field showing on every single product (for example, you wouldn’t want a colour selector on a detergent product) so you create a separate Product Template specifically for products that need the Custom Line Item.

Example 1: A Custom Colour Selector for a T-Shirt Product

In your Shopify Admin panel, go to Online Store

Click Themes at the top of the left menu

Click Customize theme in the top right of the currently displayed theme

At the very top of the theme page (which will probably be showing your homepage) click the Theme Options drop down

Click </>Edit HTML/CSS

You should now be presented with a list of the various page templates that make up your stores theme.

Under the Templates heading, click Add a new template, select the template type as product and then enter a useful name for it:

Shopify Variant Limit - New Template

Click Create Template

You will now be presented with a block of code for that template – it may be a little daunting but to narrow it down, we are looking for the <form> tags that mark the beginning and end of where the ‘Add to Cart’ section of a product page is located I’ve highlighted them in this sample:

          
{{ product.price | money }} {% if product.compare_at_price > product.price %} {{ product.compare_at_price_max | money }} {% endif %}

The code that we need to insert for a colour drop down will look like this and typically needs to go above the <div class=”product-single__prices”> code:

  	
              

Note that the form field name attribute cannot simply have your field name in any format, it needs to be name=”properties[Your Field Name Here]”, for example:


              {% for variant in product.variants %}
                {% if variant.available %}

                  

                {% else %}
                  
                {% endif %}
              {% endfor %}
                        
  			
              

            
{{ product.price | money }} {% if product.compare_at_price > product.price %} {{ product.compare_at_price_max | money }} {% endif %}
Bob McKay

About Bob McKay

Bob McKay works at Perfect Image, is a father, programmer and a self confessed techie-geek type.

Disclosure Policy

Bob on Google+

Leave a Reply

Your email address will not be published. Required fields are marked *