Is it possible to make the corners of the rectangular quantity box rounded?

Shopify Discussion
,
1

Hi all !

At checkout:

  • Is it possible to make the corners of the rectangular quantity box rounded?

  • Is it possible to have the quantity selection box without an outline?

Sem TĂ­tulo.jpg
Sem TĂ­tulo.jpg779Ă—493 13.3 KB

2

Hi @Nykuu

You mean the cart page or checkout page?
I see your screenshot look like cart page.

3

Yes, it’s totally possible on the cart page!
We just need to tweak the CSS a little to:

  • Make the quantity box corners rounded (e.g., using border-radius)

  • Remove the outline (e.g., using outline: none;)

4

Hi @Nykuu

Please clarify the design you’re looking for.
Do you want rounded corners? Or would you like to remove the outline around the quantity?

Also, please share your store URL so I can provide the exact solution you need.
Thanks!

5

Yes, on cart page

6

Can you share your store url then I will check & give you the custom code about that

7

In the quantity box, both on the product page and in the cart, I would like to know about both options:

  • remove the outline
  • keep the outline, making its corners rounded

https://slom-onlinestore.com/

batwea

8

https://slom-onlinestore.com/

batwea

9

In the quantity box, both on the product page and in the cart, I would like to know about both options:

  • remove the outline
  • keep the outline, making its corners rounded

https://slom-onlinestore.com/

batwea

10

Let try to add this Custom CSS to your theme settings:

.cart-item__quantity .quantity:after{
  border-radius: 20px;
}
.cart-item__quantity .quantity__input:focus-visible{
  outline: none;
  box-shadow: none;
  outline-offset: 0;
  background: transparent;
}

the result will be:

BiDealDiscount_0-1747383190774.png
BiDealDiscount_0-1747383190774.png1252Ă—881 68 KB

11

I would like this to take effect not only in the quantity box in the cart, but also in the quantity box on the product page, will this change in both places?

12

Yes you can use this custom code:

quantity-input .quantity:after{
  border-radius: 20px;
}
quantity-input .quantity__input:focus-visible{
  outline: none;
  box-shadow: none;
  outline-offset: 0;
  background: transparent;
}
13

Where do i add that code ?

14

Go to Admin → Sale Channels → Online Stores → Theme → click to 3 Dots on current theme choose Edit Code

find the file assets/base.css then add those code to the end of that file

BiDealDiscount_0-1747402996927.png
BiDealDiscount_0-1747402996927.png1325Ă—941 173 KB

15

Thanks for the info try this code below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. This code is making the corners round.
quantity-input.quantity::after, 
quantity-input.quantity::before,
quantity-input.quantity {
border-radius: 50px !important;
}

quantity-input.quantity::after, 
quantity-input.quantity::before {
box-shadow: none !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!