how to change Add to Cart button from square one or the rounded one like this?

how to change Add to Cart button from square one or the rounded one like this?

Senku
Excursionist
28 0 9

how to change Add to Cart button from square one or the rounded one like this? i only want to change "Add to Cart" button. i prefer to use custom css

Screenshot 2025-04-26 at 08.26.02.pngScreenshot 2025-04-26 at 08.29.49.png

Replies 3 (3)

BiDeal-Discount
Shopify Partner
411 45 90

Hi,

 

please share your store url to let me check which class selector to CSS, normally you can use:

.add-to-cart {
  border-radius: 10px;
}

with .add-to-cart is your class selector

- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with bundles, quantity breaks, volume discounts. AOV+ with gifts, shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330
Senku
Excursionist
28 0 9

here it is: https://seasonalcollections.co/collections/all-products

 

your css didn't work

BiDeal-Discount
Shopify Partner
411 45 90

Thank you for provide site url, let try to add this css code:

button.product-form__submit, button.product-form__submit:before, button.product-form__submit:after {
  border-radius: 20px;
}

 

The result will be:

 

BiDealDiscount_0-1745632445291.png

 

- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with bundles, quantity breaks, volume discounts. AOV+ with gifts, shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330