Display the "name" of the selected variant color below the main product image

JHO
Tourist
10 1 0

Hi,

I am using the Venture theme and I want to display the "color name" of the selected variant under the main product image.

So when I change image to display it will change and display the selected "color name".

 

I hope someone understand what I am trying to explain and help me 🙂

 

bild.png 

 

Replies 9 (9)

ashiqueh4
Shopify Partner
361 34 57

you have to use javascript or Jquery to get selected color and than append it to your html 

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

JHO
Tourist
10 1 0

Thanks,

I know where to put the code but don't know how to code it 😉

ashiqueh4
Shopify Partner
361 34 57

please share me your store ,i will code it and i will send you

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

ashiqueh4
Shopify Partner
361 34 57

let color=$('.selector-wrapper.js.product-form__item #SingleOptionSelector-1 :selected').text();
console.log(color);
$("#color_div").text(color);
$( ".selector-wrapper.js.product-form__item #SingleOptionSelector-1" ).change(function() {
let color=$('.selector-wrapper.js.product-form__item #SingleOptionSelector-1 :selected').text();
console.log(color);
$("#color_div").text(color);
});

<h1 id="color_div"></h1>

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

JHO
Tourist
10 1 0

Hi and thanks for helping me.
I can't  get it to work. I thought that I only needed to paste the code or do I need to add something more? I also tried to add <script> before "let" and </script> before "<h1>".

ashiqueh4
Shopify Partner
361 34 57

paste it in product template page underneath like:

<script>

let color=$('.selector-wrapper.js.product-form__item #SingleOptionSelector-1 :selected').text();
console.log(color);
$("#color_div").text(color);
$( ".selector-wrapper.js.product-form__item #SingleOptionSelector-1" ).change(function() {
let color=$('.selector-wrapper.js.product-form__item #SingleOptionSelector-1 :selected').text();
console.log(color);
$("#color_div").text(color);
});

 

</script> 

 

and put this html where you want to show :

<h1 id="color_div"></h1>

 

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

JHO
Tourist
10 1 0

Hi, That was exactly what I had done but nothing is displaying? It's so strange that it doesn't work.

ashiqueh4
Shopify Partner
361 34 57

could you give me access your store for minutes ?

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

reddelacruzdev
Visitor
2 0 0

Hello!

 

You can follow the steps here.

However, your event listener here will be from your image thumbnails and not the variant picker. You'll have to use 'data-attribute' and assign a value like variant id that will indicate that it is for that variant. 

But if the event listener will be coming from your variant picker, that would be easier and this article tells you exactly how to do that. 

 

You may also view the live sample code on CodePen here

 

Thanks!