Cascading filter system

[goldi07]

Hello @AdditivPlus To create a cascading filter system with dynamic metafield values and a search button on the Shop page in the Dawn theme, you’ll need to:

Key Features to Implement

1. Three dropdowns:

. Brand (from metafield: product.metafields.custom.brand)

. Year (from metafield: product.metafields.custom.year)

. Model (product title or handle)

2. Cascading logic:

. Brand → filters available Years.

. Year → filters available Models.

. “Search” button → filters and shows matching products.

3. Values must be dynamically generated from the product catalog — no hardcoded options.

Overview of the Implementation Plan

1. Create a Section (or modify a template) to render the 3 dropdowns.

2. Collect metafields dynamically via JavaScript from products listed on the page (or fetched via Shopify’s Storefront API).

3. Use JavaScript to:

. Filter dropdown options based on the previous selection.

. Filter products once “Search” is clicked.

Suggested Implementation Approach

1. Add Metafields to Your Products
   Ensure the following metafields exist on each product in Settings > Custom data > Products:

. Namespace: custom

. Key: brand (single-line text)

. Key: year (single-line text)

2. Create the Filter Block
   In sections/main-collection-product-grid.liquid (or a custom section on the Shop page), add this HTML:

3. Expose Product Metafields in Liquid
   Below the product grid, expose the data in a JavaScript-readable way:

4. Add JavaScript for Cascading Logic

Optional Enhancements
. Replace with Tailwind dropdowns or custom UI components. . Use AJAX instead of page reloads to dynamically render filtered products. . Replace navigation with a filtered collection grid if multiple models match (instead of redirecting to 1 product). try this : Thank you