Shopify themes, liquid, logos, and UX
Hello, I found where the original cart icon is located for the dawn 2.0 theme it looks like so:
Therefore when I replace this code with the font awesome code it doesn't work.
I'm trying to remove this :
And Change it to this :
The font awesome code is : <i class="fas fa-shopping-cart"></i> but it won't display.
I APPRECIATE YOUR TIME/EFFORT
Please share store URL!
Thanks!
Please add svg code snippets/ icon-cart.liquid file and snippets/icon-cart-empty.liquid file.
Thanks!
Please provided SVG icon file .
Thanks!
I attached the two files and in them, there is the SVG tag, there isn't an actual SVG file. Here is a screenshot:
Thanks
file contain old SVG icon code Please prvided NEW svg icon file
Thanks!
Hello ,
I'm confused there is not a new SVG file , only the ones I already sent you and showed a screenshot of. If there are new icon files I don't have them I sent you all that I have.
😕
This is the code from each file:
Icon Cart empty.liquid
Thanks
ok i will check your file and inform to you.
Thanks!
Please add the following code at the bottom of your assets/base.css file.
.header__icon, .header__icon--cart .icon {
height: 2.2rem !important;
width: 4.2rem !important;
}
And upload under file your snippets please check zip file
I uploaded it and it looks like this :
Do you know how to get this ?:
THANK U FOR YOUR PATIENCE
its the cart icon from font awesome :
<i class="fas fa-shopping-cart"></i>
Thank you for your time do you perhaps.... have any more tips on how to get the icon I'm referring to?
hi friend, do you know how to change cart icon style on dawn theme?
@gthegreat This exact code block worked for us just now on the Dawn 2.0 theme:
<svg class="icon icon-cart" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/>
</svg>
Note that you will need to replace the code in both icon-cart.liquid and icon-cart-empty.liquid for this to work. Otherwise the bag will still be there on one or the other.
We also had to modify the CSS to make the icon the same size as the other two. Not sure why because we're not great with SVGs, but it worked at least. You can see the result on our site at www.sprinklerfish.com
It's also possible to upload a .png image under assets then paste something like the following under under icon-cart-empty.liquid and icon-cart-empty.liquid.
<img src="{{ 'cart.png' | asset_url }}" style="height: 36px"></span>
Hope this helps!
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