Change font size and make uppercase font in button and change button size itself on product page

Technical Q&A

Topic summary

A user seeks to modify product page buttons by making text uppercase, adjusting font size, and changing button dimensions.

Solutions Provided:

Two community members offered CSS-based approaches:

  • ZestardTech’s method: Add CSS to base.css targeting .product-form__submit with text-transform: uppercase and custom font-size/padding values

  • Sanjay25’s method:

    • Add uppercase class at line 59 in buy-buttons.liquid snippet file
    • Modify base.css with CSS targeting .product-form__submit and .shopify-payment-button__button for font size adjustments

Outcome:

The original poster confirmed the solution worked successfully. Both approaches involve editing theme code files through the Shopify admin panel (Online Store → Themes → Edit code). Screenshots were provided to illustrate the implementation steps and expected results.

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

Hello,

we are looking to change font size and make the all letters in the button to uppercases. Also we are looking for code to change button size both buttons on product page. Can anyone help?

Screenshot 2023-03-21 at 13.39.55.png
Screenshot 2023-03-21 at 13.39.55.png1282×1394 126 KB

page url: www.mism.store

Thank you!

Best,

team mism

1 Like
2

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the bottom of the file:

.product-form__submit {
    text-transform: uppercase;
    font-size: 18px;
}
.shopify-cleanslate .h7OYsWHrW5495r9beh2n {
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-transform: uppercase;
    font-size: 18px!important;
}

ZestardTech_0-1679403342881.png
ZestardTech_0-1679403342881.png1331×312 43.6 KB

3

Hey Monomgroup,

Please follow the below steps to make font uppercase in Add to cart button.

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

  1. Go to Snippet

  2. Open buy-buttons.liquid snippet file

  3. Go to 59 line Number and add this class => uppercase

If you are still unclear, refer the below screenshot

Screenshot: https://d.pr/4SPiTp

To change font size of the both button, please follow the below steps

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

  1. Go to Asset

  2. Go to base.css

  3. Add the below code in bottom of the file (If still unclear for you please refer the screenshot that I have added)

.product-form__submit, .shopify-payment-button__button{
text-transform:uppercase;
font-size:1.8rem !important;
}

Screenshot: https://d.pr/sHwpVt

After making this change, you can get this result : https://d.pr/i/8DiGOp

Thanks!

4

Thanks, that worked!

1 Like