How can I change the buttons on our store from square to pill shaped or more rounded?

Solved
pokersamadhi
Excursionist
22 0 13

Our store is pokersamadhi.com 

We haven't launched yet. I am using the Archetype theme Motion. 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
31498 3140 10533

This is an accepted solution.

@pokersamadhi 

remove last one and add this

.shopify-payment-button__button {
    border-radius: 50px !important;
    overflow: hidden;
}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 23 (23)
KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

sorry for any issue 

and thanks for url,
sorry your store password protect 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
oscprofessional
Shopify Partner
11006 1758 2234

Hi @pokersamadhi 

Your store is password Protect.

Please provide password So that i can check and let you know the  solution here.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Zworthkey
Shopify Partner
5581 640 1498

Hii, @pokersamadhi 
Kindly share your store password so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
pokersamadhi
Excursionist
22 0 13

password is psbetatest

 

thank you!! 

pokersamadhi
Excursionist
22 0 13

password is psbetatest

 

thank you!! 

Muhammad_Ali_S
Shopify Partner
534 98 148

@pokersamadhi,

Add this code at the bottom of your theme.scss file.

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

Do let me know if it works for you.

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

thanks for password can you try 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, .product-reviews .spr-button, .product-reviews .spr-summary-actions a, .rte .btn, .shopify-payment-button .shopify-payment-button__button--unbranded {border-radius: 50px;} /* change value as you like */

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
oscprofessional
Shopify Partner
11006 1758 2234

Hi @pokersamadhi 

Add the code in theme.scss file

.btn {
    border-radius: 50px !important;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
pokersamadhi
Excursionist
22 0 13

Thank you!! What do I add so that my read more/read less buttons, add to cart, and google pay buttons are rounded as well?

 

 

KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

yes please sent issue images 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pokersamadhi
Excursionist
22 0 13

 

@KetanKumar 

huh?? i want to add to the code so that my read more/less, add to cart, google pay buttons are pill shaped as well. Right now, on the product pages, everything is square, and places where text is long and hidden, the "read more" and "read less" buttons are square too.

KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

can you please show me 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pokersamadhi
Excursionist
22 0 13

@KetanKumar oh! so sorry! yes of course. 

 

here is a link where you can see the read more button is square: https://pokersamadhi.com/pages/tom-mcevoy (picture below)

 

Screen Shot 2021-10-27 at 12.14.25 PM.png

 

and here is what all the product pages look like: 

 

Screen Shot 2021-10-27 at 12.16.56 PM.png

 

 

 

 

KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

yes please try this code

.payment-buttons .btn--tertiary {border-radius: 50px;}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pokersamadhi
Excursionist
22 0 13

@KetanKumar 

The "Buy With Paypal" buttons are still square. 

 

Screen Shot 2021-10-27 at 8.13.26 PM.png

  

KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pokersamadhi
Excursionist
22 0 13

@KetanKumar 

 

I am in chrome. all the special payment buttons on product listings are square, whether it be paypal, shop pay or google pay. 

pokersamadhi
Excursionist
22 0 13

Hi @KetanKumar 

Would you still be able to help me with this? I'm trying to fix the payment buttons like "buy with paypal." For some reason they are not the same pill shape as the rest of the buttons on my site. 

Thank you!

Screen Shot 2021-11-12 at 10.15.28 AM.png

 

KetanKumar
Shopify Partner
31498 3140 10533

@pokersamadhi 

yes please add this code

.shopify-payment-button__button {border-radius: 50px; overflow: hidden;}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing