Media sort order on Product details page - Dawn theme

Shopify Discussion
,

Topic summary

A Shopify store owner using the Dawn theme wants to display different images in different contexts: a close-up featured image for collection pages, but a different image as the first image on product detail pages.

The Challenge:

  • The featured image currently appears first on both collection and product detail pages
  • Moving images in the admin would fix the product page but break the collection page display

The Solution Provided:
A community member (ProtoMan44) offered a code modification for the card-product.liquid file that allows the second image to display on collection pages while keeping the featured image first on product pages. The solution involves replacing existing code with a conditional statement that checks for a second media item.

Status:
The original poster planned to test the proposed code solution. The discussion appears resolved pending confirmation that the code works as intended.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi

I am using the dawn theme and have started adding products but I want to tweak the sort order of the media on the product details page and havent been able to work out how to do it.

Bascially I have a closeup featured image which shows as the collection image but on the product details page it shows as the second thumbnail.

Can anyone advise how I change it so the featured image also shows as the first image on the product details page.
cheers

Brinley

BrinleyW_0-1705570589024.png
BrinleyW_0-1705570589024.png232×400 41.9 KB

image.png
image.png624×718 160 KB

2

Hi Brinley,

Have you tried dragging the images around from the media admin section?

:slightly_smiling_face:

Hope this helped.

3

Thanks for the input - this is what they look like at the moment which works fine for collections but not for the product details page. If I moved them around then it would effect the collection page which is fine

BrinleyW_0-1705573954790.png
BrinleyW_0-1705573954790.png568×393 92.4 KB

4

@BrinleyW so what is wrong with it

5

I want the featured image to show on the collection page & I want it to show as the first image on the product details page

6

@BrinleyW in simple do you need to show the second image on the collection and the first image on the product page?

7

:grinning_face: yes

8

@BrinleyW i have work on it ,
check it out :

ProtoMan44_0-1705580428254.png
ProtoMan44_0-1705580428254.png1038×948 146 KB

ProtoMan44_1-1705580432841.png
ProtoMan44_1-1705580432841.png1598×745 129 KB

please replace the code with if condition {%- if card_product.media-%} code in card-product.liquid under the card inner:

{%- if card_product.media[1] != null -%}
          
            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
               
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
               
              {%- endif -%}
            

          

        {% else %}
          
            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
9

Thx - will test it later and let you know how i get on.

10

@BrinleyW sure :ok_hand:

If it solves your problem please like and mark it as solved, thanks