Make Quantity button more opaque and less wide

Store Design
, , , ,

Topic summary

A user working with Shopify’s Dawn theme seeks to make the quantity input button narrower and its borders more opaque, without affecting other form fields like contact forms in Theme Settings.

Two solutions were provided:

  1. First approach: Insert CSS code in the theme.liquid file above the </head> tag to modify the quantity button styling.

  2. Second approach (more detailed):

    • Navigate to Online Store > Theme > Edit Code
    • Open base.css (or theme.css, custom.css)
    • Add CSS targeting quantity-input.quantity to adjust width (suggested: 110px)
    • Modify border opacity using box-shadow with rgba values (suggested: 0.05 opacity)
    • Both values are customizable to user preference

Both solutions include CSS code snippets and visual examples showing the modified quantity button. The discussion appears resolved with actionable implementation steps provided.

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

Please help me making it less wide and the borders more opaque, without affecting other fields like the contact field which are all found on the Theme Settings.

Using Dawn 15 misteri.ca

IMG_0581.jpeg
IMG_0581.jpeg2360×1640 254 KB

IMG_0579.png
IMG_0579.png2360×1640 206 KB

1 Like
2

Hi @MiguelMaya ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1720144118716.png
BSSCommerceHDL_0-1720144118716.png478×564 25.7 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hi @MiguelMaya,

You can follow these steps to make the quantity button less wide and the borders more opaque

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

quantity-input.quantity {
  /* You can change this value to your preference */
  width: 110px !important;
}

quantity-input.quantity:after {
  /* This is the code to make the border more opaque */
  /* You can change the value 0.05 to the opacity of your preference */
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), 0.05);
}

Here is the result

BSSTekLabs_0-1720195467748.png
BSSTekLabs_0-1720195467748.png1318×1246 59 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

1 Like