Cascading filter system

[AdditivPlus]

Hello,

I’m looking to create a cascading filter system on my Shop page (Dawn theme). Here’s what I would like to do:

I want to create a filter block with 3 linked dropdown menus:

1. Brand (product metafield: “Brand:”)

2. Year (product metafield: “Year:”)

3. Model (my products)

• The dropdowns should be cascading:

  • The selected Brand determines which Years are available.

  • The selected Year determines which Models are shown.

• The values must be automatically pulled from existing product metafields (no manually entered or pre-generated values).

• A “Search” button should display the products that match all 3 criteria.

Thank you in advance for your help

[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

[Kayori]

You’ll need custom JavaScript to make the dropdowns update based on each other. Use Shopify Liquid to pull the metafield values, then trigger changes on each dropdown to update the next one. A search button can reload the page with filters in the URL.

[AdditivPlus]

Hi, thanks for your help !
The block with the three dropdown menus is displaying correctly so that part is working.
However, the menus don’t seem to be pulling data from the metafields, so no values are showing up at the moment and nothing can be selected.
Thanks in advance for your help !

[goldi07]

hey @AdditivPlus Thanks for the update! If the dropdowns are visible but not populating with values, that usually means one of the following is happening:

Let’s Troubleshoot Step-by-Step

1. Are the metafields available in Liquid?
   Ensure you’re exposing them correctly inside your Shopify Liquid file. Here’s a safe debug version of the window.productData script:

Check the browser console (right-click → Inspect → Console tab) and confirm if:

. The array appears with objects.

. brand and year fields are not null, undefined, or empty.

2. Confirm Metafield Namespace and Keys
   Double-check:

. Product metafields are under namespace: custom

. Keys are:

. brand

. year

. Products in the current collection have non-empty values for both

Go to Shopify Admin > Settings > Custom data > Products to confirm.

3. Are you on a collection page with products?
   If you’re testing this on a page that’s not a collection, then collection.products will be empty.

You can fix this by loading all products via the Storefront API, but for now, verify you’re testing this on a real collection page.

Optional Debug Tip
To make sure you’re pulling values, insert this line temporarily in your Liquid:

{% for product in collection.products %}
  

{{ product.title }} - Brand: {{ product.metafields.custom.brand }} - Year: {{ product.metafields.custom.year }}

{% endfor %}

If this shows blank for brand or year, then the metafields are either:

. Not assigned to those products

. Not correctly referenced in Liquid

try this if you need any plz let me know

thank you

[AdditivPlus]

Thanks for your reply!
I’ve double-checked and re-added the window.productData script as you suggested.

However, it still doesn’t display the products in the console. When inspecting the page, this is what I see:

html

CopierModifier

Select brand Select year Select model Search

Yet, I’ve properly entered the metafields in Shopify’s settings, and they are correctly assigned to each product.

For example, for the voltage converter:

Thanks in advance for your help!

[AdditivPlus]

@goldi07