New Shopify Certification now available: Liquid Storefronts for Theme Developers

Change main image on products with variants Dawn theme

Millie03
Pathfinder
121 0 25

Hi,

 

I am using the Dawn theme for my store www.florabymillie.com. If you select a product that has variants, the image of the first variant displays as the main image in the product page. Can this be changed to have the main image on the collection page the same main image in the product page rather than a variant image ?

Any help would be great thanks.

Replies 6 (6)
BSS-Commerce
Shopify Expert
2942 394 414

Hi @Millie03 

- As I understand, you don't want to change your product image when changing variants. If so, we're able to find a workaround.

- Please navigate to the Online store > Themes > Edit code. In the Section folder, open the main-product.liquid. 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 -%}
{%- endif -%}

 view - 2023-02-01T164527.372.png

- Remove the code between the two lines above and add this code:

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

- Then add this code in the same file:

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

view - 2023-02-01T164724.756.png

Please try and let me know if it works. If you don't want the code, you can revert the change in your theme here.

view - 2023-02-01T164839.731.png

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Millie03
Pathfinder
121 0 25

Hi @BSS-Commerce 

 

Sorry, just to be clear - I would like the main product image to stay the same when you first go into the product page. At the moment it shows the first variant image. I only want the variant image to show when you click on the variant box.

OurWiseTribe
Tourist
3 0 0

Following this too @Millie03  did you get a solution?

jayjbquill
Visitor
1 0 1

also looking for a solution here... thanks

Kitana07
Visitor
1 0 1

Hi @Millie03,

 

You get a solution to this issue? I'm having the same problem.

jenok
Tourist
7 1 0

Following. Same for me. Picture that shows on Collection page for a product should remain as the main (first) picture when you click to go into the product on the product page.