arrow-right cart chevron-down chevron-left chevron-right chevron-up close menu minus play plus search share user email pinterest facebook instagram snapchat tumblr twitter vimeo youtube subscribe dogecoin dwolla forbrugsforeningen litecoin amazon_payments american_express bitcoin cirrus discover fancy interac jcb master paypal stripe visa diners_club dankort maestro trash


Replacing a Shopify Collection drop-down filter with radio buttons

by Erik Silver

8 years ago

A client's site used a drop-down menu to filter their product tags but wanted a more customized solution. The radio button filter that I implemented offers a better user experience and aesthetic.

The page with the drop-down filter originally looked like this:

Supermarket original dropdown


And with radio buttons, the filtering looked like this:

Supermarket radio button filters

The original implementation used the drop-down menu to display all product tags available and when a user selected a tag, jQuery was used to add that tag to the url handle using 'window.location.href'. That reloads the page with the tag filter. As an example, the url would look like this if the "rings" tag is selected:
To learn more about how Shopify filters work, see this.


How to filter with radio buttons

The radio button implementation is more complex and includes additional elements:

  • Custom tags assigned to the radio buttons for each collection. This is also a way to subcategorize a collection, instead of showing all tags for all products.
  • Refactor the CSS selector to an 'input' and add additional CSS classes for the radio buttons.
  • Add logic to check if a radio button is selected; only one can be selected at a time.

Here is a look at the final radio button code:

What questions do you have about Shopify collection and product filters?

Contact me here to chat about your project needs.



Leave a comment

Please note, comments must be approved before they are published

Shopping Cart