How to Hide unavailable Variant Choices based on the Previous Variant Selected

Store Design
, ,
1

Good day All,

This is a bit of a complicated one for me to explain so please bear with me.

I have products on my store that have multiple options but not all options are connected to make all variant possible Just like Below:

Figure 1.png
Figure 1.png169×409 6.41 KB

Figure 2.png
Figure 2.png349×250 5.02 KB

But they are for the same product, however what I want to happen is that once the first option, on the product information page, is selected then the second option appears to be selected.

Figure 3.png
Figure 3.png451×234 10.5 KB

For Instance, if a customer choices 40MM for the length, then only the 6MM for the Bolt Diameter should appear because that is the only possible Variant of the options put together.

I’m using Dawn 2.0 as my base theme template i have changed it a bit in the past using code.

Below I also have attached a link to a similar discuss that explains my issue more clearly, I think.

How To Make Variants Unavailable Based On Variant Selection? - Shopify Community

Thank you in advance.

2

This is a ‘Variants - Link Product Options’ advanced customization.

Instruction are available for older vintage themes

https://community.shopify.com/topic/615156

It would take some modification to work in OS2.0 themes like dawn.

Generally once you link option in this way the nonvalid options in the secondary or tertiary options should not be shown, or clearly marked as not valid for the top option choice to prevent user confusion clicking on a second option to then choose an option in the first set of options.

If you need this customized for you then contact me , info in sig. Please provide context: store url, theme name, post url and detail.

3

Good Day Paul,

Thank you so much for your reply.

I followed the thread that you sent me and unfortunately i don’t think it is valid for the Dawn 2.0 theme that i am using as it did not work.

If your able to assist me further, that would be amazing, i tried following a few suggestions on the GitHub thread that is contained in the Shopify thread, but it was a dead end.

Here is the information below:

Store URL: https://everything-boating-2999.myshopify.com or https://everythingboating.co.za

Theme Name: Everything Boating (Dawn 2.0)

Post URL: Re: How to Hide unavailable Variant Choices based on the Previous Variant Selected. - Shopify Community

Details:

Good day All,

This is a bit of a complicated one for me to explain so please bear with me.

I have products on my store that have multiple options but not all options are connected to make all variant possible Just like Below:

EverythingBoati_0-1674101162505.png
EverythingBoati_0-1674101162505.png169×409 6.41 KB

EverythingBoati_1-1674101162507.png
EverythingBoati_1-1674101162507.png349×250 5.02 KB

But they are for the same product, however what I want to happen is that once the first option, on the product information page, is selected then the second option appears to be selected.

EverythingBoati_2-1674101162607.png
EverythingBoati_2-1674101162607.png451×234 10.5 KB

For Instance, if a customer choices 40MM for the length, then only the 6MM for the Bolt Diameter should appear because that is the only possible Variant of the options put together.

I’m using Dawn 2.0 as my base theme template i have changed it a bit in the past using code.

Below I also have attached a link to a similar discuss that explains my issue more clearly, I think.

How To Make Variants Unavailable Based On Variant Selection? - Shopify Community

Thank you in advance.