All things Shopify and commerce
Hi Community!
I am looking for some help with moving the icons (Search, Account & Cart) to right most corner. This should be fairly easy so i can have more room for the menu, but that doesn't seem to be the case.
I have attached a screenshot of what i am trying to accomplish.
I hope someone can please help me with this?
Gracias!
Femmi
Solved! Go to the solution
This is an accepted solution.
Hey @Femmi
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.header__icons {
left: 200px !important;
position: relative !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey can you send me a link to your store so I can take a closer look.
This can probably be fixed with some custom CSS (code to style the header)
This is an accepted solution.
Hey @Femmi
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.header__icons {
left: 200px !important;
position: relative !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi Moeed, That did the trick, Thank you!
I have another ask though..and hoping its a small change!
I would like to change the Bag icon for checkout to a Cart icon.
Is this icon somewhere i can change? For the life of me, i am not able to locate this and really appreciate your help!!
Thanks much!
Femmi
Hey @Femmi
Yes, it is possible and it requires custom liquid coding and is not only possible through CSS. If you're not familiar with coding then I suggest to hire a Shopify developer who can help you out.
Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Best Regards,
Moeed
Hey @Femmi
Try this css
<style>
@media screen and (min-width: 990px){
.header:not(.drawer-menu).page-width {
padding-right: 0 !important;
}
}
</style>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025