Change Quantity button to round corners and size

MiguelMaya · ‎07-03-2024

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

BSS-TekLabs · ‎07-04-2024

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.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

MiguelMaya · ‎07-03-2024

Quantity number font size too.

BSSCommerce-B2B · ‎07-03-2024

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:

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dan-From-Ryviu · ‎07-03-2024

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

BSS-TekLabs · ‎07-04-2024

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.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

MiguelMaya · ‎07-04-2024

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

Change Quantity button to round corners and size

Change Quantity button to round corners and size

Community Blog Articles