Supply Theme (Link Variant Images to Select Input Field Options)

Solved
Asjas
Excursionist
19 3 3

Hi,

 

We are using the Supply theme for our Shopify store. We have multiple variants of sunglasses (color) for a particular product. Each variant is available on the `select` input field as a option and it changes the image and the description if you use the select field to make the change.

What we want to do is link the image to a variant so that if someone clicks on the images on the left, it changes the `select field value`, `url` and `description` to reflect the variant that the person clicked on. At the moment each image changes but the content doesn't reflect the change. We are afraid that if someone chooses a different color by clicking on a image instead of the select field they won't receive the product they expected.

 

Has anyone done something like this and can you share how you did it? Or can someone give a hint on how I can possibly achieve this?

Thanks,

0 Likes
sarhov
Shopify Expert
482 85 149

This is an accepted solution.

@Asjas 

 

I think you want to add a functionality of select variant by clicking their images.

Learn more here

https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-image...

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
localpantryco
New Member
1 0 0

Hi,
We are also using the Supply theme and would like to implement this feature. We have tried the code here:
https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images
But it doesn't seem to do anything.
Note: we did not have the theme.js.liquid file used in the instructions, so instead we pasted the code in our shop.js.liquid, as instructed by Andrew from EcomExperts in the comments of their youtube video (https://www.youtube.com/watch?v=ITwTXDWBZbA)

@Asjas how did you go implementing this code?

Has anyone else made this work?

Cheers,
Melanie

0 Likes
Asjas
Excursionist
19 3 3

It's been a really long time since I've implemented it but I basically made the code changes in that link. I don't remember if I had to add any custom code but that link provided most of the functionality.

0 Likes