Button Formatting

Store Design

Topic summary

A user is experiencing a visibility issue with a button in their Shopify store’s add-to-cart popup—the dark green button color makes the text unreadable.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • Code modification approach: Add CSS to base.aio.min.css file to change button text color to white using .button.button--primary .button--full-width { color: white !important; } or similar selectors

  • Theme customization approach: Navigate through Shopify Admin → Online Store → Themes → Customize to find Cart/Pop-up settings or Theme Settings → Colors, where button colors can often be adjusted without coding

  • Manual CSS editing: If theme options don’t exist, edit CSS files directly by adding custom color rules for the cart popup button

Status: The issue appears resolved, as the original poster thanked the community for their help. Several responders requested the store URL for more specific troubleshooting, though the problem was addressed through general solutions.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Can anyone advise where I edit the colour for the button (in the image that is dark green) as currently you can’t see the text for this button?

The button appears in a pop up when something is added to cart.

Thank you.

Screenshot 2025-05-08 at 11.00.44.png
Screenshot 2025-05-08 at 11.00.44.png780×728 33.6 KB

1 Like
2

Hi @Corinne33

pls share the store url & password (if applicable) then I will check & give you the solution

3

@Corinne33 hey, thanks for posting here.
can you please share the link to inspect it, thanks.

4

Hello @Corinne33
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> base.aio.min.css
add this code at the end of the file and save.

.button.button--primary.button--full-width {
color: white !important;
}

result

24.png
24.png512×413 20.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
5

Hi @Corinne33 ,

To change the text color of the checkout button. You need to add the below-mentioned code in base.aio.min.css at the very bottom

button.button.button--primary.button--full-width {
    color: #fff;
}

If that works for you. Don’t forget to like and accept the solution

Thanks!

6

Hi Corinne33
How to Edit the Button Color in the Cart Pop Up

Go to your Shopify Admin

Click on Online Store > Themes.

Find your active theme

Click Customize on your current theme

Look for the Cart or Pop Up Settings

Inside the theme editor check if there’s a section called Cart Cart Drawer or Pop up settings

Many themes allow you to directly edit button colors in these sections without touching code.

If you can’t find it easily

Click on Theme Settings usually at the bottom left corner

Go to Colors.

Look for Button colors sometimes called Primary Button or Cart Button and adjust both the button background color and the text color

If the Theme Doesn’t Have an Option Manual way

Go back to Online Store > Themes > Actions > Edit code

Open the file called base.css theme.css or sometimes component cart.css depends on your theme

Add this at the bottom

css

Copy

Edit

  • Change cart pop-up button color *

cart-popup .btn

background color #yourcolorcode * Example #ffffff for white *

color #yourtextcolorcode * Example #000000 for black *

Replace #yourcolorcode and #yourtextcolorcode with the colors you want you can use a color picker like color.adobe.com if you need help choosing

Save, then refresh your store and test it

7

Thank you

8

Happy to help-you…!!!