How can I change my cart icon on the Debut theme?

New Member
2 0 1

Hello,

 

I was able to find a forum post about the Brooklyn theme but didn't have any luck transferring that knowledge to my Debut themed store. I'd like to use the font-awesome cart or potentially an image.

Any help would be appreciated.

 

Thanks

1 Like
New Member
1 0 1

Hi,

We're using the Debut theme for our shop and currently we're trying to figure out how to change the shopping cart icon too without much luck.

If anyone knows how to do this please help.  Thank you.

Kenny

1 Like
Shopify Expert
7 0 0

hi guys, you can change it from editing one of the asset files icon-cart.liquid

Delete the current code which should be fairly short and replace it with your own image using the <img> tags.

Official Shopify Expert
0 Likes
New Member
1 0 0

icon-cart.liquid does not exist in the debut theme can you please clarify!

0 Likes
Shopify Partner
10 0 1

Here's the icon-cart.liquid from the Supply theme (another free Shopify theme) in case this helps save some time:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 20 20"><path fill="#444" d="M18.936 5.564c-.144-.175-.35-.207-.55-.207h-.003L6.774 4.286c-.272 0-.417.089-.491.18-.079.096-.16.263-.094.585l2.016 5.705c.163.407.642.673 1.068.673h8.401c.433 0 .854-.285.941-.725l.484-4.571c.045-.221-.015-.388-.163-.567z"/><path fill="#444" d="M17.107 12.5H7.659L4.98 4.117l-.362-1.059c-.138-.401-.292-.559-.695-.559H.924c-.411 0-.748.303-.748.714s.337.714.748.714h2.413l3.002 9.48c.126.38.295.52.942.52h9.825c.411 0 .748-.303.748-.714s-.336-.714-.748-.714zM10.424 16.23a1.498 1.498 0 1 1-2.997 0 1.498 1.498 0 0 1 2.997 0zM16.853 16.23a1.498 1.498 0 1 1-2.997 0 1.498 1.498 0 0 1 2.997 0z"/></svg>

-- Lead Front-end Developer Jeremy Hawes
1 Like
Shopify Partner
2 0 2

That's the code from an svg file. You have to get a new icon in the .svg format. Then view it in a text editor, and you will see this code. Take that code, and replace the code in the <path /> tag. For example, to change the bag to a shopping cart, replace with this:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 10 5"><path d="M8.9414094,1.52214727 C8.88708725,1.45185748 8.80034899,1.41026128 8.7081745,1.41026128 L2.21315436,1.41026128 C2.20057047,1.41026128 2.18800671,1.41098337 2.17590604,1.41252257 L1.90860403,0.685301663 C1.88089933,0.610090261 1.81989262,0.550137767 1.74148993,0.521007126 L0.394348993,0.0215486936 C0.245879195,-0.0333111639 0.0783422819,0.0355154394 0.020033557,0.175467933 C-0.0381744966,0.315496437 0.0347315436,0.473710214 0.183120805,0.528741093 L1.40663758,0.982365796 L2.90424161,5.05645606 C2.83814094,5.07819477 2.78212752,5.12606176 2.75661745,5.19302613 L2.32361074,6.32820903 C2.29707383,6.39781473 2.30800671,6.47515439 2.35316779,6.53563895 C2.39826846,6.59612352 2.47161745,6.63213302 2.5499396,6.63213302 L2.77230201,6.63213302 C2.63450336,6.77685511 2.5499396,6.96744893 2.5499396,7.17702613 C2.5499396,7.62772447 2.93848993,7.99435629 3.41595302,7.99435629 C3.89341611,7.99435629 4.28196644,7.62772447 4.28196644,7.17702613 C4.28196644,6.96744893 4.19740268,6.77685511 4.05960403,6.63213302 L5.94771141,6.63213302 C5.80985235,6.77685511 5.72526846,6.96744893 5.72526846,7.17702613 C5.72526846,7.62772447 6.11373826,7.99435629 6.59130201,7.99435629 C7.06884564,7.99435629 7.45731544,7.62772447 7.45731544,7.17702613 C7.45731544,6.96744893 7.37275168,6.77685511 7.23497315,6.63213302 L7.50543624,6.63213302 C7.63830201,6.63213302 7.74597987,6.53048931 7.74597987,6.40509264 C7.74597987,6.27969596 7.63828188,6.17807126 7.50543624,6.17807126 L2.89222148,6.17807126 L3.16038926,5.47505938 C3.19502013,5.4888171 3.23242953,5.49695012 3.2715906,5.49695012 L7.50537584,5.49695012 C7.63089262,5.49695012 7.74197315,5.42042755 7.78020805,5.30770546 L8.98300671,1.76590974 C9.01121477,1.68298337 8.99573154,1.59243705 8.9414094,1.52214727 L8.9414094,1.52214727 Z M3.41595302,7.54027553 C3.20367785,7.54027553 3.03106711,7.37736817 3.03106711,7.17702613 C3.03106711,6.97668409 3.20367785,6.81375772 3.41595302,6.81375772 C3.62822819,6.81375772 3.80083893,6.97668409 3.80083893,7.17702613 C3.80083893,7.37736817 3.62822819,7.54027553 3.41595302,7.54027553 L3.41595302,7.54027553 Z M6.59128188,7.54027553 C6.37900671,7.54027553 6.20637584,7.37736817 6.20637584,7.17702613 C6.20637584,6.97668409 6.37900671,6.81375772 6.59128188,6.81375772 C6.80353691,6.81375772 6.97616779,6.97668409 6.97616779,7.17702613 C6.97616779,7.37736817 6.80353691,7.54027553 6.59128188,7.54027553 L6.59128188,7.54027553 Z M8.10442953,2.56815202 L6.63138926,2.56815202 L6.63138926,1.95515439 L8.31257718,1.95515439 L8.10442953,2.56815202 L8.10442953,2.56815202 Z M7.68026174,3.8168361 L6.63138926,3.8168361 L6.63138926,3.11302613 L7.91931544,3.11302613 L7.68026174,3.8168361 L7.68026174,3.8168361 Z M4.72290604,3.8168361 L4.72290604,3.11302613 L6.05404027,3.11302613 L6.05404027,3.8168361 L4.72290604,3.8168361 L4.72290604,3.8168361 Z M6.05404027,4.36176722 L6.05404027,4.95205701 L4.72290604,4.95205701 L4.72290604,4.36176722 L6.05404027,4.36176722 L6.05404027,4.36176722 Z M2.80097315,3.11302613 L4.14561745,3.11302613 L4.14561745,3.8168361 L3.05971812,3.8168361 L2.80097315,3.11302613 L2.80097315,3.11302613 Z M4.72290604,2.56815202 L4.72290604,1.95515439 L6.05404027,1.95515439 L6.05404027,2.56815202 L4.72290604,2.56815202 L4.72290604,2.56815202 Z M4.14559732,1.95515439 L4.14559732,2.56815202 L2.60061745,2.56815202 L2.3752953,1.95515439 L4.14559732,1.95515439 L4.14559732,1.95515439 Z M3.26005369,4.36176722 L4.14559732,4.36176722 L4.14559732,4.95205701 L3.47702013,4.95205701 L3.26005369,4.36176722 L3.26005369,4.36176722 Z M6.63138926,4.95207601 L6.63138926,4.36178622 L7.49532886,4.36178622 L7.29489262,4.95207601 L6.63138926,4.95207601 L6.63138926,4.95207601 Z" id="Shape"></path></svg>

 

2 Likes
Tourist
30 0 3

Hi there,

Will the png file not work? Could you also please speciy where exactly do I insert that code?

The cart size currently on my site is visible here www.edgability.com (password: Angelini), how do i know which size to get to replace the current one?

Would appreciate the help. Thanks.

0 Likes
Excursionist
9 0 9

Yesterday I stumbled upon this thread in a search of a better cart icon for the Debut theme. 

I used the svgs suggested above, but as they didn't truly fit the look of Debut's icons I ended up designing a proper cart icon that fits.

Here is the code for the cart icon on the right (of course, without (1) in top right, it is added by the theme):

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 8503.9 14173.2"><path d="M8305.4 4978.4c-125.8-148.5-315.6-233.7-520.7-233.7H2071.9l-79.7-458.5c-65.7-394.4-407.3-973.4-1220.3-973.4H460.9C220.5 3312.8 0 3482.8 0 3793.3c0 356.2 236.5 450.5 460.9 450.5h310.9c153.8 0 310.9 133.1 336.2 284.8l837.2 5022.9c65.7 394.4 430.5 703.4 830.3 703.4H7784.7c138.3 0 360.5-135 360.5-460.5 0-307.9-222.1-460.5-360.5-460.5H3195.5c-279 0-351-94.8-396.2-334.8l-33.6-271.4 4541.7-434.1c388.3-33.8 742.7-361.4 806.7-745.9l336.2-2017.3c33.7-202.3-19.1-403.5-144.9-552H8305.4zM7462.4 5829.7c-10 58.6-224.7 1322.1-224.7 1322.1 -21.3 133.6-158.4 266-287.7 277.7L2595.1 7798.7l-363.2-2131.8 5068.9-8c47.2 0 106.9 17 131.9 47.7C7457.6 5737.4 7472.3 5771.1 7462.4 5829.7z"/><path d="M3182.5 10670.4c571.9 8.3 1028.8 478.6 1020.5 1050.5 -8.3 571.9-478.6 1028.8-1050.5 1020.5 -564.8-8.2-1018.9-467.5-1020.6-1032.4 1.6-573.6 467.9-1037.3 1041.5-1035.7 3 0 6.1 0 9.1 0.1V10670.4z"/><path d="M6933.5 10670.4c571.9 8.3 1028.8 478.6 1020.5 1050.5 -8.3 571.9-478.6 1028.8-1050.5 1020.5 -564.8-8.2-1018.9-467.5-1020.6-1032.4 1.6-573.6 467.9-1037.3 1041.5-1035.7 3 0 6.1 0 9.1 0.1V10670.4z"/></svg>

paste this in your debut_theme_folder/snippets/icon-cart.liquid file replacing the existing contents

Would you like more sales from your Shopify store? http://braiv.com/shopify-university/
7 Likes
New Member
1 0 1

This is great, thanks! So much better to use the universally-recognized shopping cart icon.

1 Like
Tourist
9 0 3

Thanks!  I have an official shopify crush on you.  I really couldn't stand that bag thing and this is so much nicer.

2 Likes