Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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
This is an accepted solution.
Add this css in asset->theme.scss file at bottom:
.header-minicart{width:30px;}
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
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?
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.
Should I add this type of code:
<img class="my-image" src="{{ "image.svg" | img_url: '24x24' }}" alt="{{ shop.name }}" ...
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
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>
This is an accepted solution.
Add this css in asset->theme.scss file at bottom:
.header-minicart{width:30px;}
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?
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
Thank you very much for your help. I will look into it.
Hello , can I hire you to help me change the cart logo on my shopify site ?
Thank you
Hi Keekee
I'm trying to do the same, but where should I store the new icon? Do I need to upload it somewhere?
You can upload icon or image in setting->file section.
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?
You can open you header.liquid file and find "site-header__icon".
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.
You have to change this "{% include 'icon-cart' %}"
this is icon code.
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?
Hi Jasoliya, can you whatsapp me at 9643464116. We are looking to hire someone to make changes to our site
I am sorry I don't able to know from which country you are because of missing country code in your whatsApp number which you added. If possible then please here is my whatsApp: +91-9145985880
Hi when you change your cart icon did it change the buy now channel mini cart
Hi Jasoliya,
I am trying to change the wording in my header (see picture)
to actual icons (like picture)
I would also like to change the 'Cart' to the search and remove the search below the wording (see picture)
Is this something you may be able to help with?
I have other queries also but this one has been bugging me.
My URL is www.oliveandaugust.com.au there is no password on page.
Thank you,
Sarah
Hi,
for that need more code changes, you can change that code from header.liquid file but you need code knowledge for that my be you have to hire developer for that
Best regard
Hi. I have solved this and uploaded video. https://www.youtube.com/watch?v=ES8pGBMy7Ro
I wasted SO much time trying to figure this out! THANK YOU SO MUCH! It's SO easy! Your instructions were great. Thanks again!
Hi there, I followed the steps in your video but the cart icon is still the same sadly. This is how the code looks if that helps:
Why do you think is that?
Many thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024