Liquid, JavaScript, themes, sales channels
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 🙂
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
Thanks,
I know where to put the code but don't know how to code it 😉
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
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
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>".
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
Hi, That was exactly what I had done but nothing is displaying? It's so strange that it doesn't work.
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
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024