How can I replace the cart icon with the word 'cart'?

Solved

How can I replace the cart icon with the word 'cart'?

drew23
Pathfinder
107 0 12

hey,

 

does anyone know how I can change the cart icon to the word "cart" ? 

 

thanks in advance

 

brokenmind.com

pw: test1

 

Accepted Solutions (3)

made4Uo
Shopify Partner
3873 718 1214

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;
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

GemPages
Shopify Partner
5625 1262 1269

This is an accepted solution.

Hello @drew23 ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1679623543532.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1679623564804.png

<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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

infoatcodelab7
Shopify Partner
593 141 156

This is an accepted solution.

@drew23 

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 @!

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3873 718 1214

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;
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
made4Uo
Shopify Partner
3873 718 1214

Can you provide your website?

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

GemPages
Shopify Partner
5625 1262 1269

This is an accepted solution.

Hello @drew23 ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1679623543532.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1679623564804.png

<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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

infoatcodelab7
Shopify Partner
593 141 156

This is an accepted solution.

@drew23 

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 @!

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com