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
Topic summary
A user wants to change their Shopify “Add to Cart” button from square to rounded corners using custom CSS.
Initial Attempt:
- Generic CSS suggestion using
.add-to-cartclass withborder-radius: 10pxwas provided but didn’t work.
Working Solution:
- After reviewing the store URL (seasonalcollections.co), a more specific CSS selector was identified:
button.product-form__submit,
button.product-form__submit:before,
button.product-form__submit:after {
border-radius: 20px;
}
Outcome:
- The updated CSS successfully rounded the button corners, as demonstrated in a screenshot showing the transformed button appearance.
- The solution targets the specific Shopify theme’s button class and includes pseudo-elements to ensure complete styling coverage.
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
here it is: https://seasonalcollections.co/collections/all-products
your css didn’t work
