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

Shopify Discussion

Topic summary

A merchant wants to display a combined product image (showing vases A and B together) as the main image, while keeping individual variant images linked to their respective options. However, Shopify defaults to showing the first variant’s image as the main product image.

Proposed Solutions:

  • Metafield approach: Create a custom metafield for the main image in Settings → Custom Data → Products, assign the desired image (C) to this field, then modify the theme’s product template code to display the metafield image instead of the default variant image.

  • Theme settings check: Review theme settings for options that auto-select the first variant and disable them if present, both on product pages and collection grids.

  • Alternative method: Use image alt text conventions to avoid creating extra metafields.

All solutions require some level of theme customization using Liquid code. The issue remains unresolved pending the merchant’s implementation choice.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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?

1 Like
2

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!

3

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 Image1. Go to Settings → Custom Data → Products → Add Definition.

  1. Create a metafield with:
    • Name: Main Image
    • Type: File (Image)
  2. In your product editor, assign the desired “main” image (in your case, image C) to this metafield.

2. Edit Your Theme Code1. Open your product template file (e.g., product.liquid or main-product.liquid).

  1. Find the section displaying the main image.

  2. 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. :blush:

Looking forward to hearing from you!

Best regards,
Shubham | hello@untechnickle.com

1 Like
4

Hi @MattBris :waving_hand: 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.