Swatches - variant image matching on the Collection page

Shopify Partner
22 0 1

http://www.tetchi.ca/shopify-tutorial-associating-product-variants-with-product-images/

I have used this guide to create Swatches on the product page that lets my swatches image match to my product slideshow, and it works great!

(My 'SelectCallback' function is on the product page template, I am using the New Standard theme)

I have now implemented product swatches to show up on my collection page as well, and that looks great. Now the challenge is to have those swatches on the collection page offer the same functionality as I have on my product page, and show a specific variant's image when a swatch is clicked on the Collection page.

I have found this guide, which briefly touches on this point: http://czarto.com/2012/03/02/adding-color-swatches-to-your-shopify-collections-page/ ;

Where should I start to hack tetchi's solution so it works on the collection page? Can I have multiple 'selectCallback' functions on the same theme? (Can I load it in the product page, and also load it in the collection page?)

This website has this solution implemented, so at least I know that this is possible on Shopify. 

http://www.southernmarsh.com/collections/shirts

Thanks for any help!

 

0 Likes
Shopify Staff
Shopify Staff
5826 0 276

You don't need several selectCallback functions, no. You can get away with 1, while you'll build options for each product — so, 1 selectCallback to re-use, and several of these:

new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: , onVariantSelected: selectCallback });

It may be worthwhile to inspect themes (in the browser) that implement a Quick View or Quick Shop function on collection pages, to get an idea of how that works.

All themes by Out of the Sandbox have that function.

 

 

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