FROM CACHE - de_header
Gelöst

Change Checkout Button Font Size and Padding in Dawn

Spur_tech
Besucher
2 1 0

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

1 AKZEPTIERTE LÖSUNG

Spur_tech
Besucher
2 1 0

Erfolg.

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

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2

Gabe
Shopify Staff
16807 2663 3936

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Spur_tech
Besucher
2 1 0

Erfolg.

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