Display feature image as 1st image on the product and collection page rather than the variant image

[sahilrev]

Hi all,

I want to display the feature image as the 1st image on the product page, 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 on the forum but it is not working on the dawn 15.0 theme.

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?

[PageFly-Amelia]

This is Amelia from PageFly - Landing Page Builder App

To display the featured image as the first image on the product page in the Dawn theme, you can follow these steps:

For Product Pages

1. Edit the main-product.liquid File:

   • Go to your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code.
   • In the Sections folder, open the main-product.liquid file.

2. Modify the Code:

   • Look for the following code block:

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

   • Replace it with:

     {%- 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 }}">

For Collection Pages

1. Edit the collection-product-grid-item.liquid File:

   • In the Snippets folder, open the collection-product-grid-item.liquid file.

2. Modify the Code:

   • Look for the code that handles the product image display and ensure it prioritizes the featured image over the variant image. You might need to adjust the logic to check if the first variant is sold out and then display the featured image instead.

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[sahilrev]

Hi @PageFly-Amelia Thanks for the reply, but the code you have provided is not working, also I didn't find the code in main-product.liquid file, it will be greatfull if you can help me.

You can see the screenshot: