How can I change the main image in my products page?

[vatrisha]

I'm using the Minimal theme and I think it's set up to show the product image of the first inventory item which is arranged alphabetically.

Is there a way to choose which image shows up first? Can it be another image that's not a product swatch?

My store url is www.thesarongdress.com

[Dallas]

Hey, there.

Dallas here from Shopify's Social Care Team.

Just to clarify, you're looking for a way to change the image order on your product page?

That is definitely possible, you'd just have to go to your Store Admin under Products. On the product page, you'll see a list of all of the images that you have in association with your product. The image that is the biggest and furthest to the left will be the one that is the featured image. That would be the one that would show up first on the page, that would also be the one that would show up on your home page for the item when it's featured.

If you're looking to change that image you'd just have to drag the image in the Admin.

Once you drag it the image order will automatically save.

Can you try that and let me know if you run into any issues?

[vatrisha]

Hi Dallas,

That's how I set it up thinking that's how it works.

But when I click on any of the links to that product page

It shows this

[mitchell5848]

just upload the new photo on the sidebar image with text or something

---

@vatrisha wrote:

Hi Dallas,

That's how I set it up thinking that's how it works.

But when I click on any of the links to that product page

It shows this

---

[micaelawildcat]

It seems some themes change the default image to the first variant image for some reason. I'm having the same problem with my shop. Its not using the default image 😞

[lmrobinson]

I am having the same issue, my first variant image becomes the defacto main or primary image when my product page is viewed. Does anyone have a solution so that I am able to display my primary image and then the variant image when the variant option is chosen?

[MNB]

Dallas I am also having this issue within the Impulse theme... is there a coding change I can tackle like the below?

[MNB]

I just realized that this thread was from 2020... anyone who can help in 2024? 🙂

[CatKingdom]

Bump. Would like answer for this also. 

[revivalhomeware]

I found a solution for this for the particular theme I am using (Origin), but it may also work on others.

You need to edit the code of the theme. Look for a folder called 'Snippets', within that folder is a file called 'product-media-gallery.liquid'

There are two bits you will need to edit/delete

1) on line 68 delete: .selected_or_first_available_variant

from: {%-
assign featured_media = product.selected_or_first_available_variant.featured_media -%}

2) on line 79 delete: .selected_or_first_available_variant

from: {%- unless media == product.selected_or_first_available_variant. featured_media.id -%}

The first one makes sure that the featured/hero image is always displayed first, the second one makes sure you can still select the first production variant and see the related image.

[et34209]

This was SO helpful. Thank you!

I use the Dawn theme, and the code lines are 68 for the first bit you mentioned, and 91 for the second bit. But it worked perfectly - thanks again!

[Colm-1]

I have just tried this on Dawn 10.0 and it keeps on throwing up errors on other code lines as a result 

when i changed line 68 it referenced line 135 as a problem

and when i changed line 68 and 91 it referenced line 222 as a problem

as I know nothing about code i back tracked and am still looking for a soloution.

[halpmeplezz]

Did you ever find a solution

[TheMoaMaker]

Yes. Took a bit of experimentation but here goes:

Delete line 68-89 which is as follows:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
<li
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
data-media-id="{{ section.id }}-{{ featured_media.id }}"
>
{%- assign media_position = 1 -%}
{% render 'product-thumbnail',
media: featured_media,
media_count: media_count,
position: media_position,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: false
%}
</li>

Next locate and delete this text a few lines down (now line 70 for me): {%- unless media == product.selected_or_first_available_variant. featured_media.id -%}

Next find and delete the closed loop which is now line 98 which reads: {%- endunless -%}

[Overspraystaff]

I use Dawn but the code described isn't in mine, I don't see anything that reads "product.selected_or_first_available_variant." or of the sort this is what mine reads in lines 68-80:

{%- case media.media_type -%}
{%- when 'external_video' -%}
{%- assign video_class = 'js-' | append: media.host -%}
{%- if media.host == 'youtube' -%}
{{ media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" }}
{%- else -%}
{{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" }}
{%- endif -%}
{%- when 'video' -%}
{{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
{%- when 'model' -%}
{{ media | media_tag: image_size: "2048x", toggleable: true }}
{%- endcase -%}

[GoldyGoose]

It also works for the Sense theme. Thank you!