▼
Streaming live at 10am (PST)

Chomp Template by Flowbase - Order Page Product Filtering

Design help Ecommerce
#1

Hello Folks! Thanks in advance for any help and comments. I’m trying to map these “tabbed categories” to new sets of product categories I’m creating (hats, masks, wristbands) but I don’t know how to:

  1. Map the selected Tab Choice (clicked on by the user) to
  2. Show the products that fit that category

I’m using the “Chomp Theme” by Flowbase, wondering if anyone can help!

Here’s a quick LOOM Video I made showing me working through the base theme with no edits, and I can’t see how the tabbed buttons are programmed / mapped to the showing the right collection and products below it. Thanks again for any help!

  • David Martinez

Read Only Link:
https://preview.webflow.com/preview/dountoothers?utm_medium=preview_link&utm_source=designer&utm_content=dountoothers&preview=c607af48d555ecebf88ff8e2eee147c2&pageId=603d2108d1256d426bb75112&mode=preview

Loom Video with Original Theme, trying to understand how this the tabbed buttons map to their functionality:

#2

Hey David!

Thanks for checking out one of our products :smiley:

So the tabs are just given names (Burgers, Sides, Drinks etc etc) and inside each tab pane we have a collection. Those collections have a filter on them which matches the category.

So inside the burger pane for example, the collection has this settings.

image
image1702×786 195 KB

So for you, if you wanted to add the ‘hats’ category, you just need to add a new tab, or change the filter on an existing one to say - ONLY show items when the category = “hats”

I hope that helps a little!

#3

Thomas, thank you very much! This makes sense the way I understand “collection lists” and filtering output! Looking forward to trying this out right now, cheers!

#4

Ah, I see now. So the two things I was missing was:

  1. Select the “Active Tab”
  2. Build a Filter to instruct what to show…

Now, I see the mapping! I’m fairly technical for a designer, so this makes a lot of sense now that I can see it.