Script that updates images on the cart page to show the correct thumbnail as chosen in the Variant Images app.

variant-images-in-cart.html

{% if cart.item_count > 0 %}
<script>
// Script that updates images on the cart page to show the correct thumbnail as chosen in the Variant Images app.
// This works with any markup.
// This works when using Line Item Properties where several items in the cart form can share the same variant ID.
// Author: Caroline Schnapp.
// Place at the top of your cart.liquid template.
(function($) { 
  var variantImages = {},
    productHandles = [];
  {% for item in cart.items %}
  productHandles.push('{{ item.product.handle }}');
  productHandles = $.unique(productHandles);
  if (typeof variantImages[{{ item.id | json }}] === 'undefined') {
    variantImages[{{ item.id | json }}] = [];
  }
  variantImages[{{ item.id | json }}].push({{ forloop.index0 }});
  {% endfor %}
  jQuery(function($) {
    $('form[action="/cart"]').each(function() {
      var images = $(this).find('img[src*="/products/"]').hide();
      var size = images.first().attr('src').match(/thumb|small|compact|medium|large|grande/)[0] || 'small';
      for (var i=0;i<productHandles.length;i++){
        $.getJSON("/a/variant-images-1?shop=" + Shopify.shop + "&handle=" + productHandles[i], function(data){
          $.each(data, function(variantId, image) {
            if (typeof variantImages[variantId] !== 'undefined') {
              for (var j=0; j<variantImages[variantId].length;j++) {
                var oldURLParts = images.eq(variantImages[variantId][j]).attr('src').split('?');
                var suffix = '?' + oldURLParts[1];
                var prefix = oldURLParts[0].split('/');
                prefix.pop();
                prefix = prefix.join('/') + '/';
                var filename = image.filename.replace('.', '_' + size + '.');
                images.eq(variantImages[variantId][j]).attr('src', prefix + filename + suffix).show();
              };
            }              
          });    
        });
      }      
    });
  });
})(jQuery);
</script> 
{% endif %}

I am assuming here that your theme uses jQuery. That's 99.9% of all Shopify themes out there. The only exception I know of is the theme ClearFlex by ClearLeft. Also, this script assumes that jQuery is included in the head element, as it should. There is a bunch of JavaScript files a theme should include in the head, rather than at the bottom of the body element, and jQuery is one of those.

PS. For now, it's not possible to show the correct image at checkout. This solution fixes the cart page issue, and not the checkout pages one.

Paste above script at the top of your cart.liquid template.

Thank you for sharing this excellent code.

Hi, I have ClearFlex Theme, so do I need to add JQuery to the template, if so, which file. I can't seem to get this to work on the ClearFlex Theme, any ideas. Help is much appreciated!

Ah ha, adding Jquery to the template makes ClearFlex Theme work ok.

Hi Justin,

There's only one theme that does not use jQuery in the theme store, and it is ClearFlex. I am glad you figured it out. For others, if you have ClearFlex, simply add this at the top of your code:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}

The snippet has now been fixed to work in the Simple theme, which contains 2 cart forms. The previous code was only updating the images in the drawer cart when on the cart page. Include the code snippet on all pages to deal with the cart drawer, BUT when adding an item to the cart, you won't be able to see the right image, unless you execute the code again. The images will correctly be shown after a page refresh.

Awesome snippet! Thank you so much :)

One thing I noticed, is that it doesn't work when the filename has a period/full stop in it, e.g. 'my.car.jpg'.
It ends up replacing the first period with the size. I changed the filename line to this to help with that:

var posOfLastPeriod = image.filename.lastIndexOf('.');
var filename = image.filename.substr(0, posOfLastPeriod) + '_' + size + image.filename.substr(posOfLastPeriod);

Just popping it here in case it helps somebody else.

Does this still work?

The ajax

$.getJSON("/a/variant-images-1?shop=" + Shopify.shop + "&handle=" + productHandles[i], ...

return 404 for me.

I actually managed to change the product featured image shown on cart page with the variant image by editing the code in cart-template.liquid
Search for image: item.product.featured_media.preview_image and replace with image: item.variant.featured_media.preview_image

I am still checking where can I do the same trick on the mini side cart.