What's your biggest current challenge? Have your say in Community Polls along the right column.

Shopping Cart Icon changes when products are added/removed

Shopping Cart Icon changes when products are added/removed

shimlee
New Member
10 0 0

We have set up a custom image for our shopping cart and it works great majority of the time. It reverts back to the Shopify default image of the bag when an item is added to the cart or cleared from the cart. I have looked at some coding and cannot find an area to update or change where it is pulling the image from. 

 

When drawer is open, back to default bag icon (bad)

shimlee_0-1728310087753.png

 

Click off and continue shopping and it updates to correct image icon:

shimlee_1-1728310140261.png

 

Our website: www.shimlee.com

Replies 4 (4)

Mehedi06
Shopify Partner
27 3 4

Hi @shimlee ,
I've taken a look at your website and closely inspected the issue.
You have added a new icon for cart that is okay. But, when someone adds something to the cart, to update the cart count the full icon is rendered again and replaced with the old cart icon. This is something you need to work with the functionality of the `add to cart` click. Not some CSS tweak but you need to change the javascript functionality of it from the codebase.

Without the codebase, I can't say more than that. So, I can just point out the issue. Thanks.

shimlee
New Member
10 0 0

Would you be able to help us within our javascript functionality? I've tried to have it triggered when an event like "open drawer" happens but I don't think it's full correct, therefor not working. 

PaulNewton
Shopify Partner
7481 661 1570

Hi @shimlee 👋 For dawn based themes that is the https://github.com/Shopify/dawn/blob/main/sections/cart-icon-bubble.liquid and  

Reference https://github.com/Shopify/dawn/blob/main/sections/cart-notification-product.liquid 

Replace the SVGs with relevant images.

 

Also be aware the site has many issues

  1. The email nag is not closable because the masthead hides the close button. 
  2. Apps like customily and others are causing script issues, from inlined javascript possibly for vify-gift-cards (index):522 Uncaught TypeError: window.onload is not a function;  observable in browser devtools console(F12)
  1. PaulNewton_0-1728316832162.png

 

Contact me for theme customizations and theme repair optimization services.

Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


EvinceDev
Shopify Partner
121 13 13

Hello @shimlee ,
When we add a product to cart, in file cart-notification.js 
'renderContents' function is called

EvinceDev_0-1728382078368.png

In it cart Notification html is updated. There you will get complete cart notification element or node and just to need to update image src.

EvinceDev_1-1728382165879.png

 

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing