Change Checkout Button Font Size and Padding in Dawn

[Spur_tech]

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! 🙂

Best regards,

Dominik

[Gabe]

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! 😉

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.

[Spur_tech · Accepted solution]

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 </head>

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

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.cart__checkout-button {
padding: 20px 30px 22px 30px;
font-weight: bold;
font-size: 17px;
}
</style>

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