Storefront blocks

ModelMatch ships three storefront blocks, each built for a different moment in the shopper journey. The fit check widget sits on product pages and verifies compatibility for the part a shopper is already looking at — the highest-intent moment, since they’ve already shown interest in this specific item. The standalone finder is a dedicated search experience for shoppers who want to find what fits their equipment without browsing first. The catalog fit check appears on collection pages and lets shoppers set their equipment once at the top, then quietly checks compatibility on every product they browse — turning the catalog itself into a self-filtering experience. All three pull from the same compatibility records. Add the records once, then choose which blocks make sense for your storefront.

Fit check widget (product pages)

What it does

The fit check widget appears on product pages and lets shoppers verify the part fits their equipment before adding to cart. It’s the workhorse block — most merchants run it on every product page, every shopper who lands on a product sees it, and it converts uncertainty into purchase confidence in a few seconds. A few important behaviors: it auto-hides on products that have no compatibility records (so it never appears broken on partially-covered catalogs), it shows three result states (Verified fit, Likely fit, No fit), and it remembers the shopper’s input within a session so they don’t have to re-enter their model on every product page they visit.

How it works for shoppers

The shopper-side flow:

1. Shopper lands on a product page.
2. The widget displays a heading like “Check whether this part fits your model” and two input fields.
3. Shopper enters brand, then model. Both fields offer autocomplete suggestions pulled directly from your records, so shoppers see real models you have data for.
4. The widget evaluates the input against your records and shows a result instantly:
   • Green “Verified fit” if there’s an exact match in your records.
   • Amber “Likely fit” if there’s a partial match — for example, the model came in via an alias, or there’s a series-level match without an exact model match.
   • “Not compatible” if there’s a clear no-match.
5. If the result is Verified or Likely, the shopper can add to cart with confidence. If it’s Not compatible, they avoid an expensive returns experience and you avoid the support ticket.

[Screenshot: Fit check widget on a product page showing the Verified fit state with brand and model entered.]

Adding it to your theme

The widget is a Shopify theme block, so install is done from the theme editor — no developer required.

1. In your Shopify admin, go to Online Store > Themes > Customize.
2. Open a product page template.
3. Click Add block in the section where you want the fit check — typically near the buy button so shoppers see it before they decide.
4. Search for “ModelMatch” — three blocks will appear in the picker.
5. Choose Fit Check Widget.
6. Save.

That’s it. The widget will appear on every product page that has compatibility records. Products without records simply won’t show the widget — no setup needed to handle that case.

Customizing copy and theme

ModelMatch lets you customize the messaging shoppers see. Go to ModelMatch admin > Storefront. From there you can change:

• Heading text — defaults to “Check whether this part fits your model.”
• Helper text shown below the heading.
• Brand and model field placeholders — defaults are sensible, but if your shoppers know specific terminology (like “purifier model” instead of “model”), tighten it up.
• Result messaging for each of the three states (Verified / Likely / Not compatible). The defaults are good; the customization is there for stores with a particular tone of voice.
• Disclaimer text shown below results — for example, “Always confirm fit by checking the part number printed on your existing filter.”

Color theme is configured on the same page. The choices are Light, Dark, and Minimal. Growth and Professional plans get all three; Starter is locked to Light. Whatever theme you pick applies to all three storefront blocks consistently — there’s no per-block theming.

[Screenshot: ModelMatch Storefront admin page showing the messaging customization fields for the fit check widget.]

Standalone finder

What it does

The standalone finder is a dedicated search experience where shoppers enter their equipment and get back every part in your catalog that fits — across product types, categories, and collections. Useful for shoppers who don’t know which product page to start on, shoppers exploring broad categories (“I need a humidifier filter, not sure which one”), and stores that want a “Find my part” entry point on the homepage or in the main nav. Available on Growth and Professional plans.

How it works for shoppers

The flow:

1. Shopper visits a page with the finder block. Common placements: a dedicated /pages/find-your-part, the homepage hero, or as a section in the main navigation.
2. They enter brand and model. Same autocomplete behavior as the fit check widget — the suggestions come straight from your records.
3. The finder evaluates the input and shows compatible parts, grouped by category.
4. Each result shows the product image, name, price, and an inline button to add directly to cart or view the full product page.
5. If no products match, the shopper sees a friendly no-match message — typically with a “browse-by-brand” fallback that nudges them toward parts you do carry for that brand.

One subtle but important behavior: if a record matches but isn’t linked to a Shopify product (an Unmapped record), the finder still shows it as “We confirmed this fits your equipment, but we don’t have this exact part in stock.” This still gives the shopper confidence that they’re in the right store and signals to you, on the Records page later, that a product link is missing.

[Screenshot: Standalone finder showing a brand and model entered with multiple compatible products as results.]

Adding it to your theme

The finder is a single-block install. Drop it in once and it’s live.

1. Decide where you want the finder. Common placements:
   • A dedicated page like /pages/find-your-part (best for prominent main-nav linking)
   • The homepage (top section, above the fold)
   • The main navigation as a header element
2. In Shopify admin, go to Online Store > Pages and create a new page if you’re using a dedicated page route.
3. Open the theme customizer.
4. Add the Standalone Finder ModelMatch block to the section where you want it.
5. Save.

If you want the finder in more than one place — say, both a dedicated page and a smaller version on the homepage — you can add the block to multiple templates. Each instance behaves independently.

Customization

The same Storefront admin page that customizes the fit check widget also handles finder copy:

• Heading and helper text on the finder.
• Empty-state copy — what shoppers see before they’ve entered anything.
• No-match copy — what shoppers see when no records match their entry.
• The browse-by-brand fallback list shown below the no-match message. This is genuinely valuable: when a shopper enters a model you don’t carry parts for, surfacing the brands you do carry parts for keeps them in the store and pointed toward likely-relevant products.

Catalog fit check

What it does

The catalog fit check turns a Shopify collection page into a self-filtering catalog. A shopper sets their equipment once at the top of the collection — brand and model — and from that point on, every product they see in the collection (and on any product page they navigate to from it) is checked against your compatibility data automatically. It’s the only one of the three storefront blocks that’s proactive — instead of waiting for a shopper to ask “does this fit?” on a single product, it answers the question continuously as they shop, in the background, without re-prompting on every page.

What shoppers see

The flow, end-to-end:

1. Shopper lands on a collection page — say “Air Filters” or “Replacement Filters.”
2. The catalog fit check appears at the top of the collection with brand and model fields.
3. Shopper enters their equipment once (e.g., Levoit, Core 300) and clicks Set.
4. The collection re-renders to show only the products that fit their equipment, with a clear control to clear the filter and see everything again.
5. As the shopper navigates collection → product → back to another collection, the saved model persists. They don’t re-enter on every page.

One caveat: this block depends on records being mapped to Shopify products. The catalog fit check works by hiding products that don’t have a compatibility match. If most of your records aren’t mapped, the block has limited value. Audit the Mapped column on your Records page before installing; if a healthy majority show Mapped, you’re set.

[Screenshot: A collection page with the catalog fit check at the top, showing filtered results matching a shopper's entered model.]

Adding it to your theme

1. In Shopify admin, go to Online Store > Themes > Customize.
2. Open a collection template.
3. Click Add block and search for Catalog fit check in the block picker.
4. Drop the block at the top of the collection section, above the product grid.
5. Save.

If your store uses a single default collection template for all collections (the common Shopify setup), adding the block once applies it to every collection. Custom per-collection templates each need their own install. The block is fully responsive and works on the same set of themes as the fit check widget and standalone finder.

When to use this block

The catalog fit check earns its place when shoppers tend to browse before knowing exactly what they need. Large category pages with hundreds of products benefit most — the block converts an overwhelming “where do I start?” into a guided shop-along. Stores with smaller, focused catalogs (under 100 products in any single collection) usually don’t need it; the categories are simple enough to browse directly. Pair it with the fit check widget on product pages for the strongest combined coverage: the catalog fit check helps shoppers narrow down to candidate products, and the fit check widget gives them a final verification before they add to cart.

Choosing which blocks to use

Not every store needs all three blocks. A practical heuristic:

• Most merchants should use the fit check widget at a minimum. It catches the most important moment in the shopper journey (product page, shopper actively considering this specific part) and works on any catalog size. If you only do one thing, do this.
• Add the standalone finder if shoppers struggle to navigate to the right product themselves. This is common in stores with deep catalogs — say, 1,000 or more products — or where shoppers typically don’t know which model they have until they search by it. The finder gives them a starting point that doesn’t require them to guess at categories.
• Add the catalog fit check if you have large category pages — hundreds of products in a single collection — and shoppers tend to browse before knowing what they need. The block converts browsing into a guided shop-along.

Stores with small, focused catalogs (under 100 products) often don’t need the catalog fit check; the categories are simple enough to browse directly without filtering. You can always add more blocks later as you understand how shoppers actually use your store.

Visual customization

ModelMatch supports three color themes for storefront blocks:

• Light — default. Pale background, dark text, copper accents. Works on the majority of Shopify stores out of the box.
• Dark — for dark-themed stores. Dark background, light text. Tested across the common dark-mode Shopify themes.
• Minimal — neutral, low-contrast styling. Best for premium or editorial-style stores that want the blocks to recede visually instead of stand out.

All Growth and Professional plans get all three themes. Starter is locked to Light. The theme applies to all three storefront blocks consistently — pick once in Storefront admin, and the same theme applies wherever ModelMatch blocks appear. There’s no per-block theming.

Testing your blocks

Verification after install is short but worth doing:

1. Visit your storefront (not preview mode — actual storefront, in an incognito window if possible to avoid cached state).
2. Try the block as a real shopper would: enter a brand and model from your records.
3. Verify the result is correct — that the right products show up, that messaging matches what you customized, that the theme matches what you picked.
4. For the fit check widget specifically, visit a product that should not have records and verify the widget hides itself. This catches misconfigurations where the widget is showing on every product regardless of whether it has data.

Before you test the storefront, use the Test Search admin page to verify your records are working at the data layer. Test Search runs the same lookup logic the storefront uses, so if Test Search returns no results for a brand and model, the storefront won’t either — and you’ve narrowed the problem to the data, not the block install.

Once your blocks are live, you’ll start seeing search activity in Insights. That’s where you learn what shoppers are actually searching for.