Dawn- How To Remove Quantity Selector Outline Template On Product Page

Store Design

Topic summary

A user wants to modify the quantity selector on their Shopify Dawn theme product page by removing the black outline while keeping the grey border.

Initial Solution:

  • Add CSS code to theme.liquid before the </body> tag
  • Use box-shadow: unset !important; on .quantity:after and .quantity:before selectors
  • This removes the unwanted black outline

Follow-up Request:
The user asks how to:

  • Make the quantity selector smaller
  • Position the +/- buttons closer to the number input

Additional Customization:
A second CSS solution is provided to:

  • Reduce the overall width of the quantity selector using calc() functions
  • Adjust button width with custom calculations
  • Modify input padding to 3px for tighter spacing

Both solutions involve adding custom CSS to the theme.liquid file. The discussion appears resolved with working code snippets provided.

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

Iā€™m trying to take away the original black outline of the quantity selector and just leave the grey outline around it.

store link: https://80f465-18.myshopify.com/products/test%20%20%20%20%20%20%20////%20%20

passcode: saydia

2

Hello @IllIlIl1

You can add code by following these steps

  1. Go to Online Store ā†’ Theme ā†’ Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.quantity:after, .quantity:before { box-shadow: unset !important; }

niraj_patel_0-1725166399197.png
niraj_patel_0-1725166399197.png874Ɨ402 11.5 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Good Solution.

1 Like
4

Thanks, is there also any way to bring the -,+ icons closer to the number of the quantity selector, as well as make it a little smaller?

5

You can add code by following these steps

  1. Go to Online Store ā†’ Theme ā†’ Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.quantity { width: calc(12rem / var(--font-body-scale) + var(--inputs-border-width)* 2) !important; } .quantity__button { width: calc(5rem / var(--font-body-scale)) !important; } .quantity__input { padding: 3px !important; }

niraj_patel_0-1725167757377.png
niraj_patel_0-1725167757377.png727Ɨ190 3.18 KB

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.