Shopify themes, liquid, logos, and UX
I Have This Cart IconI Wanna Change It To This Cart Icon Below! I Need The Coding For This Cart Icon I Got From SVGRepo Page 3. Thanks 🙂
This is Richard from PageFly - Shopify Page Builder App
Currently, you cannot upload and use the svg by that way, if you want to replace to your icon, you will need to replace the svg code itself.
About to change the cart icon, you have to download the icon as svg format first
> Then you can click and open the svg file > right click on the svg and copy all the code here
After that go to theme edit code > search for icon-cart.liquid and replace the code with the one you copied
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Yeah I Know, I Did That & It Didn’t Work
can you copy and paste what you put in the file here?
Also it would be more easier if you can share the icon link here
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
I Stated The Site & Page Number The Icon Was On, When I Put The Coding In The File, It Didn’t Work. I’m Using The Dawn Theme
Paste all the code that you pasted on the file here so i can check
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Link: https://www.svgrepo.com/svg/505321/cart-1
Code I Put In File:
<svg
class="icon icon-cart"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
fill="none"
>
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"/>
</svg>
Hi @Attractivist ,
To change the cart icon, visit your Shopify admin page, then select Online Store:
- In the theme section, select Edit code
In the code folder, search the header.liquid file, then find the header cart icon render section
In the header, you will see 2 renders corresponding to 2 files containing the svg image of the shop icon.
Please find those 2 files by the name in render:
Then go to the SVRepo page, select the icon you want, and select Edit Vector:
Then Copy SVG:
- Finally, go back to your 2 icon files and replace the previous code, Save the file and you can see the new icon.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
I Followed All The Directions & The Cart Icon Disappeared, I Can Still Click On It But It’s No Longer Showing
Hello,
I tried using the SVG part you provided and they work fine. Can you please take a screenshot of the file you edited and its contents?
This is my icon after editing the SVG code you provided:
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Sorry I Put The Original Cart File Up. This Is The File From The Svgrepo Site That I Want To Change My Cart To
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8H17.1597C18.1999 8 19.0664 8.79732 19.1528 9.83391L19.8195 17.8339C19.9167 18.9999 18.9965 20 17.8264 20H6.1736C5.00352 20 4.08334 18.9999 4.18051 17.8339L4.84718 9.83391C4.93356 8.79732 5.80009 8 6.84027 8H8M16 8H8M16 8L16 7C16 5.93913 15.5786 4.92172 14.8284 4.17157C14.0783 3.42143 13.0609 3 12 3C10.9391 3 9.92172 3.42143 9.17157 4.17157C8.42143 4.92172 8 5.93913 8 7L8 8M16 8L16 12M8 8L8 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
It Doesn’t Work. I Think Its The File Because I Replaced Both Files Like You Instructed & It Still Had The Old Cart Or Removed The Cart From Viewing
I tried testing your SVG file on my store and it still works normally.
Can you take a screenshot of both the file name and content?
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
………..
It Worked But How To Change The Size Of Icon To Normal Size?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025