Dawn theme | I can't change the height of Buy it now/ Add to card buttons

Store Design
,

Topic summary

Goal: adjust the height and spacing of “Add to cart” and “Buy it now” buttons in the Dawn theme; initial CSS changed width but not height.

What was tried: a rule setting .product-form__submit and .shopify-payment-button to width: 90% and height: 70%; only width applied. The user also wants to reduce the gap between the two buttons.

Proposed solutions:

  • Add custom CSS in theme assets (base.css/style.css/theme.css) or via theme.liquid.
  • Increase visual height using padding on both buttons:
    • .product-form__submit { padding-top/bottom: 20px; }
    • button.shopify-payment-button__button–unbranded { padding-top/bottom: 20px; }
  • Add spacing between buttons with margin-bottom on .product-form__submit (e.g., 2rem or 5px).
  • Normalize button size using min-height: 3rem on button selectors; set padding as needed. Screenshots show these CSS changes working.

Open point (latest update): the user asks how to resize width; replacing min-height with min-width did not work. No confirmed width solution yet.

Status: partial guidance provided (padding/margin/min-height). The height “why” is not explicitly answered, and width resizing remains unresolved.

Summarized with AI on January 9. AI used: gpt-5.
5

Hi @collins276

Im not sure what do you like to achieve. You like to change the space between the two buttons? or change the heights? But anyway you can check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

/* This is to change the space between two buttons. */
.product-form__submit {
    margin-bottom: 5px;
}
/* And this is to increase/decrease the size of the buttons. */
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
    padding: 0px;
}
.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
    min-height: 3rem;
}

And save.

Result:

Made4uoRibe_0-1704736215820.png
Made4uoRibe_0-1704736215820.png692×365 6.03 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like