Skip to main content

Finder Sections (Cascading Dropdowns)

The Vertex Finder section is a cascading-dropdown product discovery widget. Buyers narrow down to the exact part they need by choosing 3 successive values โ€” Make โ†’ Model โ†’ Year, or Brand โ†’ Category โ†’ Capacity, or Printer Brand โ†’ Model โ†’ Color โ€” and the finder takes them to the filtered collection.

Vertex ships one demo (industrial / MRO), and the same Finder section powers the auto-parts, office & IT, and print-supplies configurations you build from it. There are three finder types you can set up:

  • Auto parts โ€” Make / Model / Year
  • Office & IT โ€” Brand / Category / Capacity
  • Print supplies โ€” Printer Brand / Model / Color

The default Vertex (industrial) demo ships without a finder โ€” it relies on faceted collection filters and predictive search instead.

One section, three finder types

You don't install a different section for each industry โ€” it's the same Finder section in every configuration. Each one just fills in its own dropdown labels and option lists (Make/Model/Year, Brand/Category/Capacity, or Printer Brand/Model/Color). Switching the cascade to another vertical is a matter of editing those labels and options.

Make/Model/Year finderโ€‹

The finder is a 3-level cascade. Choose Level 1 โ†’ Level 2's options populate based on the Level 1 choice โ†’ choose Level 2 โ†’ Level 3's options populate โ†’ click Submit โ†’ go to the filtered collection.

Open Shopify admin โ†’ Online Store โ†’ Themes โ†’ Customize. In the page editor, click Add section and choose Finder.

Settingsโ€‹

  • Heading โ€” "Find parts for your vehicle" or "Find toner for your printer".
  • Intro text โ€” Short reassurance โ€” "Select your make, model, and year to see compatible parts.".
  • Drop-down 1 / 2 / 3 label โ€” The visible label for each level โ€” e.g. Make, Model, Year. Change these labels (plus the option blocks below) to turn the same section into any cascade you like.
  • Query param name (per drop-down) โ€” The URL parameter each level adds to the search/collection link (e.g. make, model, year). Defaults to q1 / q2 / q3 if left blank.
  • Submit button label โ€” "Find parts" or "Find toner".
  • Form action URL โ€” Where the form submits. Defaults to /search; point it at a collection URL (e.g. /collections/all) to filter a collection instead.
  • Color scheme โ€” Standard color scheme dropdown (Light / Accent band / Dark).
  • Vertical padding โ€” How much breathing room the finder band gets above and below.

Each drop-down's choices come from option blocks you add to the section โ€” one block per choice. A Drop-down 2 / 3 option can set a Parent value so it only appears once the matching parent choice is selected, which is how the cascade narrows.

The three finder typesโ€‹

1. Make / Model / Year โ€” auto-parts configurationโ€‹

For auto-parts distributors with fitment-driven catalogs.

Cascade:

  1. Make โ€” Ford, Toyota, Chevrolet, BMW, etc.
  2. Model โ€” populated from the chosen Make (F-150, Camry, Silverado, 3 Series)
  3. Year โ€” populated from the chosen Make and Model (2018, 2019, 2020, ...)

Submit: takes the buyer to the matching collection, filtered to products tagged with that vehicle.

Data setup: add the choices directly to the section as option blocks in the theme editor:

  • A Drop-down 1 option for each Make (Ford, Toyota, Chevroletโ€ฆ)
  • A Drop-down 2 option for each Model, with its Parent value set to the Make it belongs to
  • A Drop-down 3 option for each Year, with its Parent value set to the Model it belongs to

Then tag your collections so the submitted URL matches (Vertex uses Shopify's native tag-based filtering).

2. Brand / Category / Capacity โ€” office & IT configurationโ€‹

For office, IT, and electronics distributors.

Cascade:

  1. Brand โ€” HP, Dell, Lenovo, Apple, Cisco
  2. Category โ€” populated from the chosen Brand (Laptops, Monitors, Routers, Printers)
  3. Capacity โ€” populated from the chosen Brand and Category (8 GB / 16 GB / 32 GB ยท 24" / 27" / 32" ยท etc.)

Submit: takes the buyer to the matching brand-and-category collection.

Data setup: add the choices as option blocks in the theme editor โ€” a Drop-down 1 option per Brand, a Drop-down 2 option per Category (with its Parent value set to the Brand), and a Drop-down 3 option per Capacity (with its Parent value set to the Category).

3. Printer Brand / Model / Color โ€” Print-supply variantโ€‹

For print-supply distributors selling toner, ink, and consumables that need to match a specific printer.

Cascade:

  1. Printer Brand โ€” HP, Canon, Brother, Epson, Xerox, etc.
  2. Printer Model โ€” populated from the chosen Brand (LaserJet Pro M404, PIXMA TR8620, etc.)
  3. Color โ€” populated from the chosen Brand and Model (Black, Cyan, Magenta, Yellow, or Multi-pack)

Submit: takes the buyer to the matching collection, filtered to cartridges compatible with that printer.

Data setup: add the choices as option blocks in the theme editor โ€” a Drop-down 1 option per Printer Brand, a Drop-down 2 option per Printer Model (with its Parent value set to the Brand), and a Drop-down 3 option per Color (with its Parent value set to the Model).

This cascade is the make-or-break feature of a print-supplies configuration, so a print-supply storefront gets a turnkey toner finder once you set it up โ€” just swap the sample options for your own printer line-up.

How the cascade worksโ€‹

The finder's choices come from the option blocks you add to the section, so everything is built into the page. From there:

  1. On page load, Level 1's options are populated from its Drop-down 1 option blocks
  2. When the buyer selects Level 1, Level 2 narrows to the options whose Parent value matches the Level 1 choice
  3. When the buyer selects Level 2, Level 3 narrows to the options whose Parent value matches the Level 2 choice
  4. On submit, the buyer is taken to the search results or collection, with each level added as its query parameter

The options are built into the page when it loads โ€” so there's no extra network request and the cascade is instant.

Works without JavaScript

The first level's options are built right into the page, so the finder still works even if a buyer's browser has JavaScript disabled โ€” they can submit the first level alone and land on the filtered results. This is the same progressive-enhancement philosophy you'll see throughout Vertex.

Setting up your finder dataโ€‹

For each finder type, you need to:

  1. Set the three drop-down labels to your cascade (e.g. Make / Model / Year), and the Query param name for each level if you want clean URLs.
  2. Add an option block per choice โ€” one Drop-down 1 option per top-level value, then Drop-down 2 and 3 options with their Parent value set so each level narrows the next.
  3. Point the Form action URL at /search (default) or a collection (e.g. /collections/all).
  4. Tag your collections so the filtered URL matches. Vertex uses Shopify's native tag-based filtering, so a collection of "Ford F-150 parts" should have the tag vehicle:ford-f-150.

โ†’ Each finder type (auto parts, office & IT, print supplies) follows the same three steps โ€” set the labels for your cascade, add an option block per choice, and swap in your own values.

Where to place the finderโ€‹

PositionBest for
Top of the homepage, immediately under the heroVerticals where the finder is the homepage value prop (auto parts, print supplies)
Inside the hero (as a side panel)Verticals where the hero image carries the value prop and the finder is a parallel call-to-action
Below the featured collectionVerticals where the finder is one of several browsing paths
On a dedicated finder pageVerticals where the finder is the primary navigation method โ€” link to it from the header secondary menu

The auto-parts and print-supplies configurations place the finder under the hero. The office & IT configuration uses a smaller variant inside the hero.

B2B and the finderโ€‹

For signed-in B2B buyers, the finder takes them to the filtered collection โ€” and that collection respects the buyer's B2B catalog scope. So a Ford F-150 search shows only the F-150 parts that are in the buyer's catalog, with the buyer's volume pricing tiers applied.

The finder itself doesn't filter by catalog โ€” that filtering happens on the collection page once they land there. This is the correct split: the finder narrows to the right product family; the collection shows only what the buyer can buy at the right price.

Tips for finder data qualityโ€‹

  • Use consistent capitalization in your entries (always Ford, never FORD or ford) โ€” the cascade matches strings exactly
  • Avoid trailing whitespace in entry values โ€” even invisible whitespace will break the cascade
  • Fill in all 3 levels for every entry โ€” incomplete entries break the cascade for everyone downstream of the missing level
  • Set a sensible default for Target collection โ€” buyers who submit a partial selection (or whose selection has no matches) land there

What's nextโ€‹