Change Checkout Button Font Size and Padding in Dawn

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

A user seeks to modify the font size and padding of the checkout button on the cart page in Shopify’s Dawn theme.

Initial Suggestion:

  • Navigate to theme → Edit code → Assets folder
  • Locate theme.scss.liquid file
  • Add CSS targeting .cart__checkout-button with custom padding and font-size values
  • Test changes in a theme copy before applying to live site

Example CSS provided:

.cart__checkout-button {
  padding: 10px 20px;
  font-size: 18px;
}

Working Solution:
The original poster found an alternative approach that worked:

  • Add custom CSS code directly in theme.liquid file above the </head> tag
  • Access via: Online Stores → Themes → Actions → Edit code → click on theme.liquid
  • Padding format follows: top, right, bottom, left

The discussion is resolved with the user sharing their successful method for others facing the same issue.

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

Hello folks,

I would like to learn how to change the font size and padding of the checkout button on the cart page.

Theme is Dawn.

I appreciate your answers! :slightly_smiling_face:

Best regards,

Dominik

2

Hey Dominik! @Spur_tech

Thanks for your question and you have reached the German community here but we can chat in English, that’s no problem! :wink:

The following should only be tested in a theme copy before implementing it in the live theme:

To change the font size and padding of the checkout button on the cart page in the Shopify Dawn theme, go to your theme → “Edit code” and navigate in the left-hand side navigation to the “Assets” folder. Find the “theme.scss.liquid” file and look for the styles for the checkout button and add the CSS code to change the font size and padding as desired. Save the changes and check the cart page to see the updated checkout button.

Example CSS code:

.cart__checkout-button {
  padding: 10px 20px;
  font-size: 18px;
}

Customizing the theme code may impact your site’s page speeds and functionality, as well as exclude the theme from the theme updates. So it is recommended to backup your theme code and test the changes in a development environment before applying it to your live site.

3

I figured it out. @Gabe solution unfortunately didn’t work for me. Still thank you for trying to help.

Here is what works:

Add this code to your theme.liquid above the

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

For anyone that wants to change the padding, it is formatted like this:
padding: top, right, bottom, left