Show featured image instead of variant on product page Dawn 6.0

Store Design
1

Hello, like a lot of people, I am not happy with the default theme behaviour of showing a variant image instead of the product featured image before a variant has been selected. Is there a tutorial for Dawn 6.0 please to change this? Thank you.

2

Ok I eventually tracked down this post with a reply from Shopify – https://community.shopify.com/topic/1282037. So Shopify’s official position is that they know that loads of people want this functionality but they have not included it in any of their new themes and won’t provide support either. So if this functionality is absolutely essential (which it is), we either have to use vintage themes, pay a developer for customisation of new Shopify themes, or pay $300 for the Empire theme. That’s not good enough, this is basic functionality that loads of people want.

3

Always backup a theme before changing code.

If you need the below fully customized contact me via email in my sig.

@Zoe_S_Designer I haven’t verified this but you may be able to modify this by changing 2 lines

https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L86

From:

{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

To:

{%- if product.featured_media  != null -%}
{%- assign featured_media = product.featured_media -%}

This needs to check for interoperating with any javascript, and theme settings; basically thought through to understand WHY shopify chose not do this which really may just be a result of lots of stores not setting a featured image at the product level.

And that if statement should be given and else, or elsif, so it defaults to trying to use the selected or first available variants featured media when a product has no image|media featured.

4

Just follow below steps:

  1. Go to theme → Edit code → Snippets

  2. Open product-media-gallery.liquid

  3. Find below line of code:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

Replace it with:

{%- assign featured_media = product.featured_media -%}

And also find below line:

{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

Replace it with:

{%- unless media.id == product.featured_media.id -%}

Hope this works for you.

If you have not dawn theme then you can try the same if doesn’t work then let me know.

Thanks.

5

This duplicates the first image. How do you stop that from happening?

6

Yes, the code duplicates the first MEDIA image in 15.2.0. Use this instead.

This video code works better. Confirm…Thank you.

https://drive.google.com/file/d/1Dsj00ddE_ivZH4EM_yYRn66fqrQwkBq0/view?usp=share_link