Dawn 2.0: Showing Feature Image Before Variant Image

When customers view my product page, they will see the variant image first before the feature image. Is there anyway to change the order so the customers will see the feature image first before the variant image.

When I was using the Minimal Theme, I was able to change this and there’s a Shopify tutorial about it. But the same code (and all the codes from other themes) wouldn’t work with Dawn Theme 2.0. Can someone help me with this please? I urgently need to fix it as my shop is about to go live. Thanks in advance.

Hello @JB22 ,

You can try to follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Open the main-product.liquid file find line 61 and replace the following code**:**
![product.png|1672x844](upload://3OoSKprkF7Cmxx3xH6iE2WUwS9R.png)

to this code:

product.featured_media[0]

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

Hello @Halothemes ,

Thank you for looking into it. Unfortunately the code didn’t work. It shows the thumbnail of the feature image but not showing the feature image until I click on the thumbnail. (Image below with the long line showing where the feature image should’ve been).

Also, it removes the variant image from the thumbnail carousel. (Image above only showing the thumbnail of the feature image). Do you think you have the solution to that? Thanks in advance.

Hello @JB22 ,

Could you please double check the code to see if it matches my instructions?
Could you please take a screenshot of your changes so I can check?

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

Hello @Halothemes

Below is the screenshot of the code as requested. Let me know if I didn’t input it correctly.

Hello @JB22 ,

Please share your store URL and password of front view.
So that I will check and let you know the exact solution here.

Best regards.

Hello @Halothemes

Since the actual site is still under construction and not ready for public viewing, I’ve created a test site using exactly the same settings as the original one but with limited content and information.

https://tilestore2.myshopify.com/collections/tile-collection

PW: woltoh

Thanks!

Hello @JB22 ,

It looks like you use image of Thumbnails but not image of Gallery

Could you add code at line 139 and replace the following code:

to this code:

product.featured_media[0]

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

Hello @Halothemes

I’ve changed the code at line 139 to your suggestion but unfortunately it’s still not working.

Hello @JB22 ,

You can try to follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Open the main-product.liquid file find line 61, 68, 139 and replace the following code**:**

to this code:

product.featured_media

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

Hello @Halothemes ,

Unfortunately it doesn’t work. It creates an additional thumbnail and doesn’t open to the right image.

Hello @JB22 ,

Please contact Shopify to check deeply because we have no permission to check your store admin.

Best regards.

Hello @Halothemes

No problem. Thank you very much for looking into it.

Thanks for sharing you have done good work.