Skip to content
English
  • There are no suggestions because the search field is empty.

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
  1. Open any page in the HubSpot editor.
  2. Search for "Comparison Table" in the module panel.
  3. Drag it onto your page.
  4. 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 a scope="row" header, so screen readers announce the row/column context.
  • Tick/cross marks carry a visually-hidden "Included" / "Not included" label.
External Dependencies

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.
Troubleshooting
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.
Support

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