Craft theme - Display product's variant images at the end of the image list

Store Design

Topic summary

• Goal: In the Shopify Craft theme, display the selected variant’s image at the end of the product image list instead of first.

• Current behavior: Each size variant has a unique image. When a variant is selected and “Hide other variants’ media after selecting a variant” is enabled, the selected variant’s image appears first and other variants’ media are hidden.

• Relevant code: In main-product.liquid, an if block checks product.selected_or_first_available_variant.featured_media, sets media_position = 1, and renders that featured thumbnail. A subsequent for loop iterates product.media, excludes the featured media, increments media_position, handles lazy_load, and renders the remaining thumbnails.

• Attempted change: Inverting the two blocks made the variant image disappear, likely due to the media_position assignment and ordering logic.

• Key question: How to adjust media_position and render order so featured_media is appended after the other product.media items while preserving variant-specific visibility.

• Artifacts: The provided Liquid code snippet is central; no images or attachments.

• Status: No solution provided; request for guidance remains open.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello,

Using the Craft theme, I wonder if anyone could help me modify the code of main-product.liquid to suit what I describe in the subject.

Current situation

I have products with size variants. Each variant has a unique image, which is displayed in the image list only when the client select the appropriate size.

This is a default behavior enabled thanks to the checkbox “Hide other variants’ media after selecting a variant” in “Product information” block.

That image is displayed first in the image list.

Issue

I would like this image displayed at the end of the product’s image list :]

Code

I think that the code responsible of this situation is this one.

The first {if - endif} apparently assigns a media_position to the variant’s image, then a {for - endfor} loop displays the other images.

{%- if product.selected_or_first_available_variant.featured_media != null -%}
              {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
              - {%- 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, lazy_load: false %}
              

            {%- endif -%}
            {%- for media in product.media -%}
              {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
                - {%- liquid
                      assign media_position = media_position | default: 0 | plus: 1
                      assign lazy_load = false
                      if media_position > 1
                        assign lazy_load = true
                      endif
                      render 'product-thumbnail', media: 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, lazy_load: lazy_load
                    -%}
                

              {%- endunless -%}
            {%- endfor -%}

Solution/question

I tried to invert those 2 paragraphs, but because of the media_position, it just makes the variant image disappear.

Thank you so much in advance for any help.

PatrikRoy