Change First Image Selected after Product Page Load

[Suassi]

Hello guys,

I want that, when my product page is loaded, the second image on the featured collection is automatically selected. I have been searching through the forums for 2 hours now in order to find an answer, but I have been unsuccesful.

When I enter a product page, automatically the first variant is selected and therefore the according picture is shown, leaving my stunning first featured collection photo on the second spot. I know that the variant needs to be selected for the price to be shown, and that I can turn off this feature following this thread.

However, I don´t want my variant not to be selected. I want my second photo to be shown in big when my product loads.

Thanks in advance for your help, I appreciate it.

My theme is “Ride 9.0”

Kind Regards,

Suassi

[made4Uo]

Hi @Suassi

Try the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and openproduct-media-gallery.liquid file
3. Find the code below, see image

4. Change this to code below. See image below for reference

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

[Suassi]

Hello @made4Uo

Thanks for the fast reply.

This is a solution I saw during my research on the forum. However, when I change the code as you suggest, the image that I want appears twice (See image attached to post).

Do you know how to fix this?

[made4Uo]

Sorry my bad. Please follow the instructions here

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and openproduct-media-gallery.liquid file
3. Find the code below, see image

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

4. Change this to {%- unless media.id == product.featured_media.id -%}. See image below

[Suassi]

Hi @made4Uo

Sadly, the issue still persists after editing the code line 92. The two images are still showing.

Take a look yourself:

https://suassi.com/products/gafas-de-luz-azul-clubmaster

Code: LTKTNKT

Thanks for your patience, I gladly appreciate your help

[made4Uo]

Hi @Suassi

It is on line 233. The previous code was for stacked images desktop layout

For thumbnails, you can follow the instructions below

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and open product-media-gallery.liquid file
3. Find the code below, see image

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

4. Change this to {%- unless media.id == product.featured_media.id -%}, see image

[Suassi]

Hi @made4Uo

that did the trick. The problem is now solved.

Your help was just awesome. I am very grateful, thank you very much.

Best Regards

Edit: For people having the same issue, you have to go through all the steps that @made4Uo has mentioned in the thread for the problem to be solved.

[Suassi]

Hi again @made4Uo

I have noticed now, that there is a new problem for products without variant images.

When a product doesn’t have a variant image, no image is shown in large and the first image is not shown in the gallery.

https://suassi.com/products/almohada-viscoelastica-ortopedica

Is there any way to fix this? Maybe adding a condition?

Thanks in advance

[Suassi]

Hi guys,

For the case that someone is having the same issue: I finally found the solution.

First:

Copy all the code of the original product-media-gallery.liquid file and save it wherever you want (notepad/Word document/text editor). I will later refer to this code as “Original Code”

Thereafter, you have to change all the code that @made4Uo has mentioned in all the steps of the thread.

After you go through all the steps, copy all the code in our newly edited product-media-gallery.liquid file and save it wherever you want (notepad/Word document/text editor). I will later refer to this code as “Edited Code”

Finally, to solve the last open problem described on the post of (‎05-13-2023 02:59AM), you have to create an “if” condition.

Delete everything in the product-media-gallery.liquid file from shopify (don’t worry, we have our two codes saved in another file now). Start with a blank page.

Then add the following code:

{% if product.variants.first.image %}

*PASTE HERE THE EDITED CODE"

{% else %}

*PASTE HERE THE ORIGINAL CODE"

{% endif %}

That’s it.

We created an “if” condition that checks if the product variant 1 has images (aka if the product.variants.first.image exists). If it does, it solves the problem with the edited code.

If it doesn’t exist, it will leave the original code so the edited code doesn’t brake the product without variant images.

I’m no programmer guy, but hope this helped.

As reference, my code final product-media-gallery.liquid file looks like this:

Show More

{% comment %}
Renders a product media gallery. Should be used with ‘media-gallery.js’
Also see ‘product-media-modal’

Accepts:

• product: {Object} Product liquid object
• variant_images: {Array} Product images associated with a variant
• is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances

Usage:
{% render ‘product-media-gallery’, is_duplicate: true %}
{% endcomment %}

{% comment %}
IMPORTANTE EDITADO POR MARCO:
He creado un condicionante que comprueba si existe una imagen de variante para la primera variante.
Si existe la variante, arregla el problema discutido en: https://community.shopify.com/c/technical-q-a/change-first-image-selected-after-product-page-load/m-p/2061982#M127124
Si no existe la variante, ejecuta el código original
{% endcomment %}

{% if product.variants.first.image %}
{%- liquid
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif

assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
assign media_count = media_count | minus: variant_images.size | plus: 1
endif

if media_count == 1 or single_media_visible
assign single_media_visible_mobile = true
endif

if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == ‘show’ or section.settings.mobile_thumbnails == ‘columns’ and media_count < 3
assign hide_mobile_slider = true
endif

if section.settings.media_size == ‘large’
assign media_width = 0.65
elsif section.settings.media_size == ‘medium’
assign media_width = 0.55
elsif section.settings.media_size == ‘small’
assign media_width = 0.45
endif

assign id_append = ‘’
if is_duplicate
assign id_append = ‘-duplicate’
endif
-%}

{% else %}

{%- liquid
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif

assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
assign media_count = media_count | minus: variant_images.size | plus: 1
endif

if media_count == 1 or single_media_visible
assign single_media_visible_mobile = true
endif

if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == ‘show’ or section.settings.mobile_thumbnails == ‘columns’ and media_count < 3
assign hide_mobile_slider = true
endif

if section.settings.media_size == ‘large’
assign media_width = 0.65
elsif section.settings.media_size == ‘medium’
assign media_width = 0.55
elsif section.settings.media_size == ‘small’
assign media_width = 0.45
endif

assign id_append = ‘’
if is_duplicate
assign id_append = ‘-duplicate’
endif
-%}

{% endif %}

[Noff_and_Nana]

I’m having the same issue as @Suassi but when I have tried to follow the steps you have explained above, I do not have the product-media-gallery.liquid file. I’m using the Sense theme - would this make a difference?

Many thanks!

[made4Uo]

You should have the file under the Snippet folder

[RyxMedia]

I tried this and on the outside it looks fine to work, BUT you get the following new issues:

1. When you open the product from for example a collection page without a variant (no “?variant=” in the URL), the variant image is missing in the thumbnail gallery.

2. If you select a variant, the variant image is getting displayed BUT if you open a product with “?variant=” in the URL, it is opened like no variant was selected loosing your color selection etc.

[nhcon]

Hello RyxMedia. I’ve seen you looking in a few threads about this issue. I’m still struggling with it as well. Have you found anything?

[PaulRochester]

I tried this fix, and the first product image now displays properly. However, now none of my variant images will load when clicked. DO you have any suggestions?

[capy-era_CY]

Hi there, I have similar issue for the first product displaying as well. I’m trying to edit my code under Snippet > (but i couldn’t find this : product-media-gallery.liquid file)

My theme: Shape by Switch
Product site: https://www.capyera.com/products/capybara-plushie

thank you in advanced

[capy-era_CY]

I realised it’s because i’ve chosen the specific photo for product variant.

[M4NNGO]

I tried everything that was written before + I made it so that the selector does not automatically select the color and style and it looks fine for me. The only problem is when you select only the size, the price disappears and the blocks jump to the top and when you select the style, they return and the price is shown. I’m trying to fix this

[aawiseman]

I think I found a (dumb) solution – I deleted all the images then reuploaded them, and now it shows them in the correct order, with the first photo being the main, biggest one. Little time consuming but it worked. It seems to keep working as you add other images or move them around.