CASCADING FILTER

Technical Q&A
, , , ,
1

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.

2

Hi @AdditivPlus If you mean faceted filtering most this behavior should already exist for the results .

For a facet option to conditionally hide/show other options , like in a sidebar menu, that requires advanced theme customizations or specialized search&filter apps that specifically support such behavior. A theme customization would use either another metafields data, or metaobjects to try and manage the relations then interpreted in the themes liquid or javascript.

To setup faceted filtering with simple introductory behavior, that doesn’t have conditional options, use shopify’s search & filter discovery app

https://apps.shopify.com/search-and-discovery

If you mean for a site navigation with nested menus, from the online-sales-channel, based on metafields this should be possible now that there is finally a navigation menu api(s)

https://shopify.dev/docs/api/admin-graphql/latest/mutations/menucreate

Either done in shopify flow hypothetically with it’s advanced admin request action.
Or done by scripting a custom solution in an automation app like mechanic https://tasks.mechanic.dev/

Merchants that need this customization or automation with an actual budget to add this for their customers can contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @AdditivPlus

You can add Metafields to set up the Year/Make/Model structure. Here’s how the metafields value format should be structured for each product or variant: Year|Make|Model^^Year|Make|Model. For example, 1995|Tesla|S^^1995|Honda|X^^2005|Honda|. This format allows multiple YMM combinations per product and gives you a structured way to extract unique values dynamically for your dropdowns. From there, you’d need to write some custom JavaScript to parse these values and set up the cascading logic for your filter UI. If you’re open to using a third-party app, you might want to try AI Search & Product Filter | SB to create a Brand/ Year/ Model search based on product metafields.