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

Solved

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

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)
KetanKumar
Shopify Partner
37095 3645 12054

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
37095 3645 12054

@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
16115 2409 3123

Hi @pokersamadhi 

Your store is password Protect.

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Zworthkey
Shopify Partner
5581 642 1578

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

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
669 122 185

@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!
- Feel Free to Contact | Whatsapp +92 3486775142
KetanKumar
Shopify Partner
37095 3645 12054

@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
16115 2409 3123

Hi @pokersamadhi 

Add the code in theme.scss file

.btn {
    border-radius: 50px !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
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
37095 3645 12054

@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
37095 3645 12054

@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
37095 3645 12054

@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
37095 3645 12054

@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
37095 3645 12054

@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
pokersamadhi
Excursionist
22 0 13

@KetanKumar 

unfortunately that did not work 😞 

KetanKumar
Shopify Partner
37095 3645 12054

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
pokersamadhi
Excursionist
22 0 13

Fixed!!! Thank you SO much for all of your help. I appreciate it more than you know! 

KetanKumar
Shopify Partner
37095 3645 12054

@pokersamadhi 

its my pleasure to help us 

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