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 %}
