A while back I was building a Shopify store for a client and I had used the Variant Images app to assign photos to individual product options. This app is pretty cool, but it has a couple of drawbacks. The dealbreaker for me was that its javascript doesn’t work at all on iOS currently.

In order to get image swapping working on iOS, I ended up writing my own simple script to detect when an option is changed, look for an image to match, and swap it into place. Implementation is pretty simple.

1. Create your product options.
2. Upload your images and set the ALT text to match the value of the option. If you’re selling t-shirts and you have an option called Color with variants Red, Green, and Blue, you would upload an image for each and set the ALT text on the images to “Red”, “Green”, and “Blue” in order to match them up.
3. Insert the following code into the bottom of templates/product.liquid:

{% comment %}
Custom Image Swap - Image name must match option value
http://scottnelle.mightyworker.net/672/shopify-image-…nt-swap-on-ios/
{% endcomment %}
<script>
    jQuery(window).load(function($){
        // create an associative array of images, using alt text as key
        var product_images = new Array();
        {% for image in product.images %}
            product_images['{{ image.alt | escape }}'] = '{{ image | product_img_url: 'original' }}';
        {% endfor %}

        // change the featured image source
        jQuery('.product-options select').change(function(){
            if ( jQuery.inArray( jQuery(this).val(), product_images ) ) {
                jQuery('.image.featured img').attr('src', product_images[jQuery(this).val()] );
            }
        });
    });
</script>

Now your images should be swapping when you select a new option. As an added bonus, this script works with Shopify’s image zoom function. And since it’s pretty straightforward jQuery, if you need it to function slightly differently it’s pretty easy to modify. If you’d like to see it in action, check out the demo store.