How To Add An Image To Cart Popup? (Dawn)

milkandcookies
Excursionist
458 0 49

Hi,

How can I change my cart popup from this

milkandcookies_2-1707784374924.png

 

to this

milkandcookies_3-1707784392587.png

 

I would like the same image to show up on the cart popup, regardless of user selection.

https://www.pop--shop.com/products/signature-25-pack-pop-box?variant=43619139518645

thanks in advance

Replies 4 (4)

xtrend
Explorer
69 25 29

you have to edit your code go to your store click on the dots with customize option you will see edit theme code there will go to cart-drawer.liquid and search for {% for item in cart.items %} there you will find your td element 

add this code there 

<td class="cart-item__media" role="cell" headers="CartDrawer-ColumnProductImage">
                          {% if item.image %}
                            {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                            <a href="{{ item.url }}" class="cart-item__link" tabindex="-1" aria-hidden="true"> </a>
                            <img
                              class="cart-item__image"
                              src="{{ item.image | image_url: width: 300 }}"
                              alt="{{ item.image.alt | escape }}"
                              loading="lazy"
                              width="150"
                              height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                            >
                          {% endif %}
                        </td>
Screenshot 2024-02-13 at 10-03-38 sensod6766 · Themes · Shopify.png
milkandcookies
Excursionist
458 0 49
xtrend
Explorer
69 25 29

 src="{{ item.image image_url: width: 300 }}" this code will fetch image of your product variant itself 

milkandcookies
Excursionist
458 0 49

thank you, I added this after my </script> tag on my cart-drawer.liquid file but got no change, am I doing something wrong?:

 

<td class="cart-item__media" role="cell" headers="CartDrawer-ColumnProductImage">
                          {% if item.image %}
                            {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                            <a href="{{ item.url }}" class="cart-item__link" tabindex="-1" aria-hidden="true"> </a>
                            <img
                              class="cart-item__image"
                              src="{{ item.image | https://cdn.shopify.com/s/files/1/0635/1205/1893/files/flavors.jpg?v=1707628888: width: 300 }}"
                              alt="{{ item.image.alt | escape }}"
                              loading="lazy"
                              width="150"
                              height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                            >
                          {% endif %}
                        </td>