How can I change the color of my checkout drawer button?

Technical Q&A

Topic summary

A user reports that their checkout drawer button is barely visible due to a color issue.

Problem:

  • The checkout button lacks sufficient contrast and is difficult to see
  • Issue affects the cart/checkout drawer interface

Proposed Solution:
Multiple users provided the same CSS fix:

  1. Navigate to: Online Store → Theme → Edit code
  2. Open the base.css file
  3. Add CSS targeting the checkout button (.drawer__footer #CartDrawer-Checkout or #checkout)
  4. Apply background: #000; to change the button color to black

Current Status:

  • The user shared their store URL (galvnize.com) for further assistance
  • Solution involves a simple CSS color override
  • Discussion remains open for implementation confirmation
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hello I need help regarding my check out drawer button color as you can see its barely visible.

And you can see my buy it now button in the same.

Thanks

WRXANDY_0-1690585473714.png
WRXANDY_0-1690585473714.png1554×929 120 KB

2

Hello @WRXANDY ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.drawer__footer #CartDrawer-Checkout {
    background: #000;
}

Thanks

3

@WRXANDY

Please share your store URL!

Thanks!

4

https://galvnize.com/cart

5

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.drawer__footer #CartDrawer-Checkout, #checkout {
    background: #000;
}
1 Like