Filter a collection list by product category (ecommerce not CMS)

I found a helpful walkthrough from Finsweet on CMS filtering along with this video guide but having some issues applying it to ecommerce and products / categories vs. it being a CMS collection.

I’m able to apply the fs-cmsfilter-field custom attribute on filter checkbox labels (like in screenshot), but the product categories I’m trying to filter on are not available in the product collection list.

I’m not able to pull product categories into the product collections list to make that connection on the filter custom attribute.

Anyone know a way to set this up so you can filter a collection list of products based on product category attributes?

Thanks!


Here is my site Read-Only

https://preview.webflow.com/preview/stickerstattoos?utm_medium=preview_link&utm_source=designer&utm_content=stickerstattoos&preview=58506d173aba36c7fb55b5eb530ab889&pageId=653ff7ee6e3b33a73fcddec7&itemId=6543ca9c9c1fe171e91d212b&workflow=preview

I actually don’t use Webflow’s ecom, but I think that a product can be in multiple categories, which means it’s probably handled as a multiref field.

If that’s right than to access that, you’d need to drop a nested collection list inside of your product item, and bind it to the category field of the item ( it should show there ). Then within that list, emit the categories names as text items and assign those the FS attributes.

1 Like

@memetican you’re an absolute lifesaver! Nested a category collection list and it totally worked! Thank you thank you for unblocking me here.

The thing I’m running into now is trying to hide the category text bec I don’t want them to actually appear in the Products list. I was testing adjusting the visibility of these categories and setting them to Hidden, but as soon as I do that it no longer filters.

Any idea how I can make this filtering work while not actually displaying the categories fields in the main product list? Thank you again!

Read only link

@memetican figured it out! Simply hiding it “Layout” on the styling tab. Thank you again for saving the day!

Awesome, and yes you got it,

Both visibility features are very useful, but very different in how they work.
I did an article on that here if it’s helpful.

1 Like

Just read, super useful article! Thanks again @memetican