Not so fast on Shopify's 2048 variant limit increase

While Shopify's recently increased 2048 variant limit sounds good, it's best to temper your expectations.

Even though it's "released" I feel like they skipped over a huge limitation with it.

What is the 2048 variant limit you say?

Previously Shopify would only allow 100 variants per product. Need any more and you'd have to split your product into multiple products.

Due to how product options created variants, it was easy to run into their 100 variant limit. It happened so often, entire apps were built to work around the limits.

Shopify has since updated most of the platform to support 2,048 variants per product. "Most" of the platform, not the whole platform.

What part was missed?

Just a tiny part called Liquid.

Yes, you read that right. Shopify's own technology that powers every store and near every page on their platform wasn't updated to support 2,048 variants.

We and others brought this to their attention during the development previews. Their solution was to tell everyone to rewrite variant code in JavaScript and use their Storefront APIs. That's not a solution, that's a cop-out.

In reality, Shopify is banking on the idea that most merchants won't go above 250 variants. They know waiting for the JavaScript to load isn't ideal. Yet they moved forward with this "solution" anyways.

You'll also need to update your theme if not already. Older themes may not support the new 2048 variants as changes are needed to show all variants in your product options. If you feel the need to go beyond 250 variants, make sure your theme is current.

What does the 250 variant limitation mean for Shopify Merchants?

Basically to sum up the issue, Liquid can't access more than the first 250 variants for any product.

Have 251 variants? One variant won't show up in Liquid. Your visitors (including search engines) won't see it unless you have extra JavaScript written.

Meaning everyone who wants to use all of the variants, need to access Shopify's APIs, build and maintain a custom app, keep updated with API changes, slow down their store with yet more JavaScript and API calls, etc, etc.

Themes, using JavaScript, can get single variants for the add to cart or product options, but they cannot see everything.

Accessing up to 250 variants with Liquid is better than the 100 variant limit, but nowhere near the promised 2,048 variants.

Can Google see more than 250 variants?

Short answer, no.

Long answer, the search engines will be able to see up to 250 variants on the page as that is what's shown in the HTML. Seeing anything beyond that requires either

1. interaction (clicking) which search engines will never do, or
2. an app to access to Shopify's APIs to load and display the additional variants in the HTML which then takes us to our next issue.

How will the increased variant limits impact my page performance?

As it is, loading 100 variants on the product page isn't quick. I can't tell you how many customers come to me with structured data issues due to a large page load. This will only make things worse.

That data has to come from Shopify's backend servers and then in most themes that whole data is added to the page.

Not once, not twice, but many times.

Our dev store shows nine copies of the variant data scattered around the product page. That's a lot of extra copies created by web pixels, Shopify Analytics, the actual add to cart form, accelerated checkout buttons, and the structured data. And our dev store isn't even running that many apps.

With 10 to 50 variants having a few copies of that text embedded in the page is okay.

100 though? That's starting to bloat out the page.

250 variants... or more... now we're talking about some serious page size issues.

(Luckily not all 2,048 variants can show up on the page due to the Liquid issue but if someone starts using JavaScript to add them... holy PageSpeed Batman!)

That also doesn't account for collection pages that show variants, swatches, or quick views. Now you have 24 or so products times potentially 250 variants (or 2,048 if you're talking to the JavaScript APIs).

PageSpeed scores on those pages are going to fall like an ACME rock tied to a coyote.

Where do I go from here?

Given these issues, we recommend restraint with using the new variant limits. Needing a few extra variants above 100 is fine, but consider 250 the hard limit.

Always remember that the more variants you add to a product, the slower its page will become.

This is one of the laws of large data, the more data you have the slower things will run.

Until Shopify fixes this, I don't recommend adding more than 250 variants to a product.