Re: Dawn Theme - Need product page main image to remain as 1st image when using variants

Dawn Theme - Need product page main image to remain as 1st image when using variants

jenok
Excursionist
22 1 3

I am using Dawn theme. Most of my products have variant images. The problem is when the user clicks on the item to get to the product page, it automatically changes the image to the first variant's image. I'd like the main product image to stay until the user selects a variant from the drop down.

Replies 5 (5)

BSS-Commerce
Shopify Partner
3477 463 527

Hi @jenok ,

Please do the following steps:

- Go to Themes -> Edit code

view - 2024-01-16T110431.270.png

Find and open the file product-media-gallery.liquid

view - 2024-01-16T110502.801.png

Find the code:

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

 And replace it with the following code:

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

view - 2024-01-16T110558.433.pngview - 2024-01-16T110621.971.png 

Similarly, find all code:

{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

Replace everything with the following code:

{%- unless media.id == product.featured_media.id -%}

 Hope it works @jenok 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jenok
Excursionist
22 1 3

Hi - I will definitley try this- thank you! 

Can you please clarify though what does the "media.id" part of this do? Do I have to do both?

BSS-Commerce
Shopify Partner
3477 463 527

"media.id" is the product's image ID. In this case, the image will be displayed if the id is the id of the main image or because of the image of the first variant. You need to follow all the steps I instruct you to display correctly.

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jenok
Excursionist
22 1 3

Hi - Understood... I did both replacements of code. They worked great. But some products do not show pictures correctly when going into the product pages. For example, please go to my Halloween collection at https://yummaliciouschocolates.com/collections/halloween

If you click on the first product on this page - Halloween Gift Box - the first image does not appear at all. The images that do show are only as thumbnails. This happens to product #3 on the same row. But products #s 2 & 4 work perfectly.  Then on row 2, products #1 &2 work, but #s 3 & 4 do not. I tried deleting the main image an re-uploading them. But this did not help. Any thoughts on how to fix this?

lsvvintage
Excursionist
15 1 1

Hi! I've had the same problem and have replaced the snippets with the code you provided. Still, the product gallery media layout changes when you click another variant. Any idea how to fix that? Thanks a lot!