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

[pokersamadhi]

Our store is pokersamadhi.com

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

[KetanKumar]

@pokersamadhi

sorry for any issue

and thanks for url,
sorry your store password protect

[oscprofessional]

Hi @pokersamadhi

Your store is password Protect.

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

[Zworthkey]

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

[pokersamadhi]

password is psbetatest

thank you!!

[pokersamadhi]

password is psbetatest

thank you!!

[Muhammad_Ali_S]

@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.

[KetanKumar]

@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 */

[oscprofessional]

Hi @pokersamadhi

Add the code in theme.scss file

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

[pokersamadhi]

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]

@pokersamadhi

yes please sent issue images

[pokersamadhi]

@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]

@pokersamadhi

can you please show me

[pokersamadhi]

@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)

and here is what all the product pages look like:


[KetanKumar]

@pokersamadhi

yes please try this code

.payment-buttons .btn--tertiary {border-radius: 50px;}

[pokersamadhi]

@KetanKumar

The “Buy With Paypal” buttons are still square.

[KetanKumar]

@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?

[pokersamadhi]

@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]

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!

[KetanKumar]

@pokersamadhi

yes please add this code

.shopify-payment-button__button {border-radius: 50px; overflow: hidden;}