Product Photo matches variant selections

New Member
6 0 0
I'm looking for help to get a feature working on a shopify store. Would like the drop down selection for a product to match the product image. For example, if the product was 't-shirt', and the options included colors of red, blue and green. If the user selects 'green' from the drop down, the main product image would change to green upon selection from the drop down. This is the product page that we are currently trying to get this feature for: http://niteize.myshopify.com/collections/carabiner-figure-9/products/carabiner-figure-9-large If anyone knows how that can happen or help implement that feature, please let me know. Thanks.
0 Likes
Shopify Staff
Shopify Staff
5704 0 287

Beej30, I just implemented this for a client.

My code plays nicely with option_selection.js and uses jQuery.

It does rely on a proper naming convention for your image files. The file name must contain in it the option that is selected.

If you have many sets of options, say Material and Color, and it is the Color that interests you, then the image file(s) that go(es) with ‘Red’ must contain the string red in it (case-insensitive). That way, you don’t need to worry about the order of your images in your admin, or how many images you’ve got to illustrate a particular option.

By the way, your image code is not quite working: when you change the main image by clicking on a thumb, and you zoom in that image, the Fancy Box showcases the old image not the new one.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
6 0 0

Hi Caroline,
Would you be willing to help implement on this site for me? I know little of jQuery, and need it rather quickly. Let me know if you can help me out.

Thank you so much for getting back to me.

bj

0 Likes
New Member
6 0 0

Do you have a sample of this working? I checked out the bag store but didn’t see it working on the product page.

Thanks,
bj

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

@beej30,

If you need help with this, contact me. I’ll give you a quote.

Here are some examples:

http://gilesandbrother.myshopify.com/products/pied-de-biche-cuff
http://gilesandbrother.myshopify.com/products/pied-de-biche-ring

The JavaScript used for this is copyrighted.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
6 0 0

That’s awesome, exactly what I was looking for. I just sent you an email for a quote.

bj

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

I got your email bj, thanks. I’ll get back to you before dawn tomorrow, Eastern Time, promised.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
6 0 0

Hi Caroline,

I got your email yesterday with the estimate, but needed timing on completion of the project. I sent some emails, but wondering if they're getting dropped into the spam folder again.  Can you let me know this morning if possible?

 

thanks a ton.

bj

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

I did not get that email, no. Damn!

I will get back to you prompto.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes