Change Quantity button to round corners and size

Solved

Change Quantity button to round corners and size

MiguelMaya
Tourist
46 0 4

I’d like changing the Quantity button to round corners as the variant buttons, without changing the contact form fields to round corners. Its the same setting for both in the Theme so some coding is needed.

 

I also want the quantity button to be the same size as the variant buttons.

 

Using Dawn Theme misteri.ca

 

IMG_0580.jpegIMG_0579.png

Accepted Solution (1)

BSS-TekLabs
Shopify Expert
391 123 131

This is an accepted solution.

Hi @MiguelMaya,

You can follow these steps to make the quantity button the same size as the variant buttons and rounded

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 {
  min-height: 38px !important;
}

quantity-input.quantity:before {
  border-radius: 40px !important;
}

quantity-input.quantity:after {
  border-radius: 40px !important;
}

quantity-input.quantity input {
  /* You can change this value to fit your preference */
  font-size: 20px;
}

 

 

4. Open Sales Channels > Online Store > Select your current theme > Customize

5. Open Theme Settings > Buttons > Corner radius

6. Set the value for the corner radius back to 0px to set all other buttons to default

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 5 (5)

MiguelMaya
Tourist
46 0 4

Quantity number font size too.

BSSCommerce-B2B
Shopify Expert
551 110 133

Hi @MiguelMaya,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

 

.product quantity-input.quantity {
    min-height: 38px !important;
}
.product .quantity__input {
    font-size: 14px;
}

 

Here is result: 

BSSCommerceB2B_1-1720059286251.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.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Please go to Online Store > Themes > Edit code, open theme.liquid file, add this code after <head> to make fields on contact page not round 

<style>
.contact .field:after {
border-radius: unset !important;
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSS-TekLabs
Shopify Expert
391 123 131

This is an accepted solution.

Hi @MiguelMaya,

You can follow these steps to make the quantity button the same size as the variant buttons and rounded

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 {
  min-height: 38px !important;
}

quantity-input.quantity:before {
  border-radius: 40px !important;
}

quantity-input.quantity:after {
  border-radius: 40px !important;
}

quantity-input.quantity input {
  /* You can change this value to fit your preference */
  font-size: 20px;
}

 

 

4. Open Sales Channels > Online Store > Select your current theme > Customize

5. Open Theme Settings > Buttons > Corner radius

6. Set the value for the corner radius back to 0px to set all other buttons to default

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
MiguelMaya
Tourist
46 0 4

Thanks again for another clear and straightforward solution. Can you tell me how to reduce the width a little? Its too wide currently.