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/highli...

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 -%}  
            <li
                id="Slide-{{ section.id }}-{{ product_media.id }}"
                class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if product_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 }}-{{ product_media.id }}"
              >
                {%- 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 %}
              </li>
              <li
                id="Slide-{{ section.id }}-{{ featured_media.id }}"
                class="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 %}
              </li>

The code should look like this:

[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.

[Gotyour]

This line doesn't exist in the

[japneetsingh]

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

[gr_trading]

Hi @japneetsingh 

Please refer to the below video to implement the same.

 

[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 %}

             </li>

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

<script>

 var swatches = document.querySelectorAll("[type='radio']");

 var feature_img = document.querySelector(".feature--img");

 swatches.forEach((swatch) => {

   swatch.addEventListener('click', function(){

     feature_img.style.display = "none";

     console.log("swatches");

   });

 });

</script>

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

[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?

[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.

[Gotyour]

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

[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 -%}
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelector(".option-color [type='radio']:checked").checked = false;
    });
  </script>
{%- endunless -%}

For this JavaScript to work, I added a class to the <fieldset> 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!