How can I increase the add to cart button height in Sense Theme?

Store Design

Topic summary

Goal: Increase the “Add to cart” button height in the Shopify Sense theme.

  • Initial guidance: Add a CSS rule targeting the button (selector: .product-form__buttons button) with a set height in the theme’s CSS. Placing code in theme.liquid and base.css did not show changes.
  • Working fix: Append a CSS rule in base.css targeting .product-form__submit.button and set a larger height (suggested 60px). The store owner confirmed success and increased the height to 80px.
  • Follow-up request: Increase the button’s text size. Solution: In the same base.css selector (.product-form__submit.button), add a font-size value (e.g., 30px), adjustable as needed.

Key terms:

  • CSS selector: A way to target specific elements for styling.
  • base.css: The main stylesheet file in Shopify themes where custom styles can be added.

Outcome: Resolved. Height and text size of the “Add to cart” button can be controlled via CSS in base.css using the .product-form__submit.button selector. No remaining open questions.

Summarized with AI on February 9. AI used: gpt-5.
1

Looking to increase the height of the add to cart button.

If someone has the code to add that would be awesome!

Website: https://pamperpetsco.com/products/the-couchie%E2%84%A2

2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regarding your concern to increase the height of the add to cart button. You can follow the step below

Step1: Online store > Themes > Edit code > search for css file and select the theme css file

Step2: Paste the code to the end of the file

.product-form__buttons button{
height: 40px;

}

Hope this helps. And you can change the value of 40px to match with your requirements.

Best regards,

PageFly

3

What file specifically? I tried “theme.liquid” and “base.css” and both of these didn’t appear to work :disappointed_face:

4

hi @Nato0201 sorry for the late response, can you try with this in the end of base.css

.product-form__submit.button{
height: 60px;
}

i increase more the px for you to see the changes

5

Awesome thats it! I pushed it up to 80px.

Thank you so much!

6

Would you know how to increase the text size within this add to cart button?

7

@Nato0201 yes, please update the code to :

.product-form__submit.button{
height: 60px;
  font-size: 30px;
}

with the same file
and also, please change the 30px into the value you want