Shopify does not know — and cannot be informed of — any connection between a product picture and a given variant or option.

The main product image, which Shopify calls the 'featured image', will always be associated with whichever variant of a product has been added to the cart. On the cart page, and on the checkout pages, the image that will illustrate a variant will be the featured image for the product.

That being said, many shop owners use design tricks to skirt around this, so, perhaps your designer will be able to help.

There are indirect ways for you to establish a connection image ↔ variant by using either of these:

• the product image filename
• its position (is it the first image, is it the second?) amongst the product images
• the image ALT text

Before we delve into this, let's cover what can be done to product images.

The things you control about your product images

1. You control how your product images are named. You can name one product image table_red_round.jpg and another table_blue_square.jpg. The filenames of your product images are entirely up to you. However, you cannot rename a product image once it has been uploaded. How you'll name each image is something you'll need to decide before you upload your product images.

2. You can upload as many images as you want per product. You're only limited by the number of storage blocks your plan offers. In practice, that's more than plenty, and no customer hardly ever needs to have that upped.

3. You can re-order your product images at any time. Click on the handle icon over the product image thumb (on the product details page) to drag the image to a new position. Note: the image at position no 1 will be your Featured image. That is the image you'll see on the cart page and at checkout.

4. You control each image's “ALT” text. Note: you can only input that ALT text in your admin. Unfortunately, the ALT text cannot be imported in the CSV file.

Using the image position to establish an association image ↔ variant

EXAMPLE 1

Prerequisites:

• Have the Featured image be a generic image
• Have the 2nd image illustrate variant no 1
• Have the 3rd image illustrate variant no 2
• Have the 4th image illustrate variant no 3
• And so on..

In your cart.liquid template, you probably have something that looks like this:

	<a href="{{ item.product.url }}" title="{{ item.title | escape }}">
  <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}" 
    alt="{{ item.title | escape }}" />
</a>

Replace with:

	{% assign index = 0 %}
{% for variant in item.product.variants %}
{% if variant.title == item.variant.title %}
{% assign index = forloop.index %}
{% endif %}
{% endfor %}
<a href="{{ item.product.url }}" title="{{ item.title | escape }}">
  <img src="{{ item.product.images[index] | product_img_url: 'thumb' }}" 
    alt="{{ item.variant.title | escape }}" />
</a>

Note: if your Featured image is not a generic image and illustrates variant no 1, replace forloop.index in the above code snippet with forloop.index0.

EXAMPLE 2

Prerequisite: First product image must illustrate first variant of the product, second image must illustrate second variant, and so on. You have 1 product image per variant.

In your cart.liquid template, you will use this:

	{% assign index = 0 %}
{% for variant in item.product.variants %}
  {% if variant.title == item.variant.title %}
    {% assign index = forloop.index0 %}
  {% endif %}
{% endfor %}
<a href="{{ item.product.url }}" title="{{ item.title | escape }}">
  <img src="{{ item.product.images[index] | product_img_url: 'thumb' }}" 
alt="{{ item.variant.title | escape }}" />
</a>

See the above code in action in the St Jude's Fabrics store : http://www.stjudesfabrics.co.uk/collections/our-fabrics/products/da... Add a colourway — any colourway — to the cart. The image on the cart page will match the colourway you have picked.

Using the image file name to establish an association image ↔ variant

Prerequisite: Have each product image filename contain the SKU of the variant it illustrates.

In your cart.liquid template, you probably have something like this:

	 <a href="{{ item.product.url }}" title="{{ item.title | escape }}">
   <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}" 
    alt="{{ item.title | escape }}" />
 </a>

Replace with:

	{% assign index = 0 %}
{% for image in item.product.images %}
{% capture filename %}{{ image | downcase }}{% endcapture %}
{% capture sku %}{{ item.sku | downcase }}{% endcapture %}
{% if filename contains sku %}
{% assign index = forloop.index0 %}
{% endif %}
{% endfor %}
<a href="{{ item.product.url }}" title="{{ item.title | escape }}">
  <img src="{{ item.product.images[index] | product_img_url: 'thumb' }}" 
    alt="{{ item.variant.title | escape }}" />
</a>

Using the image ALT text to establish an association image ↔ option

Prerequisite: Have each product image ALT text equal to the color or style option it illustrates.

In your cart.liquid template, you probably have something like this:

	 <a href="{{ item.product.url }}" title="{{ item.title | escape }}">
   <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}" 
    alt="{{ item.title | escape }}" />
 </a>

Replace with:

	{% assign option_index = 0 %}
{% assign found_option = false %}
{% assign index = 0 %}
{% assign found_image = false %}
{% for option in item.product.options %}
  {% if found_option == false %}
    {% assign downcased_option = option | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
      {% assign option_index = forloop.index0 %}
      {% assign found_option = true %}
    {% endif %}
  {% endif %}
{% endfor %}
{% if found_option %}
{% for image in item.product.images %}
  {% unless found_image %}
    {% if image.alt == item.variant.options[option_index] %}
      {% assign index = forloop.index0 %}
      {% assign found_image = true %}
    {% endif %}
  {% endunless %}
{% endfor %}
{% endif %}
<a href="{{ item.product.url }}" title="{{ item.title | escape }}">
  <img src="{{ item.product.images[index] | product_img_url: 'thumb' }}" alt="{{ item.variant.title | escape }}" />
</a>