Variant question: How to make an unavailable option unclickable or invisible.

[Selbyhardware]

On my website, some products have 2-3 options. But most of the time, if a person clicks on something on the first option, many things on the 2nd option isn't available to it. But the user canstill select the unavailable option. Is there a way to make the unavailable option invisible instead of crossed out?

For example, One product comes in 2 colors with different lengths. So the color Brown will have sizes 14, 16, 18, 20, 22 while the color White will only have sizes 14, 22. If the person selects white, they still see sizes 16, 18, 20  though they are crossed out but they still can select it. How do I make those unavailable options invisible?

[Ava · Accepted solution]

Hey, @Selbyhardware!

At the moment, there are only a few ways to hide sold out or unavailable options on the storefront. The only option available from within the Admin is to delete the combination of sold-out options. However with this option, if the variant option is deleted, it cannot be reversed, which makes things difficult if when it comes to replenishing stock for that option.

There are a few options available to you though, I will walk you through them below!

Single Option Products:

For products that only have a single option (such as size), we have a supported tutorial that can be viewed here. If you are using a theme that has been designed by Shopify (those are all of the free themes in the Theme Store), then you can ask our Theme Support team for assistance here. In order to do this for you, you can reach out to our support team via live chats here!

Multi-Option Products:

If the products have multiple options (such as size and colour), we have an unsupported tutorial, which can be viewed here. This tutorial will not work on themes that are running on Online Store 2.0, but will work for older themes! To check which kind of theme you have, you can take a look at theme architecture versions here. If you need a helping hand with this tutorial, it is best to reach out to a Shopify Expert for assistance.

Non-code workaround:

Another, non-coding, option is to delete the variant and then re-create it when you want it to be visible. Exporting a CSV prior to deleting it would let you upload the CSV again later with all the variant information ready to go. This is essentially the same as removing it from the Admin as above, but might be faster for changing multiple products at once!

Apps:

Lastly, you can look into using an app to hide sold out products if you'd rather not make coding changes or use CSV files. There is a full range of apps here that will give you that extra functionality. A lot of apps do come with an extra monthly charge for using their services, but many of these apps have free subscription plans available too. I would recommend trialling an app first before deciding if you'd like to use it first, you will usually get 1-2 weeks of free usage before you commit!

I can understand this is not a very straightforward process, but I do hope there is something here that will be useful for you! Are you in the process of getting your product pages ready for BFCM? I'd love to hear more about your plans, just to see if I can assist in any way.

Speak soon!

Ava
Social Care | help.shopify.com

[Selbyhardware]

Thanks, Ava. I will look into the Multi Options product. THanks.

[Ava]

Awesome - sounds like a plan, @Selbyhardware!

If a customer is looking for a product that is out of stock at the moment, you can always offer a gift card as an alternative option for them? This could be a great option for a customer who is browsing your site for Holiday gifts - they can purchase a gift card to your store so the recipient of the gift can use it to buy the product once it is back in stock again! 

Just something to keep in mind in future. Let me know what you think!

[Selbyhardware]

The code didn't work as the Theme is recent. I already do not have the variants available, but I don't want the customer to select an unavailable option which is still clickable despite being crossed out.

[Ava]

Ah, I see! Thank you for keeping me up to date here. The apps I've listed in my last response will hide out of stock products; however, they will hide the full product and not just a select few variants. It is odd that your customer can still click on the unavailable variants, as usually, they are not clickable. Can I ask the name of the theme you are using, please? Just so I can dig into this further for you! - Ava

[Selbyhardware]

Thanks for the reply. Unfortunately, the theme we are using is was created by a Shopify expert I hired. 

[Ava]

Ah, I see, thank you for the update! In that case, it would be well worth your while to contact the developer and ask them to review the store. If a variant is out of stock, it should not be an option for your customer to still check out. This is something the developer could review and hopefully fix for you!

Could you also double-check this setting in the admin: go to the admin and select Products, then select a product with an out of stock variant. If you select that product, then click on a variant to edit it, you will see this section: 

This will allow you to sell even when out of stock - could you make sure this box is not ticked? Thanks!

[FindingPlumbing]

Hello @Selbyhardware I was reading your post and I have a similar issue. I recently post a question about it. I see that you were able to crossed out the Length that was not available. Can you please share how you were able to crossed out? Was that an option that came with your Shopify Theme or it was something you did with Coding? Thank you for your time.