We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to change text color

Solved

How to change text color

JennMaxwell
New Member
4 0 0

Hi there,

 

Does anyone know how I can change the color of my free shipping nudge text to white instead of black on my site cart? Below is the css for this particular element, but nothing I've tried adding has worked.  Screenshot 2024-07-16 at 6.58.16 PM.png

Thank you in advance!

-------------------------

.shipping-savings-message {
background-color: #9999ff;
border: 3px solid white;
padding: 20px;
text-align: center;
font-family: Poppins;
font-weight: bold;
margin-bottom: 25px;

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

Hi @JennMaxwell 

Please update your code to this

 

 

.shipping-savings-message {
background-color: #9999ff;
border: 3px solid white;
padding: 20px;
text-align: center;
font-family: Poppins;
font-weight: bold;
margin-bottom: 25px;
color: #fff;
}
.shipping-savings-message a {
color: #000; /* change color of continue shopping text */
}

 

Screenshot 2024-07-17 at 08.48.54.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

AnneLuo
Shopify Partner
1381 240 281

Hi, @JennMaxwell 

Add the color to the class

 

.shipping-savings-message {
  color: #fff;
}

 

Result:

AnneLuo_0-1721177575921.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

Hi @JennMaxwell 

Please update your code to this

 

 

.shipping-savings-message {
background-color: #9999ff;
border: 3px solid white;
padding: 20px;
text-align: center;
font-family: Poppins;
font-weight: bold;
margin-bottom: 25px;
color: #fff;
}
.shipping-savings-message a {
color: #000; /* change color of continue shopping text */
}

 

Screenshot 2024-07-17 at 08.48.54.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JennMaxwell
New Member
4 0 0

this worked perfectly!!! thank you SO much!

Sweans
Shopify Partner
429 89 130

Hi @JennMaxwell ,

You can change the text color with the following CSS:

 

.shipping-savings-message,
.shipping-savings-message a {
color: #fff !important;
}

 

 

Result:

 

Sweans_0-1721194132338.png


I hope this helps! If it does, please like it and mark it as a solution!

Thank You,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com