Build a product comparison tool: pick models, compare specs side by side
A good product comparison tool lets a visitor choose the two or three models they're torn between and see only the rows that matter, with the differences made obvious. Anticode can build one as an app, with every spec read from a CMS collection you keep up to date in the dashboard, so a price change or a new model doesn't need a rebuild.
Why a static table isn't enough
A fixed table with every product as a column works for three products. At eight it becomes a wall: on a phone the visitor scrolls sideways and loses the row labels, and the two models they care about are never next to each other. A comparison tool fixes that by letting people choose. The visitor ticks the models, and the tool lays out only those, with the row labels pinned to the left.
Cap the selection at four on a laptop and two or three on a phone. Beyond that nobody actually compares; they skim.
How to structure the specs
Before you describe the tool, settle the spec sheet itself. Each product needs the same fields, in the same units, or the comparison lies. Group the rows so visitors can collapse what they don't care about:
| Group | Rows | Notes |
|---|---|---|
| Essentials | Price, weight, run time, charge time | Always open; this is what most people decide on |
| Cleaning | Suction modes, bin capacity, filter type | Use one unit for capacity throughout (litres) |
| In the box | Heads and tools included | A yes/no row per tool reads faster than a list |
| Ownership | Warranty length, spare battery available | Facts you can stand behind, not marketing lines |
Write values as data, not prose. "45 minutes" can be compared; "long-lasting battery" can't. Where a spec genuinely doesn't apply, say "Not applicable" rather than leaving a blank that looks like missing data.
What makes the comparison readable
- Highlight differences. A toggle that hides rows where every chosen product is the same often halves the table.
- Mark the better value where it's objective. Lighter weight or longer run time can be emphasised; "better design" can't.
- Sticky headers. Product names and images stay visible as the visitor scrolls down the rows.
- Shareable state. The chosen products can sit in the page address after the
#, so a visitor can send the exact comparison to someone else. - A clear next step per column. A link to the product page or your shop, or an enquiry button.
Keeping the specs in a CMS collection
When an app needs content the owner changes, Anticode puts it in the project's CMS collections, edited in the dashboard. For a comparison tool that's the natural home for the spec sheet: one collection, say models, with one entry per product and a typed field per spec. The app reads the collection when the page is served and builds the table from it. Add a model, correct a weight or change a price in the dashboard, and the comparison follows.
Describe it like this: "A comparison tool for our five cordless vacuum cleaners. Visitors pick up to three and see specs side by side, grouped into Essentials, Cleaning, In the box and Ownership. Keep the specs in a collection I can edit, with fields for price, weight in kilograms, run time in minutes, bin capacity in litres and warranty in years. Add a 'show only differences' switch and a link to each product page."
Check the field list carefully before you build, because it becomes the shape of your data. Adding a spec later is a change request; renaming one after you've filled in twenty entries is more work. The CMS collections page covers how collections are edited.
Limits worth knowing
- Read-only for visitors. The collection is edited by you in the dashboard; nothing a visitor does changes it.
- No live prices or stock. The app runs in a sandbox with no network, so it can't fetch prices from a supplier, a marketplace or your shop. Prices are whatever you last typed into the collection.
- No checkout. The tool can link to a product page or a payment link you already use, but it can't take payment itself.
- No reviews or ratings feeds. It can't pull star ratings from another site. If you show review scores, you type them in and should say where they came from.
For buyers who need help choosing rather than comparing, a short quiz is often better: see the product recommendation quiz. For made-to-order products with options, a product configurator fits.
Questions people ask
How many products can the comparison tool hold?
As many as you add to the collection. The tool lets visitors choose a few at a time, so a long catalogue stays readable.
Can I compare products from other brands?
Yes, if you type in their specs yourself. Keep them accurate and dated, because the app can't check them against the makers' sites.
Will the table work on a phone?
Ask for it to fit two products side by side on a phone with pinned row labels, then test it at phone width in the preview.
Can visitors filter by price or feature first?
Ask for a filter step before the comparison, such as a price range or must-have features, and test that the filtered list makes sense with your real data.