How can I modify my add to cart button to be rounded?

Store Design
1

Hello, how to make my add to cart button rounded? I use a motion theme. I tried pasting this code -

.product-single__add-btn {
  border-radius: 5px; 
}

but this code didn’t work.

2

@sangok420 ,

Please add this CSS to your theme

.product-single__add-btn {
  border-radius: 10px !important; 
}

Thanks!

3

Still not working

4

@sangok420 ,

please send your store URL

I will check out the issue and provide you a solution here.

5

Hii @sangok420

Welcome to the Shopify community!
Thanks for your good question.

Add this CSS code at the bottom of your theme.css file.

.product-item--vertical .product-item__action-button,
.product-item--horizontal .product-item__action-button {
  border-radius: 30px;
}

Copy

Do let me know if it works for you.

Good Luck!

6

https://gandrelis-lt.myshopify.com/ Password:waucru

7

@sangok420 ,

Please add this CSS to your theme

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

Thanks!

8

**Hii , @sangok420 **

Please add This code in your css file :

button.btn.btn–full.add-to-cart {
border-radius: 78px !important;

}

This will show the output like this :

premadestores_0-1643884112091.png
premadestores_0-1643884112091.png616×208 11.1 KB

I hope this will be helpful for you

9

I tried that new code but still doesn’t work

10

Apparently it doesn’t work https://prnt.sc/26ntchv

11

@sangok420 ,

Please add this code to your theme

}
 button.btn.btn--full.add-to-cart {
    border-radius: 78px !important;
}

Thanks!

1 Like