Dynamically update variants based on previous variant selection

[AI2029]

Hey guys,

I’ve a quick question that I’m hoping someone can help me with. I’m using the theme Be Yours on Shopify.

I’m wondering if anyone has a solution to the following via code or otherwise. I would like the product page on my store to have the following variables:

• Select Size, Select Style, Select Colour

The important thing here is that the colours available for Select Style will be different for each of the different style options, therefore I would like the colours to update dynamically based on this.

Example #1 > Size 6, Style Bold, Available colours > red, green, blue, black

Example #2 > Size 6, Style Light, Available colours > blue, black

As you can see in the examples shown above. It’s important that the colours not available for the particular style are hidden once it is selected and vice-versa based on the choice selected.

The only similar store I have come across that does this is the following:

https://cocoonsleeping.com/collections/chair-beds/products/alice-chair-bed?variant=37593515622583

Thanks for the help in advance!

[made4Uo]

Hi @AI2029

If this variant is forever unavailable or not an option at all, you can delete the variant in your product page so it will not show

If you will show theme later, just stock is not available then you need to do a custom code, this depends on your theme.

[AI2029]

Thanks for the response!

However, this isn’t what I want to accomplish. I want the variant colours to completely change based on the Style variant selection, I don’t just want certain colours to be hidden.

The link I shared previously shows this as a working example.

[made4Uo]

Oh I think I understand what you mean. You want this section in the image below

If that is the case, you need to add html and javascript code to achieve this. This will require a developer to write a code that fits your needs. Unfortunately, you need to hire one