Quantity Button Dawn Theme

Shopify Discussion

Topic summary

A user needed help resizing the quantity button on their product page in the Dawn theme. Despite attempting to add custom code, no changes were taking effect.

Solution provided:

  • Modify the Custom CSS section or base.css file
  • Adjust the .product-form__submit width property (controls Add to Cart button width on desktop)
  • Modify the .quantity width value (controls quantity field width)

Outcome:
The CSS code snippet successfully resolved the issue. The user confirmed the solution worked perfectly.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’ve got some issues, I’d like to manage the size of my quantity button on my product page but everytime I try to add some code to change it, nothing is changing.

Does anyone know how to do this, please?

Website: https://pqd9ge-cs.myshopify.com/products/purifying-toner

1 Like
2

In your Custom CSS section on the product page you should be able to update these. Otherwise these classes can be found in the base.css.

@media screen and (min-width: 768px) {
    .product-form:not(#md-sticky-atc .product-form) .product-form__submit {
        width: 59% !important; /* change this percentage to change the width of the add to cart button */
    }
}

.quantity {
    width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width)* 2) !important; /* change the 17rem to change the width of the quantity field */
}
1 Like
3

Thanks it’s perfect