Working with multiple product variants can be challenging task. When there is only one variant, say size, Shopify tells us if a variant is in stock so we can visually show that to the user.
In the above example, Shopify sends us something like this:
- XL - sold out
One option with four variations to handle, nice and easy. If we add two color variants, we go from 4 possible options to 8. 4 sizes x 2 colors gives us a lot more information to deal with, and Shopify sends it to us in a big list of all the possibilities:
- S Black
- M Black
- L Black
- XL Black
- S Camel
- M Camel
- L Camel
- XL Camel
We take these options and split them up so you have some user friendly buttons or dropdowns, rather than one long list of all the options to choose from. Determining which combination is available is difficult on the code side — especially if you had 3 options with 5 variations each. That's 125 total possibilities and a much longer list to sort through.
If we used the same color and size options above but removed XL Black and L Camel, we'd get a list of only 8 instead of 10. Shopify doesn't tell us those don't exist since they're never been set on the product page.
In earlier versions of our themes, and most themes available, the only way to know the status of a variant is to send a query to Shopify with the variant's ID and get a response back of available, sold out, or not available — with that we could update the add to cart button with either Sold out or Unavailable.
Below is an example of what happened when you clicked on XL Black, a variant that isn't available on the shop.
That's not a great experience for your customers.
With this new feature, we get ahead of any possible disappointment by proactively marking unavailable items when the page loads and as you click through them:
This prevents your users from accidentally finding themselves with an option they cannot purchase, like a Large Camel or XL Black product here.
Sold out variants
Sold out variants will not be blocked off. This is because a number of apps, like back in stock notifications, require sold out variants to be clickable.