Streaming live at 10am (PST)

E-Commerce filtering - how to setup a filter for genders and unisex


Hi there,

It’s launch day and we’re having major issues with our store:

The website is currently filtered by Men’s and Women’s clothing, however, we do have some Unisex items i.e. Hats. With each respective feed being filtered by Gender, I cannot add a 3rd (Unisex) to include the Hats in both pages, as a workaround: I simply duplicated each item before filtering them by Men and Women, I feel there is a more efficient way of doing this I just can’t figure out what, any ideas?

On a separate note, the Product Page template contains a ‘Related Products’ feed which would ideally show products, the client chooses are similar, so I created a multi-reference field for Similar Products, however, when applied as a filter on this particular feed, it doesn’t give me the option to filter by the chosen Related Products nor the option to filter by ‘Current Category’.

Hoping I can get this issue fixed prior to launch and would highly appreciate any guidance given!

Thanks :slight_smile:


Hey @Harry_Hammond

Sorry that you haven’t received a response yet. I’ve got a solution that will work for your project.

Right now you’re using an Option dropdown selector to mark a product’s gender. This is an absolute declaration. Meaning a product is either Mens or Womens and never both.

What we need is a more flexible field to allow us to separate the filter declarations.

Step 1

In the product collection settings, add two Switch fields and name them


Step 2

Flip the switches on products to match their gender. For a Unisex product simply flip on both switches.

Step 3

Adjust the filters on your collection lists.

For a list of men’s products:
Filter - Gender:Mens is On


For a list of women’s products:
Filter - Gender:Womens is On


For a list of unisex products: two filters
Filter - Gender:Mens is On


Step 4

View the results. (small sample of products for this tutorial)




Hope this helps. Let me know if you have any further questions.


Hey Matthew,

Thank;s for taking your time in putting this together, it really helps! On a separate note, we would like to add a dynamic ‘Out of stock’ tag to our main product collections as opposed to simply featuring when they click to buy within the Product page. Is this possible at the moment?

Thanks again and speak soon!



Inventory or out-of-stock is not currently available as a condition, however I do have another trick for you.

  • Use the add-to-cart component in the product list item (can’t be in a link)
  • Use a class to always hide the default state (if you don’t want the cart button)
  • Style the out-of-stock state (use position:absolute to place “over” product)
  • Done

Here’s the result.

1 Like