Blog

Most people throws an ecommerce store in Shopify platform as it is one of the easiest ways to sell your goods. It is the best platform which helps to easily build unique shopping experiences.  Ease of product management is one of the main key features in Shopify theme development. You add variants to a product that comes in more than one option, such as its color, size , weight etc.

But while working on the store, have you ever faced a situation to hide unavailable variant option? When your Shopify store’s visitors make a selection in the first dropdown, and you want the values in the second dropdown right below to be updated to list only those values that are available in combination with their first selection.

In Shopify, there are no direct settings to make this happen. Only the solution is Shopify Theme customization.

Steps

Step 1 : From the  Shopify admin, go to the Online Store > Themes.

Step 2 : Find the theme  we want to edit, and then click Actions > Edit code.

Step 3 : Under Snippets, click the link called Add a new snippet.

Step 4 : To Name our new snippet as available-only and click on the button “create snippet”, it will save as available-only.liquid.
Step 5 : In our new snippet file, paste this code in the link
Stpe 6 : Click Save.
Step 7 : Under Layout, locate the file theme.liquid, and click it to open it in the code editor.
Step 8 : In the bottom of file theme.liquid, right before the closing </body> tag, paste the following code:

{% include ‘available-only’ %}

Sometimes it won’t work on Shopify sectioned theme.

For example, this same code is work for theme Debut’s 7th version but not for 11th version. Because this will only work on really old themes. And we can’t do to go back to the older version. Because those are obsolete themes already and was upgraded to 11.

BUT DON’T WORRY, WE CAN MAKE THIS FUNCTIONALITY BY ADDING ADDITIONAL CODING

Please Make a Copy of your theme files before making any changes.

1. Under Layout locate the file theme.liquid , find this line and remove the defer=”defer” part.

<!–[if (gt IE 9)|!(IE)]><!–><script src=”{{ ‘vendor.js’ | asset_url }}” defer=”defer”></script><!–<![endif]–>

2. Open available-only.liquid Snippet (the file we have created just above), and paste this code after var Shopify = Shopify || {}; line:

So Now Your code will look like in this.

3. Click Save

That’s all. Hope this works perfectly for you.

Do you want to build strong online presence for your store? Hashtag Shopify experts will help you with that to bring your clients to Shopify. Hire Shopify Web Developers who are professional designers and developers who can help you take your business to the next level.