HTML Snippets for Product Variants

Display a direct “Add to Cart” link for a specific Product:

    {% if product.variants.size > 0 %}
      < !-- Adds first (0) Product's Variant to the Cart -- >
      <a href="{{product.variants[0].add_to_cart_url}}">Add to Cart</a>
    {% else %}
      <a href="{{product.add_to_cart_url}}">Add to Cart</a>
    {% endif %}

Display all Product’s Variants Option Values:

    <ul>
    {% for variant in product.variants %}
      <li>
      {% for value in variant.values %}
        {{value.name}}
      {% endfor %}
      </li>
      {% endfor %}
    </ul>

How can I associate an image to a specific Product Variant?

There is no relationship between your store Product’s images and your Product Variant’s. 

But if you need to connect a specific image with an specific product variant there is two work arounds:

• Mapping the image’s filename to the product’s SKU
• Mapping the image’s order to the product’s variants

Mapping the image’s filename

• Rename your images’ file according to its product variant. For example “dress-red-small.jpg” or “dress-red-big.jpg”.
• Remember you cannot rename your image files after you upload them.
• Create a logic to name your images. For this example we used the structure: “productname-option1value-option2value” for the product “Dress” with options “Color” and “Size”.
• Add the exact same image file name e.g. “dress-red-small.jpg” to the Product Variant’s SKUs. 
• Edit your Product Block and your Theme Editor.

• Iterate the and manipulate one product image’s URL by replacing the filename portion of the URL by the Variant’s SKU.

    <!-- capture the filename of the a random product's images URL in the variable "image_filename" -->
      <br>
    {% capture image_filename %}{{product.images.first | split:"/" | last }}{%endcapture%}
      <br>
    {% for variant in product.variants %}
      <br>
    <!-- replace the filename portion of the URL by the variant's SKU and capture this new URL in the variable "image_url" -->
      <br>
    {% capture image_url %}{{product.images.first | split:image_filename | first }}{{variant.sku}}{%endcapture%}<br><img src="{{image_url | resize:'100x100'}}" alt="{{variant.sku}}" />
      <br>
    {% endfor %}
  

Mapping the image’s order

After uploading the product images, you can define their order by drag&dropping them.

The first image is the “main” image and the others are considered “secondary”. The “main” image is displayed at the Home or Category page whenever the its product is referred. 

• Map the Product’s images to the Product Variants
  • Set the Product’s 1st image (“main” image) as the generic image of your Product.
  • Set the Product’s 2nd image as the image of the Product Variant number 1
  • Set the Product’s 3nd image as the image of the Product Variant number 2
  • Set the Product’s 4nd image as the image of the Product Variant number 3
  • etc…

• Iterate the and use the index of the variant loop (1, 2, 3) to show the associated product image (2nd, 3rd and 4th)

    {% for variant in product.variants %}
      <br>
      <img src="{{product.images[forloop.index] | resize:'100x100'}}" alt="{{variant.sku}}" />
      <br>
    {% endfor %}
  

On this example we associated only the “secondary” images to the Product Variants. To make use of the “main” image too, simply replace forloop.index for forloop.index0 (counts from 0).