Is it possible to choose a main product image that isn't associated with the first variant?

[MattBris]

Hi all.

Let's say I have two variants: vase A and vase B. I have three product images available to use: 1) vase A, 2) vase B, c) vases A and B together.

I want to make image (c) the main image for the product, with the other two images associated with their variants. However, Shopify seems to always make the image of the first variant the main product image regardless. This is a bit of a pain if you have multiple variants you'd like to showcase when people land on the page.

Is there a way of overriding this so I can choose the main image that is different to that of the one chosen for the first variant option?

[pawankumar]

Hi @MattBris 
By default shopify show first variant as selected and that's why first image is shown as main image, to make it work, you have to customize it using liquid if you still need to show product featured image instead of first variant

Thanks!

[TheUntechnickle]

Hi @MattBris,

You can absolutely achieve this by using Metafields. Here’s how to set it up without any apps:

---

1. Add a Metafield for the Main Image

1. Go to Settings → Custom Data → Products → Add Definition.
2. Create a metafield with:
   • Name: Main Image
   • Type: File (Image)
3. In your product editor, assign the desired "main" image (in your case, image C) to this metafield.

---

2. Edit Your Theme Code

1. Open your product template file (e.g., product.liquid or main-product.liquid).
2. Find the section displaying the main image.
3. Replace the default main image code with the following:

   {%- assign custom_main_image = product.metafields.custom.main_image -%}
   <img 
     src="{{ custom_main_image | file_img_url: '800x' }}" 
     alt="{{ product.title }}" 
     id="ProductPhoto"
   >

This will make the metafield image (C) the main image displayed on the product page. Variant-specific images will remain linked to their respective options, so selecting a variant will still update details like price, SKU, etc.

If you’d like, we’d be happy to handle this setup for you! Just let us know, and we’ll take care of it in no time. 😊

Looking forward to hearing from you!

Best regards,
Shubham | hello@untechnickle.com

[PaulNewton]

Hi @MattBris 👋 double check the themes settings for an option that always selects the first available variant and disable it, if it exists there may also be a matching setting for collection product grids that should be disabled as well.

Otherwise it can be an advanced theme customization to do it properly replacing the default logic throughout a theme.

A common method is to use a convention for the images alt text so you don't have to create extra tags, or metafields etc.

If you need this customization then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.