Dawn theme - product variant options/cart image to be amended desktop/mobile

[Ankita31]

Hi, I am wondering if someone can please help. I have 2 variant options on my products page and once you select an option, it shows that particular image but that image is also shown in the cart and on screen. Is there any way to show the main product image in the cart instead?

this is what I would like it to show (have used arrows - currently it shows the back of the hoop as that is what the two variants are - is there a way of having it show the main product image in the cart for this size and the larger one. 

Thank you in advance! 🙂

[BSSCommerce-B2B · Accepted solution]

@Ankita31,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file "cart-notification-product.liquid"

Step 3. Change the code i've marked here

to

This is the code, you can copy it:

src="{{ item.product.featured_image | image_url: width: 140 }}"
alt="{{ item.product.featured_image.alt | escape }}"

Result in my site: I selected the black variant, but the main product image is displayed instead

Hope it helps 🙂

[DitalTek]

@Ankita31 

- About to show main product image instead of variant image, you should be change variant image to same feature image (main product image), additionally if you want to show variant image when user choose options but on cart page you want to show main image product instead so you need customize it with code. So if you not familiar with code, you can ask help from Shopify expert,

Let me know if you have further question.

[Ankita31]

@BSSCommerce-B2B Are you able to help with this please? Thanks so so much for all of your other help. Super kind of you! 🙂

[BSSCommerce-B2B · Accepted solution]

@Ankita31,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file "cart-notification-product.liquid"

Step 3. Change the code i've marked here

to

This is the code, you can copy it:

src="{{ item.product.featured_image | image_url: width: 140 }}"
alt="{{ item.product.featured_image.alt | escape }}"

Result in my site: I selected the black variant, but the main product image is displayed instead

Hope it helps 🙂

[Ankita31]

Again - you are incredible!!!!

Thank you for being the most helpful person on here and helping me with everything! So grateful! 

[Ankita31]

Hey @BSSCommerce-B2B 

Are we also able to get the correct image here too (this is once you click onto the cart)

[BSSCommerce-B2B · Accepted solution]

@Ankita31,

1. Go to main-cart-items.liquid file

2. Search this code snippet below

3. Change it to

 <img
                            src="{{ item.product.featured_image | image_url: width: 300}}"
                            alt="{{ item.product.featured_image.alt | escape }}"
                            class="cart-item__image"
                            loading="lazy"
                            width="150"
                            height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                          >

You see it's quite the same before

[Ankita31]

Superstar! Thank you so so much! 🙂