Media sort order on Product details page - Dawn theme

Shopify Discussion
,
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