Compare Items
Let visitors select items and compare them side-by-side in a comparison table. Great for product comparisons, pricing tables, or any scenario where users need to evaluate multiple options at once.
How it works
When Compare Items is enabled, you add a Compare button to your item buttons. Visitors click this button on any item to add it to their comparison. Once two or more items are selected, a floating compare pill appears at the bottom of the page. Clicking it opens a full comparison modal showing all selected items in a table format.
Each row in the comparison table displays a field, and each column represents an item — making it easy to spot differences at a glance.
Setting up Compare Items
Enable the feature
- Open your widget in the Creator
- Click the Add-ons tab in the sidebar
- Scroll to the Compare Items section and toggle it on
Add a Compare button
- Go to the Content tab
- Open the Buttons section (on either the List or Details page)
- Click Add Button
- Choose Compare as the button action
You can add the Compare button to both the items list and detail pages so visitors can compare from anywhere.
Configure comparison fields
Back in the Add-ons tab under Compare Items, open the Comparison Fields accordion. These are the fields that appear as rows in the comparison table.
- Click Add Field to add fields one by one
- Or use Copy fields from to quickly import fields from your List Page or Details Page
- Each field can have its own type (text, image, badge, link, etc.) and styling via the Edit popup
- Drag to reorder fields — the order here matches the row order in the comparison table
If no comparison fields are configured, the compare modal will show all visible fields from your items list as plain text.
Add action buttons (optional)
You can add buttons to the comparison modal (e.g., “View Details” or “Buy Now”) under the Buttons section within Compare Items. Use Copy buttons from to import existing buttons from your List or Details page.
Customise styling
Click Styles & Settings at the bottom of the Compare Items section to customise:
- Pill background color — the floating compare pill
- Pill text color — text and icon color on the pill
- Count badge color — the number badge on the pill
Max items to compare
By default, visitors can compare up to 4 items at a time. You can adjust this from 2 to 6 in the Compare Items settings. When the maximum is reached, visitors need to remove an item before adding another.
The comparison modal
The comparison table has:
- Column headers — each compared item’s title (clickable to open the detail page if enabled)
- Field rows — one row per comparison field, with the field label on the left
- Action buttons — any buttons you’ve configured appear at the bottom
- Remove buttons — an X on each column header to remove that item from the comparison
Field types in the comparison table
Comparison fields support all the same types as your additional fields:
| Type | Display |
|---|---|
| Text | Plain text value |
| Heading | Bold, larger text |
| Image | Thumbnail previews |
| Badge | Colored pill labels |
| Link | Clickable URL |
You can set the field type and styling via the Edit popup on each comparison field.
How data is stored
Compared items are stored in the visitor’s browser session (sessionStorage). This means:
- Selections persist while browsing the widget
- Selections clear when the browser tab is closed
- Each widget maintains its own separate comparison list
Frequently asked questions
Can visitors compare items across different pages?
Yes. Compared items persist as visitors navigate between the list view and detail pages within the same widget. The floating pill stays visible throughout.
Does compare work with script embeds?
Yes. In script embeds, the compare icon appears in the controls bar instead of a floating pill (since floating elements can’t escape the iframe). The comparison modal opens in an overlay above the embed.
Can I use compare with payments?
Yes. You can add buy-now or add-to-cart buttons to the comparison modal, letting visitors purchase directly from the comparison view.
Related
- Buttons — General button configuration
- Additional Fields — Field types and styling
- Items & Details Pages — Configuring items lists and detail pages