Shopify themes, liquid, logos, and UX
Solved! Go to the solution
This is an accepted solution.
If you want the bag centered with the cart text, you can add this to the bottom of your theme.scss.liquid file in your assets folder:
.site-header__cart {
display: flex;
justify-content: flex-end;
align-items: center;
}
.site-header__cart img{
margin-right: 10px;
}
Try changing ".st0{fill:#E8A733;}" to ".st0{fill:none;}". Or if you can upload the svg somewhere and allow me to download it I can take a look and see if I can't save it out correctly.
Hi Ninthony,
Thanks so much for your reply! So I actually solved it by using this alternate code:
<img src="https://cdn.shopify.com/s/files/1/0536/5386/4643/files/crisp3.svg?v=1619098462" width="20" height="20" />
Although now I'm having the issue that the icon is too high up and I want it to align at the bottom with the rest of the text in that section (Cart, Sign Up, Login etc) - here's our website so you can see what I mean:
https://shop.lakedistrictfarmersarms.com
Do you have any advice on how to change the code to make it align? Thank you!
This is an accepted solution.
If you want the bag centered with the cart text, you can add this to the bottom of your theme.scss.liquid file in your assets folder:
.site-header__cart {
display: flex;
justify-content: flex-end;
align-items: center;
}
.site-header__cart img{
margin-right: 10px;
}
Thank you so much Ninthony, your advice solved it! 🙂
I am having this same issue but I don't have theme.scss.liquid file in my assets folder? Is there another way to bottom align cart icon with logo and search icon?
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