Auto-Selecting Available Variant

[Wanderlustudio]

Hello,

I am adding a product to my shop that has 2 variants:
- Color

- Scent

This product comes in 2 colors: White and Lavender.

Each color has only 1 scent available, "Unscented" for White and "Himalayan Cashmere Woods" for Lavender.

Through the product page I already removed the "unavailable" variant for each color, and on the website it looks like this:

However, I would like to remove the unavailable variant, and make sure that the available variant is selected.

I tried by pasting this code into base.css:

.js.product-form__input.product-form__input--pill input.disabled + label {
	display: none;
}

which works by removing the unavailable variant.

The problem is though, if I switch between White and Lavender, "Unscent" variant will be chosen although is "hidden" (and vice versa), requiring the extra step of "choosing" the only available scent, which I aim to be automatic.

How can I achieve this?

I am using Dawn Theme and this is the link to my product!

Thanks in advance

The Wanderlust Studio

[rrakhmit]

Hello

Can you please share the product page URL here?

[Wanderlustudio]

Hey there, it is this one

https://thewanderluststudio.shop/products/the-column-candle

[Shadab_dev]

Hi @Wanderlustudio, auto selecting a variant is something Shopify does through code behind the scenes. So you hiding it with css does not make a difference as you have experienced since it's just being removed from the page after the page has loaded but Shopify selects it from behind the scenes and will display the first available variant on load. 

I was actually working on something like this and actually came up with a solution not a very clean one but I guess it does the job of selecting a different variant on load instead of the first available. This was a back breaker I will admit this but worth trying.

I haven't sure fully understood your requirement to be honest but I am guessing that you are looking for something similar. Also my solution is more feasible now as long as it is just one product which is what i see is your case. 

So yeah, please reach out via mail for a convenient conversation and solution. Please also may be record a short video or something explaining your requirement briefly just to confirm.

Thanks

Shadab Ali