When you click on an image the code doesn't change | Supply Theme

Excursionist
102 0 1

I need it so when you click on an image I need the SKU to change.

IMAGE.png

0 Likes
Shopify Partner
1854 310 399

Hi @DStanko 

First of all you have to add sku in <li> attribute by sku="{{ image.variants [0].sku }}" , so it look like...

<li sku="{{ image.variants [0].sku }}" class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

now add bellow Js code in Asset->theme.js

$(document).on('click','#productThumbs-product-template li',function(){
    $('.variant-sku').text($(this).attr('sku')); 
})

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Excursionist
102 0 1

here do i add the top code?

0 Likes
Highlighted
Shopify Partner
1854 310 399

Yes you can use this copy Js code but add sku="{{ image.variants [0].sku }}" on right place as i mentioned

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Excursionist
102 0 1

This isn't working. i still dont get what you want me to do with the 

<li sku="{{ image.variants [0].sku }}" class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

code

 

0 Likes
Excursionist
102 0 1

All this does is make the image really big and take up the whole page, i need the SKU to change when you click a different image.

0 Likes
Shopify Partner
1854 310 399

 just need to add this code in <li> no need to change your code

sku="{{ image.variants [0].sku }}"

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Excursionist
102 0 1

It still enlarges the image instead of JUST changing the code.

0 Likes