Brooklyn: How to edit FILTER options look and feel, for RADIO BUTTON style

Solved
Spr123
Excursionist
24 1 6

Hi all,

 

I hope someone can help me.

On my collection page, currently I have the basic default look and feel for filters on Brooklyn.

Obviously the look and feel is quite bad. I want to edit this.

Filter example before.png

 

Mobile traffic is important to us, as such we would like to have "radio" style button as you can see below. Something that you can see ALL of on mobile without clicking on menu trees.

How can i do this?

Filter example.png

 

Here is the url of my site: https://652stl3589d9x0xb-55506731197.shopifypreview.com/collections/temi

 

Thanks in advance for the help!

  

0 Likes
pawan987
Explorer
34 8 5

Hi @Spr123,

PFA: You need similar like this?

ThanksScreenshot 2021-08-04 at 7.41.36 PM.png

 

0 Likes
Spr123
Excursionist
24 1 6

Hello @pawan987 many thanks for the quick reply.

Yes the buttons look good. What code would I need to insert? I suppose in theme.scss.liquid?

 

PS: any idea how I could limit the filter button to only one row (with a slider, like you can see here: https://www.freshlycosmetics.com/it/prodotti/) or two/three rows max? I want to ensure the filter do not take the entire screen space.

 

Many thanks for your help!

0 Likes
pawan987
Explorer
34 8 5

Hi @Spr123,

I apologise to make these into 2 rows because in our website there are more options as compare to reference website and also options have large text.

To make css changes there are multiple css classes to alter. 

I can assist you if you need any help you can give me collaborator access so that I can make this changes for you.

Thanks

Pawan Kumar

softwebs.pawan@gmail.com

0 Likes
Spr123
Excursionist
24 1 6

Hi @pawan987 email sent.

We can touch base back here on the chat topic as well as soon as it's solved.

Many thanks,

pawan987
Explorer
34 8 5

Okay let me fix this and come back to you...

Thanks

0 Likes
pawan987
Explorer
34 8 5

I have set you access request. Please grant me access.

Thanks

0 Likes
pawan987
Explorer
34 8 5

This is an accepted solution.

Hi @Spr123,

SCSS Code is implemented on  Sprixy August 4 2021

https://652stl3589d9x0xb-55506731197.shopifypreview.com/collections/for-a-gentleman

 

Please check and let me know.

Thanks

 

Spr123
Excursionist
24 1 6

Thank you very much for the kind and quick help @pawan987 

Your code helped me have radio buttons and move forward to then fix my buttons accordingly on my own.

I would highly recommend anyone who is in need of a bit of support to reach out to Pawan.