> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Compatibility finder

> A short form where shoppers pick their device, model and what they need, and land on products that list that model as compatible.

![Compatibility finder on the storefront](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/compatibility-finder.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=94a0b783dd247440c1f563eb25df2dd3)

Compatibility finder, highlighted with the demo content

## Where to find it

Home page. In the theme editor choose Home page in the page selector, then select Compatibility finder.

## How it works

* Shoppers choose a device type, a model and what they need, then press Show products.
* With a need chosen, they land on that Need block's collection, filtered to products whose specs.compatibility metafield lists the model.
* With Anything that works with it chosen, or without JavaScript, the form runs a product search for the model name instead.
* The Model menu lists only the models of the chosen device type. With a single Device type block, the Device type menu is hidden.
* The I need menu shows only when at least one Need block has a Collection. On install the two Need blocks have none, so the finder searches until you choose collections.
* The text sits beside the menus on wide screens and above them under 1100 px. On phones each menu and the button take the full width.
* The section is hidden until a Device type block has at least one model. In the theme editor a note shows in its place.

![Compatibility finder in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-compatibility-finder.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=6e18193cb9ecad2b9ea7e6d9a17d955c)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Give products the metafield specs.compatibility in Settings → Custom data → Products, type List of single line text, with one entry per device model the product works with.
* In the Search and Discovery app, add that metafield as a filter. Without the filter, collection pages ignore the model and show every product.
* Add a Device type block per kind of device, such as A USB-C laptop, and type its Models one per line, written exactly as in the metafield.
* Add a Need block per shopping goal, with a Label such as Charge it faster and the Collection to open.
* Edit Heading and Text, and use Note under the form for a short line, such as how often the model list is updated.
* Up to 24 blocks in all.

## Settings

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Find what works with your device. |
| **Text** | Text. Default: Every product lists the devices it works with, so these matches are checked, not guessed. |
| **Note under the form** | Text. |

> [!TIP]
>
> Shoppers pick a model and a need, and land on the need's collection filtered by that model. Give products a specs.compatibility metafield (a list of models), then add it as a filter in the Search and Discovery app. Without the filter, collection pages ignore the model. With no need chosen, or without JavaScript, the form searches the store for the model.

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

## Blocks

Up to 24 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Device type

| Setting | What it does |
| - | - |
| **Device type** | Text. Default: A USB-C laptop. |
| **Models** | Text (several lines). One per line, written exactly as in the specs.compatibility metafield, such as MacBook Air M3. |

### Need

| Setting | What it does |
| - | - |
| **Label** | Text. Default: the collection title. Default: Charge it faster. |
| **Collection** | Choose a collection. |

> [!NOTE]
>
> The models in the default blocks (MacBook Air M3, iPhone 17 and others) are examples. Replace them with models your products list in specs.compatibility, or shoppers will land on empty results.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.