Associate images to a variant

You can associate specific images with a variant so that the correct image is displayed when the customer selects, for example, a specific color.

How to associate images

1. Go to Products and click Edit on the product
2. Upload all images for the product (all colors/variants)
3. Expand the Product Images section
4. For each image, select the variant it belongs to from the " Associate with variant" dropdown
5. Repeat this for each image that needs to be associated with a variant
6. Click Save

Display in the store

When a customer selects a variant (e.g., the color “Red”), the image gallery automatically switches to display the images associated with the selected variant.

In your theme

Variant images are handled automatically in most themes. If you have a custom theme, you can use:

The variant link is stored on the product, not on the variant itself. Therefore, you go through the product’s images and check each one to see if it’s associated with a specific variant value:

<{foreach $product->getImages() as $image}>
  <{$variant_value_id = $image->getVariantAttributeValueId()}>
  <{if !$variant_value_id || $variant_value_id == $selected_variant_value_id}>
    <img src="<{$image|image:400:400:90}>" alt="<{$product->getTitle()}>">
  <{/if}>
<{/foreach}>

An image with no association is always displayed (as the default image), while images associated with a specific variant are only displayed when that variant is selected.

Tips

• Upload all images first, then associate them with variants
• Use a consistent background on all product images for a professional look
• Images not associated with any variant are displayed as default images

See also: Image quality and image format.

Need help? Contact us at support@shoporama.dk.