Streaming live at 10am (PST)

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

#1

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:

#2

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
#3

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!

#4

@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.

1 Like