How to change the button color and font size for "Proceed to Checkout" drawer button

Shopify Discussion

Topic summary

A Shopify Dawn theme 10.0.0 user successfully customized the “Proceed to Checkout” drawer button styling to match their “Add to Cart” button (green background #85b42d, white text #ffffff, 21px font, bold).

Initial Problem:

  • User had already styled the Add to Cart button via base.css
  • Wanted matching font size and color for the checkout drawer buttons (“Proceed to Checkout” and “Continue Shopping”)

Attempted Solution:
Another user suggested adding CSS code to base.css, but this approach didn’t work initially.

Working Solution (via ChatGPT):
The original poster resolved it by adding this CSS to the bottom of base.css:

.cart-drawer .cart__checkout-button {
  background-color: #85b42d;
  color: #ffffff;
  font-size: 21px;
  font-weight: bold;
}

Steps: Online Store > Themes > Actions > Edit code > Assets > base.css > add code at bottom.

The discussion includes screenshots showing the before/after states, though the user declined to share their store URL for privacy reasons.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am using the Shopify Dawn theme 10.0.0 version. I have a code added to my base.css file to make my “ADD TO CART” button bigger and green as shown in attached screenshot (code below).Now I would like to have this same font size and color added to my “Proceed to Checkout” button that pops up whenever the “ADD TO CART” button is clicked as shown in attached screenshot. So How do I change this? Also How do I make the same font and color change to my “Continue to Shopping” button as shown in attached screenshot? I would greatly appreciate your responses, thanks!

product-form [type=“submit”] {

color: #FFFFFF !important;

background-color: #58b42d !important; font-size:21px;

font-weight: bolder !important;

}

Ecomseller2025_0-1712106837636.png
Ecomseller2025_0-1712106837636.png616×230 4.68 KB

Ecomseller2025_1-1712106870310.png
Ecomseller2025_1-1712106870310.png602×914 15.9 KB

Ecomseller2025_2-1712106889726.png
Ecomseller2025_2-1712106889726.png586×1274 15.4 KB

1 Like
2

Hi @Ecomseller2025

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find base.css file
  4. Add the following code at the end of base.css

theycallmemakka_0-1712119051126.png
theycallmemakka_0-1712119051126.png1098×736 449 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Thank you for your response. I tried the steps but it didn’t work, the color of the “PROCEDD TO CHECKOUT” button still shows up as below. Please advise.

Ecomseller2025_0-1712155686446.png
Ecomseller2025_0-1712155686446.png982×318 26 KB

4

Can you provide link to the store?

5

sorry I can’t, due to personal reasons.

6

@Ecomseller2025 you can send it to me via personal mesage.

7

For anyone facing this issue, I was able to resolve it myself using ChatGPT. The solution is as below from ChatGPT, it worked!

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit and click Actions > Edit code.
  3. In the left sidebar, under the “Assets” folder, look for the base.css file.
  4. Click on the base.css file to open it for editing.
  5. Scroll to the bottom of the file and add this code: .cart-drawer .cart__checkout-button {
    background-color: #58b42d; /* Change button background color /
    color: #ffffff; /     Change button text color /
    font-size: 21px; /     Change button font size /
    font-weight: bold; /     Make button text bold */
    }