What is an online store if you can’t have multiple options of every item. What are you only going to sell shirts in one color, shoes in one size, and cookies in just one flavor. NEVER! WE WANT CHOICES! 

Luckily, one of the most important features that Shopify offers is using product variants. Shopify recognizes that they must allow an easy solution for product variants because one of the most basic choices a consumer will make in their shopping experience other than to buy, is which one to get.

When your user finally makes the first choice in their specific buying journey of clicking on the product page, the product page loads, the first variant of the product appears in the dropdown. But what happens when this first variant is sold out, or not available for purchase due to insufficient stock? Well, most of the themes available in Shopify will change the button that allows you to add the product to cart to a disabled button with the text: “Sold out”. 

That is not a very inspiring option if you just landed on the product page and you are ready to make a selection. Seeing “Sold out” makes you think that the company is entirely sold out of that item. Of course, if your size is sold out that will still be a problem for you, but if you are shopping for cookies, maybe your favorite is sold out but the second favorite might still be available. You are going to want your user to see this! So where is this going? I’ll tell you.

If you don’t want this “Sold out” message to appear directly on page load and you want to load the first available variant (the next available size or flavor) instead, you could use some liquid and jQuery code as follows.

Just Follow These Steps:

• In the product.liquid you can declare a variable that stores the current variant:

{%- assign current_variant = product.selected_or_first_available_variant -%}

• Now, If this variant has the stock of 0, do a for loop through the rest of the variants and check if one of them has an inventory quantity larger than 0. 
• If such a variant is found, you can just store in another liquid variable the ID of the first available variant (firstInventoryId).
• You should place the value of firstInventoryId as an attribute of an HTML element. You could add it as data-available-id attribute in the <div class="product__wrapper">.

The rest needs to be made in your javascript file. 

When you get to page load, you have to read the data-available-id and use its value to generate the link for the first available variant and go to that URL with:

 window.location.href = firstAvailableURL; 

• Test to make sure it looks right. Visit the website and jump out to a product page.
• When a product page is opened and one of its variants has the stock larger than 0, this one appears directly.

It’s not inspiring for your users to think that you are out of stock on something when they just land on the product page for the first time. It doesn’t reflect well on their shopping experience as a whole, and it might even prevent them from looking further at other products or even investigating if there are other variants available in the product that they have already chosen to purchase.

There is nothing wrong with letting people know you are “out of stock” on some variants, don’t get me wrong, but having it load right on the front of the product page will not get you sales, but it will lead to bounces. Customize your site to be the most usable, so you can put your best foot forward with your brand. Or let us help you, because we can make your site look like anything you want… check out ours!