HubSpot Marketplace Module

Comparison Matrix Pro for HubSpot CMS

Product & Feature Comparison Tables with Billing Toggle, Collapsible Categories & Tooltips

A premium HubSpot comparison table module that displays plans, products, or services side by side in a structured grid with categorized feature rows, check/cross/partial icons, text values, tooltips, featured column highlights, and a billing toggle. Up to 6 products, 10 categories, 30 features per category, and 80+ style controls.

Get the Module arrow_outward Works with any HubSpot CMS theme · Pure vanilla JavaScript · $9.99
Comparison Matrix Pro module for HubSpot CMS showing a product comparison table with featured column, billing toggle, and collapsible categories

Everything you need in a comparison table

grid_view

Side by Side Comparison Grid

Display 2 to 6 products in a CSS Grid layout with categorized feature rows. Five value types per product per feature: check, cross, partial, text, or empty. Split header and body architecture for horizontal scroll on mobile while headers stay visible.

toggle_on

Billing Toggle with Discount Badge

Animated switch between two pricing sets with customizable labels. Optional discount badge with configurable text. Smooth transition between price states. Toggle tabs with active and inactive styling and ARIA attributes for accessibility.

star

Featured Column Highlight

Mark any product as featured and the entire column gets a distinct background highlight with optional top border accent. Featured badge with absolute positioning that sits in the header padding space. The highlight extends through every row: header, categories, features, and CTA.

unfold_less

Collapsible Categories

Category rows act as accordion headers. Click to collapse or expand all feature rows within that category. Animated chevron indicator. Optional smooth max-height and opacity animation controlled by a settings toggle. Categories can start collapsed.

info

Tooltips on Every Feature

Optional tooltip per feature row for additional context. Keyboard accessible with tabindex and aria-label attributes. Custom tooltip background and text colors configurable from the Style tab. Tooltips appear on hover and focus.

text_fields

Dual Font Pickers

Separate Primary font (title, product names, prices) and Secondary font (feature names, values, buttons, labels, tooltips, badges, categories). Full Google Fonts picker with auto-loading. Or check one box to inherit fonts from your page or theme.

tune

8 Layout and Behavior Toggles

Compact or comfortable layout, sticky header, sticky first column, striped rows, show or hide CTA row, hover highlight, animate collapse, and scroll animation. Each toggle is independent so you build exactly the table your page needs.

palette

80+ Style Controls

Full visual control across 13 groups: fonts, section background, container width, heading, table, product headers, featured column, badges, category headers, feature rows, buttons (primary, secondary, ghost), toggle switch, and responsive breakpoints. Nothing is hardcoded.

Works with any HubSpot theme

Comparison Matrix Pro is a standalone module. Install it in any HubSpot CMS portal and drop it on any page. No theme dependency, no jQuery, no external libraries. Pure vanilla JavaScript with zero hardcoded values. Multiple instances on the same page are fully isolated via scoped CSS.

Questions

How many products and features can I compare?

add
Up to 6 products displayed as columns. Up to 10 feature categories, each with up to 30 features. Each product can have its own name, icon (SVG paste), dual pricing for billing toggle, price note, and a CTA button with configurable style.

What value types can features have?

add
Five types per product per feature: check (green checkmark), cross (red x), partial (yellow circle), text (custom string like "10 GB" or "Unlimited"), or empty. Colors for check, cross, and partial icons are fully configurable from the Style tab.

How does the mobile layout work?

add
The table uses a split header and body architecture. On mobile, the body scrolls horizontally while headers stay fixed. The first column can be set to sticky so feature names remain visible while scrolling through products. Responsive font scaling is configurable at tablet and mobile breakpoints.

Do you offer support?

add
Yes. Documentation included, plus email support for setup and customization questions. Response time is within 5 business days.

Build your comparison table with Comparison Matrix Pro

The most complete product and feature comparison table module on the HubSpot Marketplace. Billing toggle, collapsible categories, tooltips, featured column, and 80+ style controls.

Get the Module arrow_outward