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;}

[pokersamadhi]

@KetanKumar 

unfortunately that did not work 😞 

[KetanKumar · Accepted solution]

@pokersamadhi 

remove last one and add this

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

[pokersamadhi]

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

[KetanKumar]

@pokersamadhi 

its my pleasure to help us