Solved

Can all buttons be rounded on my Shopify site?

WilliamLekman
Tourist
4 0 1

Hey!

Right now I have added a code that make some of the buttons rounded but not all of them. For example the "Buy now" button is not rounded. My website is careofpets.se and password is "puppy". If there is someone who knows how I can make all of the buttons rounded I would be very pleased. My website is in swedish so if there is any questions, please ask!

Sincerely,

William

Accepted Solution (1)
Shine18pk
Shopify Partner
30 7 13

This is an accepted solution.

Update the code to this: 

 

<style>
.btn, div[role="button"], button[type="button"], button {
    border-radius: 5px !important;
}
</style>

 

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️

View solution in original post

Replies 16 (16)

Shine18pk
Shopify Partner
30 7 13

Hi William,

 

Add this code in your theme.liquid file before </body> tag.

<style>
.btn, div[role="button"] {
    border-radius: 5px !important;
}
</style>

 

If you want more rounded buttons, try increasing the value from 5 to 10px.

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
WilliamLekman
Tourist
4 0 1

Perfect! Now some of my buttons is rounded but my button "Köp nu" is still squared, do you know why?

Shine18pk
Shopify Partner
30 7 13

Can you send me a preview link of the theme where you applied the code, and tell me where the button is which is not round ?

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
WilliamLekman
Tourist
4 0 1

https://careofpets.se/ - password "puppy"

If you go down at the page and look at the "Köp nu" button it is still squared after the coding.

Shine18pk
Shopify Partner
30 7 13

This is an accepted solution.

Update the code to this: 

 

<style>
.btn, div[role="button"], button[type="button"], button {
    border-radius: 5px !important;
}
</style>

 

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
WilliamLekman
Tourist
4 0 1

Thank you so much! Now it is working:)

taylormcgee
Explorer
58 2 9

Thank you this helped with my theme as well. I want to round the typing fields on my website any idea on what I should do? 

Shine18pk
Shopify Partner
30 7 13

@taylormcgee  Paste this in your theme.liquid file before closing body tag "</body>";

<style>
input[type=text], textarea {
    border-radius: 5px !important;
}
</style>
- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
taylormcgee
Explorer
58 2 9

This doesnt work for the Pay with Apple Pay Button on Safari nor the Pay with Paypal on Google Chrome

Shine18pk
Shopify Partner
30 7 13

@taylormcgee 

Please post your store's link, so that i can provide you with specific code to make those button edges round. 

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
taylormcgee
Explorer
58 2 9

www.stickzus.com : Store Link.

I have the theme Brooklyn

Also if you are able to help me with making the search logo I have on the desktop a drawer on the moblie site. I cant find a result anywhere 

speedough
Visitor
1 0 0

Hi I saw your code about your rounded button and I wanted to know if you could help me fix mine. I'm having the same issue with the sharp corners sticking out still. 

Thanks in advance,

Speedough

website: imporetant.com

devbea
Visitor
1 0 0

@speedough did you manage to solve that?

Siebebuvanha
Visitor
1 0 0

Hi, We have another problem. Would only our sold out button and sale button round. And if possible with a little bit shadow 😉 How could we do this?? 

Siebebuvanha_0-1665046750798.png

 

glutegod
Excursionist
22 0 41

Do you know the code to make all the pay buttons round as well? 🫶🏻

JuicyVapeEU
Visitor
1 0 0

Hi there,

 

I've tried your code on my theme but only add to cart button is rounded now.

All buttons like "view options" on homepage are still not rounded...

My theme is FLOW

 

I could send you by MP my website link and password.

 

Thanks in advance !