Make Quantity button more opaque and less wide

Solved

Make Quantity button more opaque and less wide

MiguelMaya
Tourist
46 0 4

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.jpegIMG_0579.png

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
668 186 217

This is an 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

BSSTekLabs_0-1720195467748.png

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

Shanonkoemas
Tourist
6 0 0

Hello there,

I can help you.

BSSCommerce-HDL
Shopify Partner
1134 392 460

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: 

BSSCommerceHDL_0-1720144118716.png

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 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-TekLabs
Shopify Partner
668 186 217

This is an 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

BSSTekLabs_0-1720195467748.png

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency