Product Page Design

[harmoniefeuer]

Hello! I'm using a Dawn theme for my store.

On the product page, I want to make the Add to Cart (in my case "In den Warenkorb legen") button bigger, bold and all letters in CAPS.

My store: harmoniefeuer.com

[Guleria]

Hello @harmoniefeuer ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.product-form__submit {
    text-transform: uppercase !important;
    font-weight: 800 !important; 
    line-height: 3rem;
}

Regards
Guleria

[devcoders]

Hello @harmoniefeuer 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.product-form__submit {
text-transform: uppercase !important;
font-weight: 800 !important;
line-height: 3rem;
}

[Moeed]

Hey @harmoniefeuer 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__submit {
    font-weight: bold !important;
    text-transform: uppercase !important;
    line-height: 5rem !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GTLOfficial]

Hello @harmoniefeuer 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.button span {
text-transform: uppercase;
font-weight: bolder !important;
}
#ProductSubmitButton-template--24098054144343__main {
line-height: 7rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[harmoniefeuer]

That helped a bit, but my letters are not as big as in your picture. Can i make my letters bigger sized?

[Dan-From-Ryviu]

Hi @harmoniefeuer 

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Themes settings 

.product .product-form__submit {
padding: 3rem;
font-weight: 700;
}
.product .product-form__submit span { font-size: 1.8rem; }