Change cart icon

Solved
Keekee
Tourist
15 0 0

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

 

Accepted Solutions (2)

Accepted Solutions
Jasoliya
Shopify Expert
4519 586 1131

This is an accepted solution.

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 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4519 586 1131

This is an accepted solution.

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

.header-minicart{width:30px;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 27 (27)
Jasoliya
Shopify Expert
4519 586 1131

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 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

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?

Jasoliya
Shopify Expert
4519 586 1131

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. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

Should I add this type of code:

<img class="my-image" src="{{ "image.svg" | img_url: '24x24'  }}" alt="{{ shop.name }}" ...
Jasoliya
Shopify Expert
4519 586 1131

This is an accepted solution.

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 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

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>
Jasoliya
Shopify Expert
4519 586 1131

This is an accepted solution.

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

.header-minicart{width:30px;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

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?

Jasoliya
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

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

plantyeco
Excursionist
17 0 4

Hi Keekee

 

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

Jasoliya
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

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?

 

Jasoliya
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

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.

Jasoliya
Shopify Expert
4519 586 1131

You have to change this "{% include 'icon-cart' %}"

this is icon code.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

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?

MRamzan
Shopify Partner
21 0 5

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

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
hfound
Excursionist
13 0 3

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