How can I alter the cart icon on my website?

Store Design

Topic summary

A user wants to replace their website’s cart icon with a custom SVG icon.

Initial Solution:

  • Locate icon-cart.liquid and icon-cart-empty.liquid files in the Snippets folder
  • Replace existing SVG code with the new custom SVG
  • Adjust height and width attributes as needed

Additional Requirements:

  • Cart icon needs to be white on the homepage
  • Black on other pages (Shop, FAQ)
  • Height/width adjustments aren’t working as expected

Color Customization Approach:

  • Edit header.liquid in the Sections folder
  • Add conditional code using {% if template.name == 'index'%} to target the homepage
  • Apply CSS styling to change icon color to white
  • Similar logic can target other pages like ‘product’ or ‘list-collections’

Current Issue:
The implementation is producing a Liquid syntax error on line 746: “Unknown tag” related to the template conditional code. The solution remains unresolved pending correction of the syntax error.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hey, how do I change the cart icon to the following icon?

https://9woq4h8aniz7oije-69711397132.shopifypreview.com

—Pngtree—black creative basketball ball net_4469095.png
—Pngtree—black creative basketball ball net_4469095.png2000×2000 58.5 KB

2

Hi @domo2

Thank you for reaching out to the shopify community.

In order to change the cart icon go to your theme code editor and search for file named icon-cart.liquid and icon-cart-empty.liquid in Snippets folder. There remove the svg code and add the below svg code in both the files -

Now the icon should have changed. You can change the height and width attribute of svg accordingly.

Harsita_0-1693548733995.png
Harsita_0-1693548733995.png1352×588 49.7 KB

Please give it a try, and let me know if this was helpful.

Thanks.

3

Thank you very much! Now the problem is the following: on the frontpage is has to be white and on the other pages like Shop or FAQ it has to be black. Can you hekp me with that please?

4

also changing height and width doesn’t work, dont know why

5

Hi @domo2

In order to change the color of the cart icon on specific page please follow the below steps:-

  1. Go to your theme code editor and search for a file named header.liquid in Sections folder.

2.In this file search for icon-cart, and add the below code after that.

{% if template.name == 'index'%}
  
{% endif %}

Screen shot for reference:-

Harsita_0-1693815671847.png
Harsita_0-1693815671847.png1053×575 31.8 KB

Now the color of the icon on home page would have been changed to white, similarly you can target any other page(like template.name == ‘product’ or template.name == ‘list-collections’) and change the color of the icon.

Thanks

6

it says the following:

  • Liquid syntax error (line 647): Unknown tag ‘{% if template.name == ‘index’’