How do I set the first image for the multimedia support for a product page?

Store Design

Topic summary

A user is struggling to control which image displays first on their product page. Despite reordering images in the product admin’s multimedia section, the first variant’s image always appears instead.

Root Cause:
Shopify themes (particularly Dawn and Horizon families) are designed to automatically display the first variant’s assigned image rather than respecting the media gallery order.

Proposed Solutions:

  1. Assign desired image to first variant - Set the preferred main image as the first variant’s image in the Variants section

  2. Remove variant image assignments - Unassign images from variants so the first media gallery image displays by default

  3. Use additional image sections - Add a separate image section above the product info that pulls from the main product image

  4. Custom Liquid code - Override default behavior with code snippet that forces the first media gallery image to display:

{% assign main_image = product.media[0] %}
<img src="{{ main_image.preview_image | img_url: '1024x1024' }}" alt="{{ product.title }}">

Trade-offs:
Custom code modifications may break theme update compatibility. Some workarounds sacrifice features or require theme-specific adjustments. One responder offered to review the specific theme files for a tailored solution.

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

HI,

How do I set the first image for the multimedia support for a product page?

no matter which image I set first in the product admin interface at the multimedia support level, it’s always the image of the first variant that appears. The only way to make this work is to delete all variant images. Surely there must be another way? Thanks in advance for your help.
Toki

2 Likes
2

This is the choice theme designers has made.
With Dawn family it only happened on the product page, but with Horizon family it also happens on collection pages…

Try other themes, I believe some themes not made by Shopify has it.

Unfortunately, changing this behaviour would require significant changes to the theme code to do properly and break your ability to update theme to newer versions.

One option to consider is to add one of the “image…” sections before the “Product info” section on product page and make it use product image as dynamic source?
On arrival, visitors will see the main product image and then will be able to scroll down to the original product info section with first variant image selected…

Not the best, but…

And with Horizon family you can configure product card to use generic image instead of “product media” block. Will loose some features though. :frowning:

3

Hey @Toky1 , Welcome To Shopify Community!

What you’re experiencing is actually a known behavior in Shopify: on product pages, Shopify will automatically display the image of the first available variant rather than the first image in your product’s media gallery. That’s why changing the order in the multimedia section alone doesn’t work if variants have their own images assigned.

Follow these Steps:

  1. Assign the “main” image to the first variant:
  2. Go to your product in Shopify admin.
  3. Scroll to the Variants section and click the first variant.
  4. Make sure its image is set to the one you want displayed as the main image.
  5. Shopify will now show this image on the product page.
  • Use a “default” or no-variant image for main display:
  1. Remove the first variant’s assigned image (or assign it a neutral image).
  2. Set the desired main image in the product media gallery as the first image.
  3. Shopify will now display this first image until a variant is selected.

Custom code (for more control):

  • If you want the first image to always display regardless of variant, a small Liquid customization in your theme can override Shopify’s default behavior:
{% assign main_image = product.media[0] %}
<img src="{{ main_image.preview_image | img_url: '1024x1024' }}" alt="{{ product.title }}">

This ensures the first multimedia gallery image is always displayed on page load.

If you’re not working on this yourself, please feel free to reach out to me. Thanks!

Best Regards ,

Rajat | Shopify Expert

4

Hi @Toky1,

Are you using Dawn theme?

Please send me the code of snippets > product-media-gallery.liquid file, I will check and guide you to change it