Website Building » Shopify » How Do I Change My Variant Image in Shopify?

How Do I Change My Variant Image in Shopify?

Last updated on January 12, 2023 @ 11:01 am

If you have a product with multiple variants in your Shopify store, you might want to change the variant image that is displayed on the product page. For example, if you have a shirt with different color options, you might want to show a different image for each color.

To change the variant image for a product in your Shopify store:

1. From your Shopify admin, go to Products > All products.
2. Find the product that you want to edit and click Edit.
3. In the Product details section, click on the variant that you want to edit
4. In the Variant image section, click Choose file to upload a new image, or click Delete to remove the current image.
5. When you’re done, click Save.

PRO TIP: If you are considering changing your variant image in Shopify, be aware that this may adversely affect your product listing in Google Shopping. Google Shopping requires that all images for a given product have the same URL, so if you change your variant image URL in Shopify, your product listing in Google Shopping will be removed.

You can also change the variant image for a product from the theme editor:

1. From your Shopify admin, go to Online Store > Themes. Find the theme that you want to edit and click Actions > Edit code. In the Assets directory, click on the product.liquid file to open it in the code editor.

2. In the code editor, find the line of code that starts with {% for variant in product..%}. This code loop outputs each variant of the product on the page. Each time it loops, it outputs information about that variant, including its image is the line of code that tells Shopify which variant image to output on the page. The ‘master’ parameter tells Shopify which size of image to output (you can leave this as is unless you have changed it previously).
3. To change which variant is outputted here, find {% if variant == product.} and change ‘product’ to ‘variant’. This will ensure that when this line of code loops through each variant on the page, it outputs information about that specific variant instead of just one static image across all variants. save your changes.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.