Shopify - Changing the Product Image When Selecting Different Variants Using Radio Buttons
This was the simplest way I felt to change the product image when a user clicked/selected different product variants when using radio buttons (not a select drop down). I had to create this for client when they only had 1 variant type and wanted to list out the variant options the visitor could choose. For this example, let's say we're selling t-shirts and the featured image displays an overview of all 5 t-shirt colors available and we want the featured image to change based on the color we choose.
Add in Product Image ALT text
First, you'll need to have your Variants set up for your product, my color Variants are: Red, Blue, White, Black, Green. Then, you'll need to upload your product images. Once your images are uploaded you'll need to add ALT text for each image, this is how you'll be connecting your images with your Variants. Your ALT text should match up with the corresponding Variant name. For example, for my red shirt image my ALT text is 'Red', and so on and so forth for the remaining images.
Product Liquid Code
Next in your product.liquid template you'll need to do two things. One, set up your radio buttons. Two, create a div container holding all of your product images with ALT tags and hide this container with css, so you'll only have the 'featured' image showing. Your theme may already have this code set up for you, if it does then all you'll need to do is hide the container holding all of your images with css (I added a hide class to my #ImageContainer container).
Liquid - Radio Buttons
I got this code from the Shopify Discussion Forums here and modified it to only have the Variant Title appear in the label field. It is IMPORTANT for you to format your label tag correctly so that it will correspond to the ALT text you assigned to your images.
Liquid - Images
CSS
jQuery - Bind
Now you'll need to utilize some jQuery to trigger the change when you click on a radio button. You can bind a change to check if the radio button you clicked on matches any of the image ALT text. If there's a match it'll replace the Featured image with the corresponding Variant image you clicked on. (not shown: you can also change the featured image's alt text in the bind as well)
More Shopify Help
Shopify Tips and Tricks
Shopify - Displaying Cart Items On a Remote Website With Ajax