Dawn show variant name when you switching

[Ailyte]

Hi,

Maybe someone can help me with variants, I using the Dawn theme and when I switch the example colour, I wanna where below the writes colour, shows the colour name, is it possible to do it?

Also when you change colour it also changes.

Thanks

[miguel_liquify]

Can you provide the store URL?

[webwondersco]

@Ailyte , Could you please share the URL of the store? and also explain in detail what you actually want to do with the color variants.

[Ailyte]

@webwondersco 

You can check: dinhouse.co.uk

I have set when you are going on the product with colour variant, you above of colour swatch see "Colour: name"  but if I add style, I add better URL you can check when swapping style it's showing colour: 

https://dinhouse.co.uk/products/large-white-gloss-sideboard-with-leds?variant=45421003571508

Maybe is some way how I can set it colour shows colour and when show style it writes Style: name.

Thanks

[webwondersco]

@Ailyte , currently I can see it's shows the color when you select any of the variants. at the time of beginning its shows the style.

So, do you want to implement its show style and color based on variant selection? Correct me If I am wrong.

[Ailyte]

@webwondersco 

Yes, you are correct I show an example of how  I want to be:

If I set color:

Color: "color name"

If I set style:

Style: "style name"

and etc..

Here is mine variants.

Thanks

[webwondersco]

@Ailyte , Did you add diiferent variants there?

like for 1 variant list for color and a second variant list for style.

so if you add 2 values for color and 2 values for style then it'll display 4 values at front end side. 

[Ailyte]

@webwondersco 

I add on product if colour then colour if style then style, then is it possible make some changes when you choose style it shows style not colour?

Thanks

[webwondersco]

@Ailyte , Yes it is possible. we have to check that with some custom development and also I need to check your product organization How you have setup.

Is it better if you explain by some recording or sharing screen? So I can get your way to add variant.

[Ailyte]

@webwondersco which information do you need?

[Ailyte]

@webwondersco 

My script for color:

<script>

const options= document.querySelector('fieldset.js.product-form__input')

const legend= options.querySelector('legend')

const labels= options.querySelectorAll('label')

const inputs= options.querySelectorAll('input')

labels.forEach((item,i)=>{

item.onclick=()=>{

legend.innerText='Colour: '+inputs[i].value

}

})

</script>

[Ailyte]

@webwondersco 

Maybe can you upgrade my code?

[webwondersco]

@Ailyte , Yes I can. But I need to access your theme code as well as your products.

And I also want to check have you added both variant on only single varint. Like you have added color and style or only color and how to style label will appear.

e.g LED is style and copper is color. So when you click on copper it'll display color and when you click on LEd it'll display style label?

[Ailyte]

@webwondersco 

LED is style and copper is displayed in style in the product.

Style variant.

[Ailyte]

@webwondersco 

[webwondersco · Accepted solution]

@Ailyte , why don't you try the variant as shown in the attached screenshot? I have created separate variants for color and style.

It'll display like the below screenshot on the front end side.

Does this works for you or do you need to go with the script option?

[Ailyte]

Hi

Thanks this example yours, sorted my question.

Thanks

[webwondersco]

I was confused about your requirement before that's why it takes this much time to solve. @Ailyte 

[Ailyte]

@webwondersco 

Is some way how I can set and for style the same like colour,

example style: "style name" 

Thanks