show 1st image as feature image on the product page instead of the variant image.

Store Design
, , , ,

AI-generated summary

Goal: Show the featured (primary) product image first, instead of a variant image, on product pages and collection cards in Shopify (Dawn theme 15.0).

Context:

  • Featured image = main image set in product admin. Variant image = image tied to a specific variant.
  • Prior forum fix didn’t work on Dawn 15.0, especially for products without variants.
  • On collection pages, some products showed the featured image, but when the first variant was sold out, the card displayed a variant image instead of the featured image.

Latest update:

  • A contributor shared a JavaScript-based fix for the product page, with steps to add the code to theme.liquid before the tag (exact code not visible in this excerpt).
  • The original poster confirmed this solution worked for the product page.

Outcomes:

  • Product page issue resolved by the shared script.
  • No confirmed solution for collection page behavior; status remains unclear.

Notes:

  • Theme: Dawn 15.0. Code snippet is central but not included here. Discussion appears partially resolved (product page only).
1

Hi all,

I want to display the feature image as the 1st image on the product page instead of the variant image, but unable to achieve the same as it is showing the variant image as the 1st image not the feature image(or first image which we have added in the product admin section).

I have tried previous suggestion that has given by @made4Uo on the forum and but it is not working as expected on the dawn theme 15.0, as it is not working for the product that has no variants.

Also I need to achieve the same for the collection page, as for some of the product on the collection page its showing the feature image, but if the first variant is sold out then it is not showing the variant image rather than the feature image.

Can you all please help how can I solve this issue?

@BSSCommerce-HDL @Made4uo-Ribe @Moeed @Dan-From-Ryviu @websensepro @sahilsharma9515

2

Hi @sahilrev Hopefully you have found the solution for this issue, if not then here is the code you can use to solve the issue of product page.

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi @sahilsharma9515 thanks for the code and for the help that you have offered. It worked for me.