Making All The Buttons Rounded In The Boundless Theme

Solved
Happless
Tourist
10 0 2

Hi, All.

I've been toggling with the theme code, but can't quite get it right,

Im trying to get all the buttons from Blocked to rounded, but haven't yet been able to succeed with this, would appreciate it if anyone can help me with this. Thankyou!

dmwwebartisan
Shopify Partner
5784 1323 1695

@Happless 

Please share your website URL. 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
5784 1323 1695

@Happless 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.btn { border-radius: 26px !important;}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

@Happless 

sorry for this issue, yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.btn {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

This is an accepted solution.

Dear @Happless 

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {-webkit-border-radius: 25px !important; -moz-border-radius: 25px !important; border-radius: 25px !important;}
.contact-form input-group__field.newsletter__input {-webkit-border-radius: 25px 0 0 25px !important; -moz-border-radius: 25px 0 0 25px !important;border-radius: 25px 0 0 25px !important;}
.contact-form .btn.newsletter__submit  {-webkit-border-radius: 0 25px 25px 0 !important; -moz-border-radius: 0 25px 25px 0 !important;border-radius: 0 25px 25px 0 !important;}
/* End*/

 

  • Save and check your theme by refreshing it.
  •  
Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes