Shopify themes, liquid, logos, and UX
hey,
does anyone know how I can change the cart icon to the word "cart" ?
thanks in advance
brokenmind.com
pw: test1
Solved! Go to the solution
This is an accepted solution.
Hi @drew23,
You can change the cart icon to word cart by following the instructions below.
1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Open the base.css file under the Asset folder
3. Add the code at the very end of the file
a#cart-icon-bubble:after {
content: "CART";
}
a#cart-icon-bubble{
text-decoration: none;
line-height: calc(1 + 0.3 / var(--font-body-scale));
text-underline-offset: 0.3rem;
}
a#cart-icon-bubble:hover {
text-decoration: underline;
}
This is an accepted solution.
Hello @drew23 ,
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<style>
.header__icons a#cart-icon-bubble {
position: relative;
}
.header__icons a#cart-icon-bubble svg {
opacity: 0;
width: 60px !important;
}
.header__icons a#cart-icon-bubble:before {
position: relative;
content: 'Cart';
}
.header__icons a#cart-icon-bubble .cart-count-bubble {
left: auto;
right: 0px;
}
</style>
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
This is an accepted solution.
To change cart icon with cart text follow below steps:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > theme.liquid and paste this at the bottom of the file:
<style>
.header__icon--cart .icon{
display: none;
}
.header__icon--cart::after{
content: 'CART';
position: absolute;
font-size: 16px;
font-weight: 700;
}
</style>
Hope this works well.
Best Regards @!
This is an accepted solution.
Hi @drew23,
You can change the cart icon to word cart by following the instructions below.
1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Open the base.css file under the Asset folder
3. Add the code at the very end of the file
a#cart-icon-bubble:after {
content: "CART";
}
a#cart-icon-bubble{
text-decoration: none;
line-height: calc(1 + 0.3 / var(--font-body-scale));
text-underline-offset: 0.3rem;
}
a#cart-icon-bubble:hover {
text-decoration: underline;
}
Can you provide your website?
This is an accepted solution.
Hello @drew23 ,
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<style>
.header__icons a#cart-icon-bubble {
position: relative;
}
.header__icons a#cart-icon-bubble svg {
opacity: 0;
width: 60px !important;
}
.header__icons a#cart-icon-bubble:before {
position: relative;
content: 'Cart';
}
.header__icons a#cart-icon-bubble .cart-count-bubble {
left: auto;
right: 0px;
}
</style>
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
This is an accepted solution.
To change cart icon with cart text follow below steps:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > theme.liquid and paste this at the bottom of the file:
<style>
.header__icon--cart .icon{
display: none;
}
.header__icon--cart::after{
content: 'CART';
position: absolute;
font-size: 16px;
font-weight: 700;
}
</style>
Hope this works well.
Best Regards @!
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