Resize quantity selector button in checkout page Dawn theme 15v

Shopify Discussion

Topic summary

A user seeks to reduce the size of quantity selector buttons on the checkout page in Shopify’s Dawn theme version 15.

Initial Solutions Attempted:

  • GTLOfficial provided CSS code targeting .quantity class with mobile media query (max-width: 767px), adjusting width and min-height properties
  • User reported this solution did not work

Alternative Solution:

  • Sweans offered a different approach using @media screen and (max-width: 640px)
  • Targets both .quantity and .quantity__button classes
  • Adjustable parameters include:
    • Width calculation (default 11rem)
    • Min-height (default 4rem + border width)
    • Button width (default 3.5rem)
  • Code should be added to base.css file via Online Store → Themes → Actions → Edit code

Status: The discussion remains open with no confirmation whether the second solution resolved the issue. The user can adjust the numerical values (11, 4, 3.5) based on desired button size.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hiiii

I want to resize quantity selector button in checkout page shopify dawn theme 15v

Please suggest me a way!

check the screenshot

my store link—http://5a3cf5-fc.myshopify.com
WhatsApp Image 2024-08-23 at 13.14.27.jpeg

1 Like
2

HEY

I want to decrease the size of quantity selector button.

3

Hello @ctal37
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.quantity {
@media (max-width: 767px) {
& {
width: calc(67px/ var(--font-body-scale) + var(--inputs-border-width)* 2);
min-height: calc((var(--inputs-border-width)* 2) + 2rem);
}
}
}

result

12.png
12.png426×510 46.6 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

hey its not working. not changing anything at all

5

heyy this code is not working not changing anything at all

6

Hi @ctal37 ,

To reduce the quantity selector button size, please add the following styles for devices under screen width 640px (max-width value can be reduced based on your required screen size).

Go to your Online Store >> Themes >> Actions >> Edit code >> base.css >> Open it and paste the code at the end of the file.

@media screen and (max-width: 640px) {
     .quantity {
          width: calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2); //adjust value '11' as you need
          min-height: calc((var(--inputs-border-width) * 2) + 4rem); //adjust value '4' as you need
     }
     .quantity__button {
          width: calc(3.5rem / var(--font-body-scale));  //adjust value '3.5' as you need
     }
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

1 Like