Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

vatrisha
Tourist
12 1 0

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

Replies 17 (17)

Dallas
Shopify Staff (Retired)
916 61 212

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.

 

2020-02-lajn7-99dej.gif

 

Once you drag it the image order will automatically save.

 

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

To learn more visit the Shopify Help Center or the Community Blog.

vatrisha
Tourist
12 1 0

Hi Dallas,

 

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

 

Screen Shot 2020-02-25 at 11.40.03 AM.png

 

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

 

The Sarong Dress.png

It shows this

 

Sarong Dress – The Sarong Dress.png

mitchell5848
Excursionist
36 2 3

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.

 

Screen Shot 2020-02-25 at 11.40.03 AM.png

 

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

 

The Sarong Dress.png

It shows this

 

Sarong Dress – The Sarong Dress.png


 

micaelawildcat
Visitor
1 0 5

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
Tourist
5 0 5

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
Not applicable
2 0 1

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

 

MNB
Not applicable
2 0 1

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

CatKingdom
Excursionist
17 1 2

Bump. Would like answer for this also. 

revivalhomeware
Visitor
1 0 5

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
Visitor
1 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

Did you ever find a solution

TheMoaMaker
Visitor
1 0 0

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
Visitor
2 0 0

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
Visitor
1 0 0

It also works for the Sense theme. Thank you!

noob28
Visitor
1 0 0

omg, it worked on my end! thank you so much.

imuhammadaasim
Visitor
1 0 0

I'm using the "Sense" theme and this worked for me as well, but: 

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

needs to be changed to:

{%- 
assign featured_media = product.featured_media -%}

everywhere in the file.