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

Tourist
8 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 

 

0 Likes

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

Shopify 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

1 Like
Tourist
8 1 0

Thanks,

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

0 Likes

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

Shopify 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

1 Like

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 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

1 Like
Tourist
8 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>".

0 Likes
Highlighted

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 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

0 Likes
Tourist
8 1 0

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

0 Likes

could you give me access your store for minutes ?

Shopify 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

0 Likes