How do I make the quantity chooser round?

Store Design
,

Topic summary

A user wants to customize their store’s quantity selector to have rounded corners, matching the rest of their design aesthetic. They’ve shared a screenshot showing the current square quantity chooser.

Proposed Solution:
A PageFly representative provided CSS code to achieve rounded corners:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add CSS at the bottom: .quantity:after { border-radius: 100px !important; }

Status: The thread appears to be awaiting confirmation from the original poster on whether the solution works. Another respondent requested the store URL to provide additional assistance.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello, I want to make the quantity choo

image.png
image.png680×452 46.3 KB

ser round so it matches the rest.

1 Like
2

Hi @OnePunch

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hi @OnePunch

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.quantity:after {

border-radius: 100px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly