How to manage out-of-stock product variants on my storefront?

Hi

I am looking to solve a problem on the storefront side of my product pages. I am selling goods that require multiple variant options spread across three variant groups as shown below in the attached picture.

The issue that I am having is that not every single variant combination is in stock but all the buttons look selectable when a customer is looking to choose a combination of the varients when shopping. Is it possible to have the pills in the ‘‘Length’’ and ‘‘Grade’’ options blank out when a customer selects a ‘‘Diameter’’ if the product is not in stock and visa versa? I only want to show the combination of available products.

Any help would be greatly appreciated.

Thanks

Hi @CSolutions ,

To show only available variant combinations based on stock, you can use JavaScript to dynamically update the variant options on your product pages. When a customer selects a variant, the script checks the stock status for each combination using Shopify’s API and updates the options accordingly. The JavaScript listens for changes in one variant group, like ‘Diameter’, and then enables or disables options in ‘Length’ and ‘Grade’ based on what’s available. This approach requires some coding expertise, particularly with JavaScript and Shopify’s API.

Hello @CSolutions ,

Thank you for reaching out with your request to customize the storefront behavior based on variant availability. This is indeed achievable using JavaScript to dynamically update the options based on stock availability.

However, please note that this customization will require some time for implementation and testing to ensure it works seamlessly with your existing setup. Customizations, especially those involving frontend interactions, can be a bit intricate to ensure a smooth user experience.

Would you be able to point me to someone who could help with this?

You should hire a Shopify developer. If you want I can help you with this too.

Hi

Yes if you could help that would be great thanks. How do you propose moving forward with this ?

Let me know your preference where we can discuss this further.

Do you have an email address I can contact you on?

I messaged you my email address.