Color swatches changing product image and thumbnails

Tourist
10 0 2

I'm setting up a store using the React theme. I have worked through a Shopify tutorial to add color swatches to the Product pages which works perfectly (http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products...).


What I am struggling with is when a color swatch is selected, the product image and thumbnails do not change to match the selected color swatch. I have managed to get this working on the 'New Standard' theme (works by default) but not on the React theme.

Has anyone managed this?

 

2 Likes
Shopify Staff
Shopify Staff
5704 0 287

Hi Salomé,

The New Standard contains code to update the main image when a color option is selected, that's why you have that behavior with the New Standard theme. The React theme does not have that code in place, and would need to be customized to have that same behavior, and that involves some custom coding.

Perhaps you can try the Variant Images app...? This updates the main image when a variant is selected.

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

Thanks Caroline - the Variant Images app work well except for one issue. If I select a product with variant options and then select a color swatch too soon while the page is still loading, then the product image won't change. Waiting and trying again after a few seconds it works perfectly. I suspect the variant images are still loading in the background - is there a way to prevent the swatches from being shown until variant images have completed loading? If I remove the swatches I see the same behaviour with the standard variant drop-down boxes.

You can see this behavior on www.traditionbound.co.za, and you select a rug which has product options.

Thanks

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

Apps' JavaScript is loaded on window.load, so the Variant Images app starts working only when all of the page's assets are loaded, and that includes images. You can reveal the swatches on window.load, and that should take care of the problem.

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

OK, so am I on the right track with this?

<script type="text/javascript">

$(window).load(function() {      
    **reveal swatches**
});
</script> 

 

Just not sure where to put it exactly and what to put in the function - would it go into product.liquid? Would you mind lending a hand?

If the the Variant Images app only runs on window.load after all assets have loaded, and if the swatches also only run then, wouldn't the standard variant drop-down boxes also not change the product image if a variant was selected while the page was loading (you would see the drop-down boxes until the swatches are revealed)?

0 Likes
Tourist
10 0 2

I can't get this sorted - can anyone help me with this?

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

Hi Salomé!

I just went into your theme a moment ago, and added the following to the .swatch divs inside the swatches.liquid snippet:

style="display:none"

... then added the following at the bottom of theme.liquid:

 <script>
   jQuery(window).load(function() { jQuery('.swatch').show(); });
 </script>

Does that work for you?

Let me know!

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

Hi Caroline

Thanks for the help! It is working in the sense that the swatches only appear once all images have loaded. However, when I select a swatch as soon as they appear, the product image doesn't change (same issue I've been having), if I wait 5 seconds or so, and then select the same (or different) swatch then the product image changes correctly.

I'm pulling my hair out with this :(

Could it have something to do with the variant images app? (if I remove the swatches code and choose a variant using the standard drop-down options too soon after selecting a product then the product image also doesn't change)

Appreciate the help so far!

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

Hi Salomé,

I question your Internet connection at this point. On my end, I click super quickly and everything works.

Also, I would think the shopper will reflect for a moment before he clicks on anything after the page loads.

 

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

You're probably right, a shopper would most likely pause to think.

Thanks for the help!

0 Likes