Here’s a preview link to my product page:
https://4hof4tawjfnjewzc-8321990727.shopifypreview.com/products/blue-raspberry-preworkout
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.
Hi @skram ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- 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.
sorry for that issue and thanks for all details can you try this code
- Go to Online Store->Theme->Edit code
- Asset->/base.css->paste below code at the bottom of the file.
.quantity {calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2);}
It worked great. I wanted to increase the size and increased this from 14 to 16 and it was perfect.
Thanks
thanks for update if you need more let me know
Hey! Can you also give a code for decreasing the height of the quantity box? Width worked for me! Wanna make it shorter too
yes, please share store url
(pw: ayiesh)
can you please share screenshot