How can I create rounded buttons on the Story theme?

Store Design
, ,
1

Hello, I would like to make all buttons rounded on my Shopify store. I’m using the Story theme version α. Does anyone know how to do this? Thank you!

2

Hey @nikosfo , trust you’re good

There is way you can get it done, but, uhm, let us have your store link, so as we can be able to check it out for you

3

Hi @nikosfo ,

Go to Assets > theme.css and paste this at the bottom of the file:

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

you can change the number of px to change the rounded button.

4

Hi @nikosfo ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

Please refer to this screenshot:

PageFlyVictor_0-1670228142245.png
PageFlyVictor_0-1670228142245.png1365×651 47.6 KB

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

Hello @nikosfo

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1670301939175.png
GemPages_0-1670301939175.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1670301969418.png
GemPages_1-1670301969418.png907×851 33.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

It doesn’t work…my store is this https://postur.co.za/ if it helps

7

None of these work… That’s the code in theme.css, if it helps

/================ Buttons and Input Groups ================/
.btn, .btn–secondary {
font-family: var(–font-btn); font-weight: var(–fontw-btn); font-style: var(–fonts-btn);
padding: 12px 20px;
}
.input-group .btn, .input-group .btn–secondary, .input-group .input-group-field {
height: 45px;
}

8

Hi @nikosfo ,

Are you wanting this?

Screenshot.png
Screenshot.png1173×365 148 KB

You just need to add border-radius, it will work fine. Refer code:

/*================ Buttons and Input Groups ================*/
.btn, .btn--secondary {
font-family: var(--font-btn); font-weight: var(--fontw-btn); font-style: var(--fonts-btn);
padding: 12px 20px;
border-radius: 50% !important;
}
.input-group .btn, .input-group .btn--secondary, .input-group .input-group-field {
height: 45px;
border-radius: 50% !important;
}

Hope it helps!

9

Hello @nikosfo

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1670472132411.png
GemPages_0-1670472132411.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1670472147721.png
GemPages_1-1670472147721.png1278×791 32.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team