I need customers to search by Year, Make, Model, Engine in that specific order. To achieve this I wanted to have all the filters greyed out except for the the one they need to select (for example ‘Year’ would be be black- signaling them to select their year fist, and ‘Make, Model and Engine’ would be grey- out. After they select their year, then ‘Make’ would become black signaling them to select their make next)
I ask chat gpt to give me code to make this happen but it didn’t work. I’m using the dawn theme.
Does anyone have any advice on how to achieve this. Is there a plug-in that might work or should I hire a developer?
You are correct in saying that the Dawn theme from Shopify does not provide progressive status or dependent filtering out-of-the-box. You have three options to create progressive filtering. First, you can code a solution yourself. This will involve altering both javascript and liquid files in your theme in order for the state of each dropdown to be tracked. In this instance, you will be adding filters for Year, Make, Model, and Engine. All will be disabled except for “Year” until it is selected and each dropdown afterwards will populated based on the previous filter. Second, you could utilize an app like Product Filter & Search by Boost Commerce or Smart Product Filter & Search by Globo. The benefit of these apps is that they provide multi-level filters and the ability to style without doing any extensive coding. Finally, if you would like a completely custom experience, hiring a Shopify developer is the best option. A Shopify developer will accurately create the logic and look that you desire between the product data and product filtering. For ease and scalability, it would probably make the most sense to try the filtering apps out first for a cleaner UX, and if they do not get you what you are looking for, provide a Shopify developer with a workflow example to build out for you.
Like @Fresh_dev said, creating a sequential “Year, Make, Model” filter is an advanced feature that standard themes like Dawn do not support out of the box. The code for this is complex because it has to understand the relationships between your product data.
The best and most recommended solution is to use a specialized app from the Shopify App Store. Look for an app like Product Filter & Search by Boost Commerce and search for the feature called “cascading filters” or “dependent filters.” These apps are built specifically to handle this logic for you without any coding required.
You could structure your Year, Make, Model, Engine data using product metafields. Each product (or variant) can have a metafield where you store values in a structured format like this: Year|Make|Model|Engine^^Year|Make|Model|Engine
For example: 2015|Honda|Civic|2.0L^^2018|Toyota|Camry|2.5L
This approach lets you define multiple valid combinations per product. You can then use custom JavaScript to parse these metafield values and control the dropdowns — showing only the relevant options as the user makes each selection (e.g., Year first, then Make, then Model, and so on).
If you’d prefer not to build this from scratch, you might want to try a third-party app like AI Search & Product Filter | SB, which supports Year/Make/Model searches based on product metafields and can handle the cascading logic automatically.