How can I modify the checkout button color and text in Dawn Theme 7.0.1?

Store Design

Topic summary

A user seeks to customize the checkout button on their cart page in Dawn Theme 7.0.1, specifically wanting to change the button color and make the text bold.

Solution Provided:

  • Add CSS code to the bottom of base.css file (Online Store > Themes > Edit code > Assets)
  • Initial code changes button background color and makes text bold:
    button#checkout {
  font-weight: bold;
  background: green;
}

Follow-up Issue:
After implementing the initial solution, a black outline appeared on the button.

Additional Fix:
To remove the unwanted outline, add CSS targeting the button’s after pseudo-element to eliminate the box-shadow.

The discussion includes before/after screenshots showing the visual changes. The issue appears resolved with both customizations successfully applied.

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

Hi, how can I change the color and make the Checkout button text bold on my cart page checkout button? I’m using Dawn Theme 7.0.1

From this

Capture.JPG

to this (disregard the size difference)

asos.JPG

2

@aptelht

button#checkout {
    font-weight: bold;
    background: green;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

2 Likes
3

It worked, how do I remove the black outline though?

Capture.JPG
Capture.JPG515×185 6.48 KB

4

@aptelht

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    box-shadow: none;
}

use this css