Cart Icon

Shopify Discussion
1

I’m trying to change my cart icon to my own chosen cart. I’ve tried doing everything, converted from png to svg, and added the svg code to icon cart empty liquid and icon cart liquid. Instead it got rid of the icon from my website completely. I downloaded my chosen cart from Flaticon.

I’d really appreciate if someone can help me with this.

Thanks.

2

Hi @mahnoorr

We do not know what theme you are using so giving you a generic response and hopefully it works for you:

Upload the SVG asset1. In Shopify Admin, go to Online Store → Themes → Actions → Edit code.

  1. In the left sidebar, under Assets, click Add a new asset.

  2. Upload your cart.svg file (give it a clear name like icon-cart-custom.svg).

2. Reference the SVG in your Liquid snippet

You’ll usually have two files for the cart icon:

  • icon-cart.liquid (when there’s at least one item in cart)

  • icon-cart–empty.liquid (when cart is empty)

Open each of those under Snippets and replace the existing icon code with:

{% comment %} Custom cart icon {% endcomment %} {% if shop.theme_assets contains ‘icon-cart-custom.svg’ %} {{ ‘icon-cart-custom.svg’ | asset_url | svg_tag }} {% else %} {{ ‘icon-cart.svg’ | asset_url | svg_tag }} {% endif %}

Hope this helps.

3

Hi,

Thank you for your reply. I am using the dawn theme. I just tried your solution and it has not done anything. the old cart icon came back, but i am trying to change it to my own and i followed your steps but the cart icon is the same as the last one.

In the assets, there is a icon-cart-empty.svg and icon-cart.svg, and there is a code written on both of these for the cart icon that is still up there. I’m not sure if it has anything to do with that.

4

Hi Mahnoorr,

Here are the two cart icon files.
Please delete the existing code in both snippet files and replace it with your SVG code, starting from .

This should fix the issue.

Let me know if you need any help!

5

hi, I’ve tried that, but it does not work

6

Hi @mahnoorr

First, please resize your SVG file to 40x40px using this tool.

Second, you’ll need to edit the snippets/icon-cart.liquid and snippets/icon-cart-empty.liquid files:

  • Open your SVG file in Notepad, copy the <path … />, and replace the existing <path … /> in both icon-cart.liquid and icon-cart-empty.liquid.

  • Copy the viewBox from your SVG file (e.g., viewBox=“0 0 512 512”) and paste it into the tag.

  • Add height=“40” and width=“40” to the tag.

  • Add fill=“currentColor” and fill-rule=“evenodd” to the tag.

Please let me know if you have any questions or concerns!

7

Hi @mahnoorr ,

Looking at the Dawn theme cart icons, here’s exactly what you need to do:

  1. Open your theme editor → Snippets folder → Find “icon-cart-empty.liquid”

  2. Replace the content with:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty{% if additional_classes %} {{ additional_classes }}{% endif %}" viewBox="0 0 40 40">
  <!-- YOUR FLATICON SVG PATH GOES HERE -->
  <path fill="currentColor" fill-rule="evenodd" d="YOUR PATH DATA HERE"/>
</svg>
  1. Do the same for “icon-cart.liquid”:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart{% if additional_classes %} {{ additional_classes }}{% endif %}" viewBox="0 0 40 40">
  <!-- YOUR FLATICON SVG PATH GOES HERE -->
  <path fill="currentColor" fill-rule="evenodd" d="YOUR PATH DATA HERE"/>
</svg>

  1. IMPORTANT: Keep the class names intact, especially icon-cart and icon-cart-empty with any additional classes.

  2. Keep fill=“currentColor” to maintain theme color integration.

  3. Make sure to use the same viewBox value (0 0 40 40) as Dawn uses, or adjust your SVG path to fit this viewBox.

  4. If your Flaticon SVG uses multiple paths, you can include them all inside the SVG tags.

If this doesn’t work, shoot me your collaborator code via DM or email and I’ll fix it for free.

Cheers,

Shubham | Untechnickle

8

It did not work. I have sent you an email.

9

  1. Upload your new cart icon
    In your theme’s assets, add your custom SVG so it’s available to the theme.

  2. Locate the cart icon files
    Using the theme editor, open the two image-icon sections—one that displays when the cart is empty and one for when it contains items.

  3. Swap in your icon
    In each section, remove the default graphic and point it to (or paste in) your uploaded SVG.

  4. Save and preview
    Publish your changes, then reload your storefront. Your new cart icon should appear whether the cart is empty or full.

  5. Clear cache if needed
    If it doesn’t show up immediately, do a hard refresh or clear your browser’s cache so the updated icon can load.