How can I change the cart icon to a custom one?

Store Design
1

Hello everyone.

I have a quick question: is there a way to change the cart icon (see picture) to a custom cart icon I have? I am using a paid premium. I am familiar with coding and all I know is that the current cart icon (along with the search and user icons) was imported from FontAwesome. But I can’t find a way to change it.

store link: https://pl8imze0d42ftblb-28166455356.shopifypreview.com

Thank you for your help.

cacd6e11-8a41-4862-abe5-979a65a49953.png
cacd6e11-8a41-4862-abe5-979a65a49953.png1318×575 91.7 KB

2

Hi @Keekee

Normally yo can find this icon code in Section->header.liquid file.

find ‘exist-minicart’ class on page where its your cart icon

3

Thanks for your reply.

I already found it but what should I do next?

Here’s the code:

<div class="minicart-top  dropdown-toggle">
                <i class="exist-minicart icon"></i>
                <a class="minicart-toogle">
                  <span class="cart-text hidden">{{ 'layout.cart.shopping_cart' | t }}</span>
                  <span id="minicart-count">{{ cart.item_count }}</span>
                </a>
              </div>

How can I replace class=“exist-minicart icon” with my custom svg or png file?

4

here bellow code is icon of your cart,

<i class="exist-minicart icon"></i>

So you have change it with your icon or SVG but keep ‘exist-minicart’ and ‘icon’ class in new element.

5

Should I add this type of code:

<img class="my-image" src="{{ "image.svg" | img_url: '24x24'  }}" alt="{{ shop.name }}" ...
6

yes you can use like this but keep ‘exist-minicart and icon’ class, you have to manage this with css once you change existing icon

1 Like
7

Thanks it works!

However how can I change the size of the icon? And also now i have a weird square next to the cart number. Here’s the new code:

 <div class="minicart-top  dropdown-toggle">
                <img class="exist-minicart icon" src="{{ 'paper-bag.svg' | asset_url }} " alt="{{ shop.name }}" itemprop="cart"> 
                <a class="minicart-toogle">
                  <span class="cart-text hidden">{{ 'layout.cart.shopping_cart' | t }}</span>
                  <span id="minicart-count">{{ cart.item_count }}</span>
                </a>
              </div>
8

Add this css in asset->theme.scss file at bottom:

.header-minicart{width:30px;}
9

Thank you very much for your help!

One last thing is that now in mobile mode there’s a tiny square that’s supposed to show the hamburger menu for smartphone browser users. How should I proceed?

10

For that you have to do major code with liquid, css and html

Do code in Section->header.liquid file

May be this link help you

11

Thank you very much for your help. I will look into it.

12

Hi Keekee

I’m trying to do the same, but where should I store the new icon? Do I need to upload it somewhere?

13

You can upload icon or image in setting->file section.

14

Hi, thanks for the reply.

I have a problem for several days. I’m using the Debut theme but in the header.liquid I cannot find the “exist-minicart”.

Do you know if in debut theme the svg icons are located in another page?

15

You can open you header.liquid file and find “site-header__icon”.

16

yeah, found it.

But then, if I want to replace the existing cart icon, where should I specify my new icon in the code?

This is a sample of my page code:

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

Thanks much.

17

You have to change this “{% include ‘icon-cart’ %}”

this is icon code.

18

Right, I opened icon-cart and I replaced the existing code:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"/></svg>

with the new icon code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />
    <circle cx="25" cy="27" r="2" />
    <circle cx="12" cy="27" r="2" />
</svg>

But then the icon disappears completely from my website.

Do you know why?

19

Hi. I have solved this and uploaded video. https://www.youtube.com/watch?v=ES8pGBMy7Ro

1 Like
20

I wasted SO much time trying to figure this out! THANK YOU SO MUCH! It’s SO easy! Your instructions were great. Thanks again!