Make Quantity button more opaque and less wide

[MiguelMaya]

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

[BSSCommerce-HDL]

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 </head> tag: 

<style>
.quantity {
 width: calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
}
.quantity:after {
box-shadow: 0 0 0 1px rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}
</style>

Here is result: 

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 😍

[BSS-TekLabs · Accepted solution]

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

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!