How do I display different items in a collection list based on the category and subcategory in Webflow?

To display different items in a collection list based on the category and subcategory in Webflow, you need to use conditional visibility and dynamic filtering.

Here's a step-by-step guide to achieving this:

Step 1: Set up your Collection
Ensure that you have set up your Collection fields correctly, including a field for the category and subcategory. Make sure each item in the collection has the appropriate category and subcategory assigned.

Step 2: Create a Collection List
On the page where you want to display the items, add a Collection List element from the Add panel. Connect it to your desired Collection and start with a basic layout.

Step 3: Filter the Collection List
Select your Collection List, and under the settings panel, click on the "Filtering" tab. Add a filter by clicking the "+ Add Field" button. Choose the field that corresponds to the category.

Step 4: Set up the first filter condition
Specify the category value you want to filter by. For example, if you have a category called "Apparel," set the condition as "Category equals Apparel."

Step 5: Add Subcategory filter
To further refine the filtering, add a subcategory filter. Click on the "+ Add Field" button again and select the field that corresponds to the subcategory. Set the condition based on the desired value.

Step 6: Customize your Collection List
Style your Collection List as desired using the Design panel. You can add elements and adjust their layout to create the desired visual presentation.

Step 7: Set up Conditional Visibility
To display different content based on category and subcategory, you can use Conditional Visibility. Select the element within the Collection List that you want to conditionally show or hide. In the settings panel of the selected element, click on the "Display" tab. Enable the "Conditional visibility" option and set the conditions based on the desired category and subcategory values.

Step 8: Repeat steps 7 for other elements
If you have multiple elements within the Collection List that should be conditionally displayed, repeat step 7 for each element, setting up the appropriate conditions.

By following these steps, you can dynamically display different items in a Collection List based on the category and subcategory in Webflow.