Shopify themes, liquid, logos, and UX
Hi! i tried copying a code to add the texts under these header icons, however it made the cart icon so small and the texts are not aligned. Please help how to fix cart icon size and align the texts below. thank you
Shop url - https://greenpaxusa.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
Just like to confirm you like to move only on the far right? or also the left.
If you like to equally move them try this one.
You can add this code before the </style> tag.
Or replace on this code.
<style>
@media screen and (min-width: 768px) {
.header__icons .header__icon--cart:after {
content: "Cart";
bottom: 2px !important;
}
a#cart-icon-bubble svg.icon {
transform: scale(1.9);
margin-top: -1px;
}
}
.header__icons {
gap: 10px;
}
header.header.header--middle-left.header--mobile-center {
max-width: 100%;
}
</style>
And Save.
Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hi @GreenPax
Try this one.
<style>
@media screen and (min-width: 768px) {
.header__icons .header__icon--cart:after {
content: "Cart";
bottom: 2px !important;
}
a#cart-icon-bubble svg.icon {
transform: scale(1.9);
margin-top: -1px;
}
}
</style>
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thank you!! and one last if you could me with this also, Do you know how to move the account and cart just a bit to the right just so it doesnt overlap with the search bar?
This is an accepted solution.
Just like to confirm you like to move only on the far right? or also the left.
If you like to equally move them try this one.
You can add this code before the </style> tag.
Or replace on this code.
<style>
@media screen and (min-width: 768px) {
.header__icons .header__icon--cart:after {
content: "Cart";
bottom: 2px !important;
}
a#cart-icon-bubble svg.icon {
transform: scale(1.9);
margin-top: -1px;
}
}
.header__icons {
gap: 10px;
}
header.header.header--middle-left.header--mobile-center {
max-width: 100%;
}
</style>
And Save.
Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
you're the best thank you!!
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024