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
Topic summary
Goal: make the Dawn theme’s Add to Cart button (“In den Warenkorb legen”) bigger, bold, and all caps on the product page.
What was suggested:
- Edit assets/base.css to style .product-form__submit with text-transform: uppercase, font-weight: 800, and larger line-height (e.g., 3rem). Several replies repeated this approach.
- Use Theme settings > Customize > Custom CSS to add padding and increase text size via:
- .product .product-form__submit { padding: 3rem; font-weight: 700; }
- .product .product-form__submit span { font-size: 1.8rem; }
- Another option targeted .button span for uppercase/bold and a specific ID selector to raise line-height to 7rem.
- One reply suggested adding code in theme.liquid above , but the code block was empty.
Current status: partial success. The button updates worked, but the text isn’t as large as shown in examples.
Next action implied: increase the font size further by raising the value in .product .product-form__submit span { font-size: 1.8rem; } (e.g., to 2rem+), or adjust related spacing (padding/line-height). The thread remains open without a final resolution.
2 Likes
Hello @harmoniefeuer ,
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
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
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;
}
Hey @harmoniefeuer
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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
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; }
That helped a bit, but my letters are not as big as in your picture. Can i make my letters bigger sized?