Comparison Table — Setup & Configuration Guide
Overview
The Comparison Table module presents a feature-by-feature comparison across up to three columns, with a highlighted column for your own offering. Every column, price, and row is editable in the fields panel.
Best for: "why choose us" pages, product/competitor comparisons, plan differentiators, and buyer's-guide content.
Getting Started
- Open any page in the HubSpot editor.
- Search for "Comparison Table" in the module panel.
- Drag it onto your page.
- Set the column names/prices and build your comparison rows in the fields panel.
Field Reference
Columns & Banner
| Field | What it does |
|---|---|
| Banner text | Headline shown above the table. |
| Column 1 / 2 names + prices | The comparison columns (e.g. alternatives). |
| Column 3 name + price | Your highlighted column. |
| Highlight colour | Accent for the highlighted column. |
Comparison rows (repeater)
Add each row as either:
- a category divider (a section heading spanning all columns), or
- a feature row with a value per column. Each cell can be a tick, a cross, plain text, muted text, or a badge, plus an optional note after a tick.
Reorder, add, or remove rows entirely in the fields panel. The module ships with an example set you can edit or replace.
Design settings
Layout, container width, padding, background (colour/gradient/image with overlay), borders, and an optional section ID for anchor links.
Example Configuration
- Category: Pricing & access → rows for tier required, fees, billing.
- Category: Capabilities → tick/cross across columns, with notes on your highlighted column.
Accessibility
- Column headers use
scope="col"and each feature row's first cell is ascope="row"header, so screen readers announce the row/column context. - Tick/cross marks carry a visually-hidden "Included" / "Not included" label.
None beyond Google Fonts if you select a Google font in the theme. No external scripts or CDN requests; all values render from your content.
Limitations & Known Behaviour- Three comparison columns (column 3 is the highlighted one).
- On narrow screens the table scrolls horizontally rather than converting to cards; check 200% zoom and long unbroken values for your content.
- Tick/cross use conventional green/red semantics.
| Symptom | Likely cause / fix |
|---|---|
| A row shows a blank cell | Set the cell's value type (tick/cross/text) and, for text/badge, its text. |
| Category row shows column values | Category dividers ignore column values — that's expected. |
| Table clipped on mobile | Expected horizontal scroll; consider shorter cell text. |
Provided by Arise GTM. For setup help or to report an issue, contact support@arisegtm.com. Typical response time: within 2 business days (Mon–Fri).
Privacy & Terms- Privacy policy: https://www.arisegtm.com/privacy
- Terms of use: https://www.arisegtm.com/terms-of-service
- No visitor data is collected or sent externally by this module.