How do I change my cart icon using SVGRepo coding?

How do I change my cart icon using SVGRepo coding?

Attractivist
Excursionist
50 0 4

I Have This Cart IconIMG_6966.jpegI Wanna Change It To This Cart Icon Below! I Need The Coding For This Cart Icon I Got From SVGRepo Page 3. Thanks 🙂

IMG_6965.jpeg

Replies 13 (13)

PageFly-Richard
Shopify Partner
4902 1100 1776

Hi @Attractivist 

 

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 

PageFlyRichard_0-1704257655837.png

 

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.

Attractivist
Excursionist
50 0 4

Yeah I Know, I Did That & It Didn’t Work

PageFly-Richard
Shopify Partner
4902 1100 1776

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.

Attractivist
Excursionist
50 0 4

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

PageFly-Richard
Shopify Partner
4902 1100 1776

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.

Attractivist
Excursionist
50 0 4

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>

BSS-Commerce
Shopify Partner
3477 464 551

Hi @Attractivist ,

To change the cart icon, visit your Shopify admin page, then select Online Store:
- In the theme section, select Edit code

view - 2024-01-03T140534.491.png

In the code folder, search the header.liquid file, then find the header cart icon render section

view - 2024-01-03T140622.255.png

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:

view - 2024-01-03T140651.322.png

Then go to the SVRepo page, select the icon you want, and select Edit Vector:

view - 2024-01-03T140727.374.png

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


BSS Commerce - Full-service eCommerce Agency
Attractivist
Excursionist
50 0 4

IMG_7007.jpeg

I Followed All The Directions & The Cart Icon Disappeared, I Can Still Click On It But It’s No Longer Showing

BSS-Commerce
Shopify Partner
3477 464 551

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:

view - 2024-01-08T143224.709.png

 

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


BSS Commerce - Full-service eCommerce Agency
Attractivist
Excursionist
50 0 4

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 

BSS-Commerce
Shopify Partner
3477 464 551

I tried testing your SVG file on my store and it still works normally.view - 2024-01-08T171233.528.png

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


BSS Commerce - Full-service eCommerce Agency
Attractivist
Excursionist
50 0 4

………..

Attractivist
Excursionist
50 0 4

It Worked But How To Change The Size Of Icon To Normal Size?