From paste to published in minutes

1. Add the component

Copy the Component URL from your purchase email and paste it straight onto your Framer canvas with Cmd/Ctrl + V. It lands with a working sample catalogue, so you see the full experience instantly.

Set width to Fill or a fixed width and height to Fit. The layout reflows on its own, from wide desktop rows down to a clean single phone column.

2. Choose the mode

• Product page checks one product. Set Product ID to a Product ID from your data. On CMS product pages, bind Product ID - and optionally Name, Image and Page - to your CMS fields.

• Catalogue finder lists every product that fits the visitor’s model, each with its own explanation and requirements.

3. Add your catalogue

• Models: a stable Model ID (letters, numbers and - . _ : / + #, no spaces), a Name, plus optional Brand, Variant and Image. Give every variant its own record - a result for one variant never carries over to another.

• Products: a Product ID and Name. Set Role to Adapter or Required part for anything a pairing can require. Add Page and Enquiry links, an Image and an optional Button label.

4. Define compatibility

Add one record per pairing: Model ID + Product ID + Status, with the reason in your own words.

• Compatible - a direct fit.

• Requires - list adapter or part IDs in Requires (separate several with |) and/or add a Condition. Shoppers see the adapter slot in between.

• Not compatible - explain why and add Alternatives: products with their own positive record for that model.

• Not confirmed - tell shoppers what’s happening.

No record for a pairing? It shows as Not confirmed yet with your enquiry link. Results never come from similar names, shared specs or guesswork. Add Source and Verified to show where every fit comes from.

5. Bulk setup with CSV

Switch Data to CSV and paste three tables. Your manual lists stay safe while CSV is active, so you can switch back at any time.

• Models: device_id, name, brand, variant, image

• Products: product_id, name, description, role (product, adapter, part), product_link, enquiry_link, image, button_label

• Compatibility: device_id, product_id, status (compatible, requires, incompatible, unconfirmed), explanation, requires, condition, alternatives, source, verified (YYYY-MM-DD)

Quoted values with commas and line breaks, escaped quotes, UTF-8, BOMs and every common line ending are handled. CSV images use Framer-hosted https://framerusercontent.com addresses. Each checker holds up to 500 models, 500 products and 5,000 records.

6. Check your data

The canvas report shows your counts and every item to fix, with its row or line: duplicate IDs, conflicting records, unknown IDs, missing adapters, invalid dates and unsupported links. Fix them and the checklist turns green.

Turn on Setup tools and open Preview to see every note, export your records as CSV with a verified round trip, and test new CSV before it goes live. Switch Setup tools off before you publish.

7. Make it yours

Pick Workbench, Side by side or Compact. Every label, prompt, result name and button is editable. Colors, fonts, connection line, card style, radius, spacing and text size all live in the property panel. Motion is short, purposeful and always follows the visitor’s reduced-motion setting.

8. Connect the next steps

• Product, adapter, part and alternative buttons open each product’s own Page link.

• Unlisted models and unconfirmed pairings go to your Enquiry link - point it at a contact page with a native Framer form.

• Share pairing copies a link that reopens the same selection. Copy details gives shoppers a tidy summary to paste into your form.

• Running two checkers on one page? Give each its own Checker ID so their links stay separate.

9. Publish

Publish as usual. New records go live with your next publish, so your checker always matches your catalogue.