Show First Product Image On Product Page (Not Variant Image First)

Store Design
, , , ,

Topic summary

A Shopify store owner is experiencing an issue where product pages display variant images first instead of the main product image. They want the first image in their product gallery (a grey sofa) to appear first, regardless of variant selection.

Attempted Solutions:

  • Modified code in main-product.liquid by replacing product.selected_or_first_available_variant.featured_media with custom code
  • Tried multiple code variations without success

Technical Guidance Provided:

  • Use product.images.first directly as the condition or without conditions
  • The attempted code fix was problematic because it checked if a product exists in settings, which is unnecessary on product templates
  • Likely files to edit: main-product.liquid or Product-Media-Gallery.liquid
  • Should inspect the theme’s product JSON template to confirm which section is statically included

Current Status:
The issue remains unresolved. The store uses the “IRIS” theme by Mana Themes, and the owner is uncertain about what specific code to modify in the suggested files.

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

Hi Experts,

We have an issue in Shopify about products with variants. If any product includes variants, Shopify automatically shows its product variant picture first in the product page. For example this product: https://hugobrunto.se/products/modulsoffa-chloe

The first image in the link is now the variant picture. But it should be the grey sofa because it is first in row in our pictures.

We have located the code:

{%- if product.selected_or_first_available_variant.featured_media != null -%}

and replaced it with:

{%- if section.settings.product != blank -%}
{%- assign featured_media = product.images.first -%}
{%- endif -%}

But it can’t be fixed. Have also tried several different codes but it doesn’t work at all.

It there any other way to show the first image first on the product page?

Best regards,

Hugo Brunto

2

@Hugobrunto just use product.images.first as the condition, or just use it directly without conditions.

We have located the code:

WHERE, which file, where have you located the code that type of behavior is often used through a theme.

So even if you changed it it doesn’t matter if it’s not changed in the right place.

The code you’ve provided makes no sense on a product template the product always exists.

{%- if section.settings.product != blank -%}

{%- assign featured_media = product.images.first -%}
{%- endif -%}

Unless you mean your assigning a product in a setting for section somewhere, and some unprovided code uses the featured_media variable further in the section.

in which case you need to drastically improve the quality of the problem statement.

3

Hi Paul ,

Thanks for your answer. Then I understand that i’m not in the right place. I think I found that code above in sections → main-product.liquid. I have too many possible files in “Edit Code” and I’m tired of guessing :disappointed_face:

Do you know in which of these files below to edit any code? If yes, what to change in that file? I’d love your help and it would be an honor.

Sections → Main-Product.Liquid

Snippets → Card-Product.Liquid

Snippets → Product-Media-Gallery.liquid

Snippets → Product-Variant-Options.liquid

Thanks for helping just a little :heart:

4

Depending on theme, such as dawn, main-product.liquid , or Product-Media-Gallery.liquid would be the right section.

You can confirm this by inspecting the themes product JSON template and seeing if main-product.liquid is statically included.

More than likely the code is also a problem.

Good Luck.

1 Like
5

Hi again,

thanks for helping. I use a code named ”IRIS” by Mana Themes. I will try in that files as you suggested. I’m not sure what to look for or what to replace though :confused:

/Hugo