How can I alter the cart icon on my website?

[domo2]

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

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

[Harsita · Accepted solution]

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 -

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="999.000000pt" height="999.000000pt" viewBox="0 0 999.000000 999.000000" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.16, written by Peter Selinger 2001-2019
</metadata>
<g transform="translate(0.000000,999.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2977 9533 c1106 -2 2920 -2 4030 0 1110 1 205 2 -2012 2 -2216 0 -3125 -1 -2018 -2z"/>
<path d="M911 9512 c-14 -11 -13 -12 6 -3 40 20 48 11 8 -9 -46 -24 -48 -24 -40 -7 4 6 -5 -1 -19 -16 l-26 -28 3 -3217 c2 -1769 6 -3227 8 -3240 3 -12 16 -33 29 -45 12 -12 19 -16 15 -8 -5 9 -3 12 6 9 8 -3 14 -11 14 -18 0 -7 9 -16 20 -21 11 -4 464 -8 1007 -8 l986 -1 7 -31 c9 -40 17 -32 9 9 l-6 32 -992 1 c-545 0 -999 3 -1008 7 -10 4 436 6 990 4 553 -1 1009 -6 1013 -10 9 -10 84 -324 108 -457 91 -493 119 -835 145 -1750 4 -148 7 -167 26 -190 16 -19 63 -45 82 -45 7 0 -5 9 -27 19 -22 10 -47 26 -55 36 -9 11 0 8 24 -9 65 -44 95 -44 190 2 5 3 5 -1 0 -9 -4 -7 27 15 69 49 42 35 77 66 77 69 0 4 -49 -34 -122 -95 -10 -9 -18 -13 -18 -10 0 7 146 128 155 128 3 0 3 -6 -1 -13 -4 -6 4 -3 17 9 20 17 445 364 617 503 31 25 48 32 57 25 8 -5 71 -56 141 -113 70 -58 124 -100 120 -93 -17 27 13 5 171 -124 213 -175 226 -184 278 -184 52 0 65 9 278 184 159 130 187 151 171 124 -8 -13 11 2 180 142 81 67 90 72 110 60 19 -12 20 -12 7 3 -7 10 -18 17 -23 17 -5 0 -46 -31 -91 -68 -137 -113 -177 -145 -177 -139 0 3 59 54 131 113 119 97 134 106 152 94 29 -18 778 -628 802 -653 l20 -21 -20 15 c-49 38 -732 594 -752 612 -13 11 -23 18 -23 14 0 -3 170 -144 378 -313 207 -169 388 -316 401 -328 13 -12 21 -15 16 -7 -4 7 -4 12 1 9 95 -46 125 -46 190 -2 24 17 33 20 24 9 -8 -10 -33 -26 -55 -36 -22 -10 -34 -19 -27 -19 19 0 66 26 82 45 19 23 22 42 26 195 24 885 55 1257 145 1745 24 133 99 447 108 457 4 4 460 9 1013 10 554 2 1000 0 990 -4 -9 -4 -463 -7 -1008 -7 l-991 -1 -7 -32 c-8 -41 0 -49 9 -9 l7 31 986 1 c543 0 996 4 1007 8 11 5 20 14 20 21 0 7 6 15 14 18 9 3 11 0 6 -9 -4 -8 3 -4 15 8 13 12 26 33 29 45 2 13 6 1471 8 3240 l3 3217 -26 28 c-14 15 -23 22 -19 16 8 -17 6 -17 -40 7 -22 11 -33 20 -26 20 7 0 22 -5 34 -11 16 -9 19 -9 11 0 -16 18 -8151 21 -8173 3z m7949 -3292 l0 -3000 -859 0 -859 0 29 78 c38 99 137 303 177 366 l32 50 0 419 c0 434 0 436 -44 487 l-21 25 24 -20 c51 -44 51 -44 51 -493 l0 -418 -30 -47 c-29 -46 -81 -148 -60 -117 6 8 31 49 55 90 l45 75 0 418 c0 445 0 447 -49 491 -27 25 -39 27 -193 33 l-128 5 0 1642 0 1643 -21 29 -21 29 26 -28 26 -28 0 -1640 0 -1639 109 0 c60 0 122 -5 138 -11 23 -8 26 -8 15 3 -9 9 -51 14 -132 16 l-120 4 0 1633 0 1634 -22 26 -23 25 -2010 0 -2010 0 -22 -25 -23 -26 0 -1634 0 -1633 -120 -4 c-81 -2 -123 -7 -132 -16 -11 -11 -8 -11 15 -3 16 6 78 11 138 11 l109 0 0 1639 0 1640 26 28 26 28 -21 -29 -21 -29 0 -1643 0 -1642 -127 -5 c-155 -6 -167 -8 -194 -33 -49 -44 -49 -46 -49 -491 l0 -418 45 -75 c24 -41 49 -82 55 -90 21 -31 -31 71 -60 117 l-30 47 0 418 c0 449 0 449 51 493 l24 20 -21 -25 c-44 -51 -44 -53 -44 -487 l0 -419 32 -50 c40 -63 139 -267 177 -367 l29 -77 -859 0 -859 0 0 3000 0 3000 3865 0 3865 0 0 -3000z m-1990 35 l0 -1595 -1875 0 -1875 0 0 1595 0 1595 1875 0 1875 0 0 -1595z m220 -2120 l0 -225 -2095 0 -2095 0 0 225 0 225 2095 0 2095 0 0 -225z m-3321 -610 c-57 -47 -129 -105 -160 -130 l-56 -44 -154 126 c-85 69 -156 127 -158 129 -2 2 139 4 314 4 l317 0 -103 -85z m1454 12 c-209 -172 -227 -186 -237 -178 -27 20 -244 197 -274 223 l-33 28 317 0 316 0 -89 -73z m1526 69 c-2 -2 -73 -60 -158 -129 l-154 -126 -56 44 c-31 25 -103 83 -160 130 l-103 85 317 0 c175 0 316 -2 314 -4z m-2161 -305 l94 -76 -200 -3 c-111 -1 -294 -1 -408 0 l-207 3 204 166 203 167 111 -91 c60 -49 152 -124 203 -166z m1351 74 l184 -150 -201 -3 c-110 -1 -294 -1 -407 0 l-206 3 203 166 c195 160 204 166 223 150 12 -9 103 -83 204 -166z m-2118 -622 c113 -93 207 -172 209 -178 2 -5 -105 -98 -236 -206 l-239 -195 -91 74 c-90 72 -92 75 -98 125 -4 29 -21 122 -38 207 -17 85 -31 160 -32 166 0 6 44 48 99 93 l100 81 60 0 61 0 205 -167z m632 156 c-6 -6 -48 -41 -94 -79 l-84 -68 -80 65 c-44 36 -87 72 -95 79 -12 12 15 14 175 14 135 0 186 -3 178 -11z m812 -160 c116 -94 211 -172 213 -174 4 -3 -475 -395 -483 -395 -8 0 -487 392 -483 395 2 2 97 80 213 174 l210 171 60 0 60 0 210 -171z m625 157 c-8 -7 -51 -43 -95 -79 l-80 -65 -84 68 c-46 38 -88 73 -94 79 -8 8 43 11 178 11 160 0 187 -2 175 -14z m705 -67 c60 -49 99 -88 98 -98 -1 -9 -15 -83 -32 -166 -17 -82 -33 -173 -37 -202 -6 -50 -8 -53 -98 -125 l-91 -74 -239 196 c-132 107 -240 198 -240 202 -1 3 93 83 209 177 l209 171 61 0 60 0 100 -81z m-2067 -663 c184 -150 230 -192 220 -201 -13 -12 -444 -362 -465 -378 -15 -11 -499 381 -486 393 65 63 478 388 487 383 6 -4 116 -92 244 -197z m1427 11 c121 -99 226 -185 233 -192 11 -10 -31 -49 -228 -210 -165 -134 -245 -194 -253 -188 -21 16 -452 366 -465 378 -10 9 37 52 229 208 142 116 246 194 253 190 6 -4 110 -88 231 -186z m-2150 -598 c129 -106 234 -193 233 -194 -2 -1 -127 -103 -279 -227 l-276 -225 -6 241 c-4 133 -12 304 -18 381 l-10 139 48 43 c26 23 53 40 60 38 7 -2 118 -91 248 -196z m1440 2 c197 -160 235 -195 224 -206 -8 -7 -117 -97 -242 -199 -147 -119 -233 -183 -241 -178 -7 4 -117 92 -245 196 -222 182 -231 190 -214 207 54 53 460 378 470 376 6 -1 118 -89 248 -196z m1248 156 l48 -43 -10 -139 c-6 -77 -14 -248 -18 -381 l-6 -241 -276 225 c-152 124 -277 226 -279 227 -4 3 479 395 487 395 3 -1 28 -20 54 -43z"/>
<path d="M3068 9203 c1064 -2 2801 -2 3860 0 1060 1 190 2 -1933 2 -2123 0 -2990 -1 -1927 -2z"/>
<path d="M4003 8013 c549 -2 1445 -2 1990 0 546 1 97 2 -998 2 -1094 0 -1541 -1 -992 -2z"/>
<path d="M1980 3240 l-845 -5 848 -3 c559 -1 847 1 847 8 0 6 -1 9 -2 8 -2 -2 -383 -5 -848 -8z"/>
<path d="M7160 3238 c0 -5 381 -7 848 -6 466 2 712 4 547 5 -783 7 -1395 7 -1395 1z"/>
<path d="M3130 6255 l0 -1585 1865 0 1865 0 0 1585 0 1585 -1865 0 -1865 0 0 -1585z m3720 0 l0 -1575 -1855 0 -1855 0 0 1575 0 1575 1855 0 1855 0 0 -1575z"/>
<path d="M2910 4135 l0 -215 2085 0 2085 0 0 215 0 215 -2085 0 -2085 0 0 -215z m4160 0 l0 -205 -2075 0 -2075 0 0 205 0 205 2075 0 2075 0 0 -205z"/>
<path d="M4187 2846 c43 -35 81 -66 84 -68 3 -1 43 27 89 65 l83 67 -167 0 -168 0 79 -64z m223 50 c0 -2 -30 -28 -68 -58 l-67 -55 -62 51 c-34 29 -65 55 -69 59 -4 4 54 7 129 7 76 0 137 -2 137 -4z"/>
<path d="M5628 2844 c44 -36 84 -65 87 -65 3 0 42 29 86 65 l81 66 -168 0 -167 0 81 -66z m218 49 c-4 -4 -35 -30 -69 -59 l-62 -51 -67 55 c-38 30 -68 56 -68 58 0 2 62 4 137 4 75 0 133 -3 129 -7z"/>
<path d="M825 6220 c0 -1757 1 -2476 2 -1597 2 878 2 2316 0 3195 -1 878 -2 159 -2 -1598z"/>
<path d="M9165 6220 c0 -1757 1 -2476 2 -1597 2 878 2 2316 0 3195 -1 878 -2 159 -2 -1598z"/>
</g>
</svg>

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

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

Thanks.

[domo2]

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?

[Harsita]

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'%}
  <style>
    #cart-icon-bubble svg g{
       fill: #fff;
    }
  </style>
{% endif %} 

Screen shot for reference:-

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

[domo2]

it says the following: 

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

[domo2]

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