Rounded Add to Cart Button Product Page

[ellacoker]

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

[DaisyVo]

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 

Best,

Daisy

[B2Bridge]

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;
}

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

[ellacoker]

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

[B2Bridge]

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;
    }
}

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

[ellacoker]

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?

[Bundler-Manuel]

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;
}

[PageFly-Richard]

Hi @ellacoker 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.product-form__buttons>button.button {
    border-radius: 20px !important;
    width: 100% !important;
    max-width:100% !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden {

    margin: 1.5rem auto;
    width: 100%;
    display: flex
;
    justify-content: center;

}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly