Hello,
How to change the cart icon of a theme to put its own icon uploaded on shopify?
And how to change the location of it (header, below the logo/ left/ right/ bottom etc…)?
Thanks.
Topic summary
A user seeks to replace their theme’s default cart icon with a custom uploaded icon and change its position (e.g., below logo, left/right, bottom).
Solutions Provided:
-
Icon customization: Navigate to Online Store → Edit Code → Snippets folder → locate
icon-cart.liquidfile. Remove existing SVG code and replace with new custom SVG icon code. -
Position adjustment: Access Themes → Customize → Header section to modify logo and cart positioning through the theme customizer interface.
Current Issue:
One user successfully replaced the cart icon by updating both icon-cart.liquid and icon-cart-empty files but now faces a layout problem—the cart counter bubble appears misaligned and doesn’t properly overlay the new icon. The discussion remains open as they seek guidance on fixing the counter positioning.
Note: Solutions depend heavily on the specific theme being used, as customization options vary across themes.
Hello @kristibajr ,
Changing icon and position all depends on which theme you are using. I have never seen any theme that allows changing icon. This need to be done via theme level.
Howver to change the position of the logo, follow bellow steps:
Step 1: Go to Themes > customize
Step 2: Click on Header
Step 3: Change Desktop logo position
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
1 Like
Follow these Steps:
Go to Online Store Edit Code Find Snippets folder then find icon-cart.liquid file and remove the previous svg icon code and add new svg icon code.
If I managed to help you then, don’t forget to Like it and Mark it as Solutions
1 Like
Hey there!
Thanks a lot for the guidance, it helped a lot! I also updated the icon-cart-empty file with the svg code but now the counter is kinda weirdly placed… I can’t seem to figure out how to get the counter bubble over the icon… Does anyone know what to do here?
Thanks!
