Show Featured Product Image Instead of Selected Variant Image, Dawn Theme, v8.0.0

[rcantu]

When I land in a product page, the first image I see is the image of the first variant product, but I would like the featured image to be displayed by default when I land in the product page. I have found a few posts on this same topic with a solution (link to those below), however those fixes are for a previous version of the Dawn Theme which aren’t working for me.

I’m using the Dawn Theme, Version 8.0.0

I would appreciate if someone could help with this.

Re: Featured product image. Dawn theme - Shopify Community

DAWN theme: How to show featured image first on product pages instead of first selected va… - Shop…

[made4Uo]

Hi @rcantu ,

You can do the following instead.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Snippet folder, and open the product-media-gallery.liquid file
3. Find the code product.selected_or_first_available_variant.featured_media at line 67 and 68, replace it with the code below.

product.featured_media

4. Next, find the code product.selected_or_first_available_variant.featured_media.id at line 92, and replace it with the code below

product.featured_media.id

See the code locations here:

See the code after the change.

[rcantu]

Thank you, @Adedej1 . This is the link to my store: Click Here

[rcantu]

Thank you, @made4Uo I appreciate your assistance on this. This solution works perfectly on the web version. On Mobile however, the image for variant 1 is getting stuck on the image of the variant I had selected prior. For example, I click on Variant 4 and I see its image with no problem, but then I click on Variant 1 and I still see the image for Variant 4. Any idea how to fix that? I’m testing this on a copy of my theme, here is the link should you need it for reference: Click Here

[gr_trading]

Hi @rcantu

Request you to keep a backup of product-media-gallery.liquid and replace it with below code.

{% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances

  Usage:
  {% render 'product-media-gallery', is_duplicate: true %}
{% endcomment %}

{%- liquid
  if section.settings.hide_variants and variant_images.size == product.media.size
    assign single_media_visible = true
  endif

  assign media_count = product.media.size
  if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
    assign media_count = media_count | minus: variant_images.size | plus: 1
  endif

  if media_count == 1 or single_media_visible
    assign single_media_visible_mobile = true
  endif

  if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
    assign hide_mobile_slider = true
  endif

  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif

  assign id_append = ''
  if is_duplicate
    assign id_append = '-duplicate'
  endif
-%}

Note: Do this only if you have not done any other customization in it.

Hope it helps…

[rcantu]

Thank you, @gr_trading , this is awesome…it worked perfectly!

[gr_trading]

Thanks

[rosiegore]

Hey, this has worked for me, thank you for this, however now I have the first variant image showing twice after the featured image, do you know why this might be? All the other variant images only show once.

[Menibig]

Hey,

Have you solved the double image issue?

[OmniaClothes]

Hello, thanks for the code, helped a lot as well.

I’m having only one problem with this. On first load or refresh, the featured image is shown (which is ok), however selected image is still for the chosen variant. When I want to show the image for the variant, I need to switch between featured image and then go back to variant image, but the variant image doesn’t show anything, the image disappears. If I change the variants, everything works just fine.

Do you think there could be any fix for this?
I would appreaciate any help.

[gr_trading]

can u share you store URL

[OmniaClothes]

absolutely

https://omniaclothes.com/products/unisex-t-shirt-5

[Rabi3]

Works perfectly well in the products pages.

However, I have added 1 featured product on the homepage and the first variant image is still showing instead of the featured image. Please advise.

[gr_trading]

Since the location is different you have to code it separately in card-product.liquid

[Rabi3]

Can you please guide me on how to do it

[Rabi3]

Hello Gr_trading! Any instructions?

[Rabi3]

Gr_trading any news plz?

[lukavu]

how do I do it with Sense theme?

[gr_trading]

For this we have to check request you to keep backup of current theme and try with code provided above.

[shirel]

hey, i have the same issue as @rosiegore . double image after the featured image. do you know how to fix it?