Decrease Letter Spacing on Checkout Button - Dawn Theme

Store Design

Topic summary

Goal: reduce the letter spacing on the checkout button in the Dawn theme.

Proposed solutions:

  • Add CSS targeting the checkout button: .cart__checkout-button { letter-spacing: 0 !important; }.
  • Alternative for the cart drawer context: .cart-drawer .cart__checkout-button { letter-spacing: 0; }.

Implementation steps:

  • Online Store → Theme → Edit code.
  • Open Assets → base.css.
  • Paste the chosen CSS at the bottom of the file and save.

Notes:

  • “letter-spacing” is a CSS property that controls the space between characters.
  • “cart-drawer” refers to the slide-out cart UI in Dawn; use the drawer-specific selector if the button appears there.
  • The first snippet uses !important to override existing styles; the second relies on more specific targeting without !important.

Context:

  • The original poster shared a screenshot and store preview for reference.

Status:

  • No confirmation of results from the requester; the discussion appears open with actionable guidance provided.
Summarized with AI on February 12. AI used: gpt-5.
1

Hey, I would love to decrease letter spacing on the checkout button. Does anyone know how to code this?

Thanks in advance

brokenmind.com PW: TESTX

Screenshot_48.png
Screenshot_48.png815×1206 83.5 KB

1 Like
2

Hi, @drew23

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
.cart__checkout-button {
    letter-spacing: 0 !important;
}
1 Like
3

@drew23

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.cart-drawer .cart__checkout-button {letter-spacing: 0;}
1 Like