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: https://preview.webflow.com/preview/youneslondon?utm_source=youneslondon&preview=5dcab761a5ab588239fe1a4b908f28f6

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:

1 Like

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

46%402x

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

48%402x

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

58%402x

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

12%402x

Step 4

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

Men

Women

Unisex

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

2 Likes

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!

@Harry_Hammond

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.

2 Likes

Hi Matthew… 1 year later, do we have a way to hide out-of-stock items from the page?
Our store sells one-off unique items. Once it’s sold once, we don’t need it anymore. Should we just delete the product once it sells?

Hey @nderic, for your use case, I’d recommend archiving a product after it is sold out.

As for quantity being available for filters and conditional visibility, the team is aware of the use-case, but it is not under development at this time.

Another method would be using Integromat or Parabola to run a scheduled inventory cleanup automation (possibly overnight or more frequently) that finds products with no inventory and either archives the products and/or sends alerts to staff.

@matthewpmunger Thank you for the quick reply. I didn’t know Parabola / Integromat could do that kind of thing - so that’s really exciting!

If “archived” products count towards the 500/1000 item limit, perhaps I could run a weekly delete of those. I’ll look into it, TY!

Hi Mathew, I have been trying to make a similar filtering menu (as in the screenshot you added above) for the collections page of my ecommerce store but I can’t seem to get the hang of it.

I am trying to create sub collections to every collection. For example the Apparel collection should be divided into men/women, jewelry collection divided into necklaces/bracelets/rings etc and then make a menu out of it so people can easily navigate through collections.

I tried creating some accordion dropdowns and add tie each collection to a link; but it doesn’t seem to do the job.

Could you please advise or point me in the right direction on how can I create such a menu as in the screenshot you attached above?

Thank you in advance!

Not sure if the read-only link is helpful but adding it just in case:
https://preview.webflow.com/preview/ionuts-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=ionuts-marvelous-project&preview=efc362f6516c1808d6e302e5928261c1&pageId=6101d28c61d4e15cb6071375&itemId=6101d39732c7f66870b9e79e&workflow=preview

Update: Seems like I made the accordion dropdown work properly, yay! Now my next issue is how to keep the accordion open when clicking on the link. For example if I click The Jewelry category, subcategory Necklace, I would like the accordion to stay open for that section. Hope that makes sense!

Hey @Ionut_Andrei

After looking at your project, I think you need to add a multi-reference field to the Category that creates a relationship to its Subcategories. After that is done, you can add another collection list inside your Category collection list. This is called a nested collection. Connect it to the Subcategory multi-reference field and then design your accordion effect with interactions. I’ll provide some helpful links below.