How can I alter the color of a specific button in my cart?

[UL1]

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.

[Made4uo-Ribe · Accepted solution]

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;
}

[Made4uo-Ribe · Accepted solution]

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;
}

[UL1]

It doesn't work 

[Made4uo-Ribe]

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!

[UL1]

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

[Made4uo-Ribe]

I know what you mean. 

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. 😅

[UL1]

ok so what is the solution ? 

[Made4uo-Ribe · Accepted solution]

I've already provide the solution. 

And this is for the bubble cart.

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

And Save. 

Result:

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!

[UL1]

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

[PageFly-Oliver]

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

[UL1]

It doesn't work

[PageFly-Oliver]

Can you share screenshots of the position-added code?

[UL1]

[PageFly-Oliver]

Hi,

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