How to match these button styles?

Technical Q&A

Topic summary

Goal: Make all “Add to cart” (and related) buttons match the large red home-page button—Roboto Condensed Black, italic, all caps.

What was done:

  • CSS provided to style product “Add to cart” buttons via theme CSS (base.css/theme.css/styles.css): set font-size: 22px, italic, font-weight: 900. Screenshot shows it applied.
  • A suggestion to insert code in theme.liquid before was posted, but no actual code snippet was included.
  • Upon request to extend styling to the cart “Checkout” button (and “Pay now”), CSS was provided for button[name=“checkout”] with the same font properties. Screenshot shows it working for the checkout button.

Gaps/notes:

  • The font family (Roboto Condensed Black) and uppercase transformation were not explicitly set in the provided CSS (no font-family or text-transform: uppercase).
  • Styling for the final “Pay now” button at checkout was requested but not addressed; Shopify checkout theming may be limited depending on plan.

Status: Partially resolved. Product and cart checkout buttons styled; final checkout (“Pay now”) and full font/uppercase enforcement remain open.

Summarized with AI on December 29. AI used: gpt-5.
1

I want every “add to cart” button to look like the big red button on my home page that says TRY A SAMPLE: https://empiricalwater.com/

Other buttons are found on any product you click on this page: https://empiricalwater.com/collections/all

they all need to be the most bold version of the font known as roboto condensed “black” italic, and all caps.

Thanks

2

Hi @empiricalarby ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

button.product-form__submit.button {
    font-size: 22px !important;
    font-style: italic !important;
    font-weight: 900 !important;
}

Here is result:

BSSTechVenture_0-1716011203992.png
BSSTechVenture_0-1716011203992.png1916×878 211 KB

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you :heart_eyes:

1 Like
3

Hi @empiricalarby
Please put this code in theme.liquid before body closing tag

Thanks!

1 Like
4

Thank you, can you apply this to the “Check out” button also for when product is in cart? And also the Pay now button at end of checkout.

Thank you

5

Thank you, can you apply this to the “Check out” button also for when product is in cart? And also the Pay now button at end of checkout.

6

Hi @empiricalarby , Pls insert this code to your file css :

button[name="checkout"] {
    font-size: 22px !important;
    font-style: italic !important;
    font-weight: 900 !important;
}

Here is result:

BSSTechVenture_0-1716012310044.png
BSSTechVenture_0-1716012310044.png1918×876 180 KB

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you :heart_eyes:

1 Like