Button radius more round for all clickable buttons

Shopify Discussion
1

IMG_7103.png
IMG_7103.png1170Ă—2532 177 KB

IMG_7106.png
IMG_7106.png1170Ă—2532 307 KB

hi, so i would like to have all of my clickable buttons more round. i have provided a screenshot of my buttons currently and the ones i would like to change to. thanks in advanced.

IMG_7104.png
IMG_7104.png1170Ă—2532 262 KB

1 Like
2

Hi @SmartLitter

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.btn:after, .shopify-payment-button .shopify-payment-button__button--unbranded:after  {
    border-radius: 50px;
}

And save.

Do you want also the quantity button?

Made4uoRibe_0-1707240430189.png
Made4uoRibe_0-1707240430189.png601Ă—398 39.4 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

This works! But, yes the quantity would also be great!

4

Add this one then, same instruction.

.product-form__quantity .quantity, .quantity {
    border-radius: 50px;
}

And Save.

Result:

Made4uoRibe_0-1707244254188.png
Made4uoRibe_0-1707244254188.png729Ă—263 9.03 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Oh, I didnt notice that small add to cart button. Check this one. Same Instruction.

button.btn.btn--dark.product-form__cart-submit.product-form__cart-submit--fixed {
    border-radius: 50px;
}

And Save.

Result:

Made4uoRibe_0-1707337611617.png
Made4uoRibe_0-1707337611617.png471Ă—280 13.9 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!