DAWN theme: How to show featured image first on product pages instead of first selected variant

[TristaD]

Hi all,

I’ve been searching and realize it is automatic functionality for the Dawn theme to select and show the variant image first on the product page instead of the featured image. This is definitely not preferred as I want the lifestyle images to show first when a customer lands on the product page, and the variant images last.

I implemented the code solution offered in this post:

https://community.shopify.com/c/shopify-scripts/featured-product-image-dawn-theme/m-p/1729454/highlight/true#M3703

It works but it hides the variant image completely from the page until a variant is selected. This would be fine but a lot of my products only come in one color, so it won’t show the stock photo when clicking on black for example, but only when the customer selects a size. This just seems like it would be janky and confusing for the customer.

Is there any way to show the featured image first while maintaining the functionality of showing the variant stock image when selected?

Thanks in advance

[made4Uo]

Hi @TristaD ,

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, open the main-product.liquid
3. There should be two codes like this one below in the file, find the first code.

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

and also the

{%- endif -%}

See image for placement

4. Replace the highlighted code with the code below.

{%- assign product_media = product.featured_media -%}  
              {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}  
            - {%- assign media_position = 0 -%}
                  {% render 'product-thumbnail', media: product_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
              

              - {%- assign media_position = 1 -%}
                  {% render 'product-thumbnail', media: featured_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
              

The code should look like this:

[Cedcommerce]

Hello @TristaD ,

To get this issue fixed you need to paste the below-provided code in your “main-product.liquid”:-

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

<li

id=“Slide-{{ section.id }}-{{ featured_media.id }}”

class=“feature–img product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item–single{% endif %}{% if featured_media.media_type != ‘image’ %} product__media-item–full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item–variant{% endif %}”

data-media-id=“{{ section.id }}-{{ featured_media.id }}”

{%- assign media_position = 1 -%}

{% render ‘product-thumbnail’, media: featured_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}

Add this script before {% schema %} tag:-

image.png

This will resolve the issue. Let us know if any further is needed.

Note: In case, if you are not good at handling codes then please reach out to us and we will help you out with the process.

All the best,

CedCommerce

[TristaD]

Hi @made4Uo

Thanks for the response. I’ve implemented this but it is having the same behavior as I described in the post: Hiding the variant image until a variant is selected (in this case when I only have one color available) it will show the variant image only when someone selects the size, which is confusing.

I prefer the variant image to be shown in the Media Order I select on the product backend, but not be auto selected as the featured image on the front end product page, but scrolled to or shown when a customer selects a variant.

[Donnarama]

Thank you so much, I have spent days on this! You are a lifesaver!

[levimcfarland]

Thank you so much! This worked for us.

[Rabi3]

I don’t have this {%- if product.selected_or_first_available_variant.featured_media != null -%} anywhere in main-product.liquid section. I used the find option and it’s not there. Please advise. Thanks.

[japneetsingh]

First of all, thank you very much. I am currently using this in my Dawn theme, and it is working perfectly. However, I am planning to upgrade my Dawn theme to the latest version. My current Dawn version is 4.0, and I noticed that the latest Dawn theme doesn’t have that line of code. Can you provide an updated solution?

[japneetsingh]

Can you please provide a updated solution that we can use in the latest Dawn 11.0 update?

[HejMarie]

I am also looking for a current fix to this issue.

[HejMarie]

I’m looking for a current fix to this problem for the current version of Dawn.

[gr_trading]

Hi @TristaD ,

Please refer to the below video to implement the same.

Show Featured Product Image Instead Of Selected Variant Image | Shopify customization

[Gotyour]

I followed the directions, and this solution deletes the main image. Not a solution.

[Gotyour]

This line doesn’t exist in the

[gr_trading]

Hi @japneetsingh

Please refer to the below video to implement the same.

Show Featured Product Image Instead Of Selected Variant Image | Shopify customization

[Plpepin]

I wanted to share a solution I discovered that might help others. I’m using the Ride theme from Shopify (a free theme), and I found that its logic is quite similar to what’s shown in the video, so I was able to implement the fix easily.

In my case however, I wanted the selected variant to appear first when:

• A variant is selected by default using the ?variant= URL parameter, or

• You refresh the page after selecting a variant.

Instead of commenting out the initial section like in the video, I wrapped it in this condition:

{%- if product.selected_variant -%}

Additionally, I added this JavaScript snippet at the bottom of the file to unselect the first available variant if no variant is pre-selected when the page loads:

{%- unless product.selected_variant -%}
  
{%- endunless -%}

For this JavaScript to work, I added a class to the under {%- elsif picker_type == ‘button’ -%} in product-variant-options.liquid:

option-{{ option.name | handleize }}

This allows the script to specifically target and unselect the color option. It also helps to have the color option listed first in your product options (you can arrange this in the product admin).

Hope this helps someone else out there!

[cmlight]

I’ve been searching for a solution on this for a very long time and this is the only one that worked! Just a note, add additional {%- endif -%} at the end of the section to close the added code. I think this code doesn’t work for ‘thumbnail carousel’ option for desktop as it doesn’t show the main photo on the first page load. I changed mine to stacked and it worked perfectly. Also works for 2-columns. Thank you for your help!

[Ubeyd]

Fix for 2025.12, Dawn version 15.2:

1. Go to edit code for the published theme
2. Find product-media-gallery.liquid
3. Find the part that starts with
   <ul
id="Slider-Gallery-{{ section.id }}"
class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
role="list"
>
4. There’s a dropdown menu icon on the left, click on those couple of times until you find the part with . Like so:

5. Write {% comment %} before <ul and {%endcomment %} after. Like so:

6. Paste this code before the {% comment %} line:

<ul
  id="Slider-Gallery-{{ section.id }}"
  class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
  role="list"
>
  {%- for media in product.media -%}
    {% if media_position >= limit
      or media_position >= 1
      and section.settings.hide_variants
      and variant_images contains media.src
    %}
      {% continue %}
    {% endif %}

    <li
      id="Slide-{{ section.id }}-{{ media.id }}"
      class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
      data-media-id="{{ section.id }}-{{ media.id }}"
    >
      {%- liquid
        assign media_position = media_position | default: 0 | plus: 1
        assign lazy_load = false
        if media_position > 1
          assign lazy_load = true
        endif
      -%}
      {% render 'product-thumbnail',
        media: media,
        media_count: media_count,
        position: media_position,
        desktop_layout: section.settings.gallery_layout,
        mobile_layout: section.settings.mobile_thumbnails,
        loop: section.settings.enable_video_looping,
        modal_id: section.id,
        xr_button: true,
        media_width: media_width,
        media_fit: section.settings.media_fit,
        constrain_to_viewport: section.settings.constrain_to_viewport,
        lazy_load: lazy_load
      %}
    </li>
  {%- endfor -%}
</ul>

7. Save and test

Explanation:

• We are modifying the part that does the selection for the image we show first in the website. In the original, it checks if a variant is selected and makes that the first one. In our version, we remove this check.
• Original checks again to make sure it’s not doing the next images’ things for the first image. Since we don’t need that, it’s also removed.
• Then there’s the decision of which image is active, i.e shows big on the page. Half of that decision has been removed with variant selection part and for the other half, we simply make the first image active. If no image active, nothing shows up in the big area, which was the issue of the above video, though it was very helpful for finding the exact fix area.
• It’s working for my clients’ websites, with Dawn theme version 15.2.

This part fixes the gallery part but not the thumbnails. For thumbnails fix follow the steps:

1. In the same product-media-gallery.liquid file, find the line that starts with:

<ul id="Slider-Thumbnails-{{ section.id }}"

2. In this, there will be a part that looks like this:{%- if featured_media != null -%} Find this and close the dropdown from the left.

3. Right after the {%- endif -%} part, there’s a part that starts with {%- for media in product.media -%}Also close the for section from the left-handside dropdowns.

4. Add {% comment %} before the {%- if featured_media != null -%}.

5. Add {% endcomment %} after the {% endfor %. Should look like this:

6. Paste this code after the {% endcomment %}:

{%- for media in product.media -%}
  {%- liquid
    capture media_index
      if media.media_type == 'model'
        increment model_index
      elsif media.media_type == 'video' or media.media_type == 'external_video'
        increment video_index
      elsif media.media_type == 'image'
        increment image_index
      endif
    endcapture
    assign media_index = media_index | plus: 1
  -%}
  <li
    id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}"
    class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
    data-target="{{ section.id }}-{{ media.id }}"
    data-media-position="{{ media_index }}"
  >
    {%- if media.media_type == 'model' -%}
      <span class="thumbnail__badge" aria-hidden="true">
        <span class="svg-wrapper">
          {{- 'icon-3d-model.svg' | inline_asset_content -}}
        </span>
      </span>
    {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
      <span class="thumbnail__badge" aria-hidden="true">
        <span class="svg-wrapper">
          {{- 'icon-play.svg' | inline_asset_content -}}
        </span>
      </span>
    {%- endif -%}
    {%- capture thumbnail_id -%}
      Thumbnail-{{ section.id }}-{{ forloop.index }}
    {%- endcapture -%}
    <button
      class="thumbnail global-media-settings global-media-settings--no-shadow"
      aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
      {% if forloop.index == 1 %}
        aria-current="true"
      {% endif %}
      aria-controls="GalleryViewer-{{ section.id }}"
      aria-describedby="{{ thumbnail_id }}"
    >
      {{
        media.preview_image
        | image_url: width: 416
        | image_tag:
          loading: 'lazy',
          sizes: sizes,
          widths: '54, 74, 104, 162, 208, 324, 416',
          id: thumbnail_id,
          alt: media.alt
        | escape
      }}
    </button>
  </li>
{%- endfor -%}

7. Save and test

Explanation:

We did the same like main gallery, but this time for thumbnail section.