Dawn Theme - Decrease Width of Quantity Input Box

Store Design

Topic summary

Goal: adjust the size of the quantity input box in the Shopify Dawn theme on product pages.

A working approach was shared: add CSS in base.css to set .quantity__button width to 25px and .quantity width to 100px (via Online Store → Theme → Edit code → Assets → base.css). This resolved width changes for users.

An alternative method proposed using CSS calc() on the .quantity selector to control sizing. One user confirmed success by increasing a numeric value (from 14 to 16) to enlarge the box.

A new request focuses on decreasing the height of the quantity box. The helper asked for the store URL and a screenshot; the user provided a URL and password, and a screenshot is now requested to proceed.

Outcomes: width reduction/increase appears solved with CSS edits. The height adjustment is pending further details (screenshot) and remains unresolved.

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

Here’s a preview link to my product page:
https://4hof4tawjfnjewzc-8321990727.shopifypreview.com/products/blue-raspberry-preworkout

1 Like
2

Hi @skram ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.product__info-wrapper .quantity__button {
    width: 25px !important;
}

.product__info-wrapper .quantity {
    width: 100px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@skram

sorry for that issue and thanks for all details can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
.quantity {calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2);}
4

It worked great. I wanted to increase the size and increased this from 14 to 16 and it was perfect.

Thanks

5

@GSK

thanks for update if you need more let me know

6

Hey! Can you also give a code for decreasing the height of the quantity box? Width worked for me! Wanna make it shorter too

1 Like
7

@Julia777

yes, please share store url

8

wwww.aeteriuswear.com

(pw: ayiesh)

1 Like
9

@Julia777

can you please share screenshot