How to change the color of this button?

UL1
Excursionist
43 0 16

URL: https://60338a.myshopify.com/

Hi

I'm facing an issue because color of the button that appears when I'm adding something to the cart is white ( same as the color of the font), how to change the color only for the specific button. 

I'm sending an image of which button i mean.

how to 102.jpg

Replies 13 (13)
Made4uo-Ribe
Shopify Partner
4094 941 1147

Hi @UL1,

 

Please follow the instruction below to change the color of your button. 

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. 
  • At the very bottom of the file, please add the code below, and then SAVE

To change the background color of your button:

NOTE: Change "red" to the color you want

 

.cart-notification__links button.button.button--primary.button--full-width {
    background: red;
}

 

To change the text color of your button:

NOTE: Change "red" to the color you want

 

.cart-notification__links button.button.button--primary.button--full-width {
    color: red;
}

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


UL1
Excursionist
43 0 16

It doesn't work 

Made4uo-Ribe
Shopify Partner
4094 941 1147

Oh, Can you try this one again?

Same Instruction. 

 

#cart-notification-form > button {
    color: red !important;
}

 

And Save. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


UL1
Excursionist
43 0 16

Maybe i'll send u another screen of what i mean.

1440.png

Made4uo-Ribe
Shopify Partner
4094 941 1147

I know what you mean. 

Made4uoRibe_0-1698863737169.png

Made4uoRibe_1-1698863811315.png

Your cart bubble also blank. I wont give a code if I dont know where is it and what is it. We cant edit it without knowing what we are editing. 😅

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


UL1
Excursionist
43 0 16

ok so what is the solution ? 

Made4uo-Ribe
Shopify Partner
4094 941 1147

I've already provide the solution. 

And this is for the bubble cart.

 

.cart-count-bubble {
    color: black !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1698875373250.png

If all the code still not all working, I advice that hire a developer to clean your base.css file. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


UL1
Excursionist
43 0 16

I have checked on my shopify mobile app and it works but it doesn't work on the desktop view.

PageFly-Oliver
Navigator
479 92 88

Hi @UL1 ,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
#cart-notification-form button{
color:black 
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

UL1
Excursionist
43 0 16

It doesn't work

PageFly-Oliver
Navigator
479 92 88

Can you share screenshots of the position-added code?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

UL1
Excursionist
43 0 16

how to 25.png

PageFly-Oliver
Navigator
479 92 88

Hi,

I think you show push code outside {% if template == 'index' %}{% endif %}

PageFlyOliver_0-1699409614352.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.