Rounded Add to Cart Button Product Page

Shopify Discussion

Topic summary

A Shopify store owner seeks help rounding the “Add to Cart” button corners (20px border-radius) and extending its width on desktop.

Initial Solutions Provided:

  • Multiple users offered CSS code snippets to add to base.css or component-card.css files
  • Code targets .product-form__buttons button with border-radius: 20px !important
  • Screenshots demonstrate successful rounded button implementation

Follow-up Requests:
The original poster requested additional modifications:

  1. Extend button width on desktop (mobile width already acceptable)
  2. Center popup text “click to reveal secret ingredient” on mobile
  3. Center product description, price, and heading on mobile only

Additional Solutions:

  • B2Bridge provided CSS to remove max-width constraints and center popup text using media queries for mobile screens
  • PageFly-Richard suggested adding code to theme.liquid file above </head> tag

Current Status:
The popup centering issue is resolved. The discussion remains open with the latest request for centering product details on mobile awaiting response.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Does anyone know how to make my add to cart button rounded? Maybe by 20px?

I would also like to extend it a little.

URL: https://www.samiyaskincare.com.au/products/throat-chakra-face-oil

Screenshot 2025-03-19 at 11.50.47.png
Screenshot 2025-03-19 at 11.50.47.png3324×2096 401 KB

2

Hi @ellacoker

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.product-form__buttons button::after,
.product-form__buttons button::before,
.product-form__buttons button {
    border-radius: 20px !important;
}

Result

DaisyVo_0-1742350337650.png
DaisyVo_0-1742350337650.png428×347 15.3 KB

Best,

Daisy

3

Hi @ellacoker , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.product-form__buttons > button.button,
.product-form__buttons > button.button::before,
.product-form__buttons > button.button::after {
  border-radius: 20px !important;
}

Screenshot_1.png
Screenshot_1.png1371×886 115 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

4

Thank you,

do you know how to

  1. also extend the button on desktop? the mobile width is fine. please see image

  2. centre the pop up text “click to reveal secret ingredient” on mobile

Screenshot 2025-03-19 at 12.23.15.png
Screenshot 2025-03-19 at 12.23.15.png1731×1068 184 KB

Screenshot 2025-03-19 at 12.23.08.png
Screenshot 2025-03-19 at 12.23.08.png800×1810 133 KB

5

Hello Ella @ellacoker I think you should give this code a try and let me know how the button appears in your store afterwards.
}
button.btn.btn–full.add-to-cart {
border-radius: 78px !important;
}

6

Hi @ellacoker ,
Paste this code at the bottom of the file:

.product-form__buttons {
   max-width: unset !important;
}
@media screen and (max-width: 749px) {
    .product-popup-modal__opener.quick-add-hidden {
        width: 100% !important;
        text-align: center !important;
    }
}

Screenshot_2.png
Screenshot_2.png722×886 107 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

7

Hi @ellacoker

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1742367799424.png
PageFlyRichard_0-1742367799424.png1920×654 87.2 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

8

Hello,

Thank you so much. My pop up is now centred. Can I add something to also make my product description, price and heading all centred too on mobile only?