A user wants to replace their website’s default cart icon with a custom shopping bag SVG while preserving the cart count functionality. They’re working with the Bullet theme and have already located the SVG file URL but are unsure how to properly implement it in the header-cart.liquid file.
Attempted Solution:
Another user suggested searching for “cartCounter” in header-cart.liquid and replacing the button tag content with an <img> tag pointing to the custom SVG URL.
Current Issue:
The original poster tried implementing the suggested code but encountered a problem—the cart icon transformed into a black square with an “x” instead of displaying the custom shopping bag SVG.
Status: The discussion remains open with the implementation issue unresolved. The user has shared their current button tag code and is awaiting further troubleshooting guidance.
Hello, I need help adding a custom shopping bag SVG to my site. I would like to keep the cart count active, but change out the icon. I added the SVG link details in the header-cart.liquid file, but don’t really know where to go from there. I am using the bullet theme.
below if the new SVG link, and help on the steps I should take?
https://cdn.shopify.com/s/files/1/0783/3406/6984/files/Shopping_Bag_Empty_2.svg?v=1699543060
PW: reishi
hello @JhordanMSUITE , in the header-cart.liquid file, you ctrl + F search for “cartCounter”, you will see a li tag, inside there is a button tag, try this one inside the button tag
Hi @Justin-Simesy this is the only button tag on in the file
{%- render ‘global-icon’ with ‘x’ -%}
I tried to replace it with the code you provided and it turned the Cart’s “x” into a black square
