Change filter to a dropdown list

Hi currently on my store the filter selection list is a checkbox one where you can select multiple options (see attached). However I want it to be a dropdown selection, exactly like the sort by dropdown list. I would like it to be like this for both mobile and desktop.

Additionally I don’t want the number of products to be displayed next to the options.

Store URL: golazocasesuk.myshopify.com

Theme: Trade

Thanks!

@golazocases

well its depends how the on what base the filters are coming are these tags, or other meta if these are tags then you need to do that using some liquid code loop all the tags in the drop-down and display that drop-down here instead of these check boxes.

Thanks

Hey, the filters are tags. How can I make this change?

Do you have expert knowledge of coding with templates?

No, that’s why I’ve asked the community :joy: :joy:

@golazocases So do you want me to do that for you? on your store?

Sure if you are able to, what code do I need to add?

@EBOOST can you help with this request? I want the mobile and desktop view of the filters and sort by to look like how it does on my other store: thefootballcases.com (password: football)

And ofcourse to have my existing checkbox filter list changed to a dropdown list - again like how it is on my other store.

:slightly_smiling_face:

Well this needs to list all the products tags in the dropdown. and style them according to the design.

Hi,

If you can show to like the old site. May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

  2. Download code here https://github.com/eboost10/2640367/blob/main/2642389/facets_remove_add_select_tag.liquid

  3. Snippets/facets.liquid

  4. Replace code in this file by code that you have just downloaded above

Thanks! This has worked really well but can you make a few changes?:

  1. Can you remove the outlined box which appears when you click on an option dropdown (see attached)

  2. Can you left align the filter and sort by and also increase the gap/padding between them slightly

  3. Can you remove the ‘select’ from ‘select club/country’ and revert it back to normal text (not fully capitalised)

  4. Likewise can you remove the ‘:’ from ‘SORT BY:’ and also revert it back to normal text (not fully capitalised)

  5. When the dropdown list is opened can you make it so it opens below the filter or sort by box? Currently it overlaps and goes above (see attached also)

Hope this all makes sense, really appreciate your help again.

Hi,

I updated code here https://github.com/eboost10/2640367/blob/main/2642389/facets_remove_add_select_tag.liquid

  1. When the dropdown list is opened can you make it so it opens below the filter or sort by box? Currently it overlaps and goes above (see attached also) → We can’t adjust it. It’s related to browser.

Hey, thanks this looks a bit neater.

Could you please remove the border box that pops up when clicking on the list (see attached 1)

Could also make the gap between the filter and sort by bigger that would be great

It would be amazing if you could code it so it displays like this (see attached 2) where there is a box for the dropdown with the filter and sort by text above

Also, rather than being central, can you left align it all? so the text and dropdown list etc is left aligned

Hi,

I updated code here https://github.com/eboost10/2640367/blob/main/2642389/facets_remove_add_select_tag.liquid

Hey, this looks so great thank you! Could you lastly add some corner rounding to the grey boxes? So that the rounding matches the variant options box rounding on the product page?

It may be a good idea to add some padding next to the arrow or text if the corner rounding makes the box look cramped a bit? I will leave this decision to you :slightly_smiling_face:

Hi,

I updated code. You can download here https://github.com/eboost10/2640367/blob/main/2642389/facets_remove_add_select_tag.liquid