Your HubSpot site needs a product comparison table. Maybe you sell three plans and visitors cannot figure out which one includes what. Maybe you are comparing your product against competitors and want a clean, structured layout that does the selling for you. Either way, the default HubSpot modules do not have anything built for this. You end up with a rich text table that breaks on mobile, or a custom coded section that nobody on your marketing team can update.
Comparison Matrix Pro is a standalone HubSpot comparison table module that handles everything: side by side product grids, categorized feature rows, collapsible categories, billing toggles, featured column highlights, tooltips, and CTA buttons. Drop it on any page, configure it from the visual editor, and publish. No developer needed. No theme dependency. No jQuery.
When visitors land on a pricing or product page, they are making a decision. They need to see differences between options at a glance. A bulleted feature list forces them to read everything, remember what Plan A includes, scroll back up to check Plan B, and mentally compare. That is friction, and friction kills conversions.
A structured comparison table removes that friction entirely. Products sit in columns. Features sit in rows. Check marks, crosses, and text values make differences immediately visible. A 2025 design study found that pricing pages with clear visual hierarchy and whitespace convert 28% better because they reduce cognitive overload. The comparison table format is the standard for SaaS pricing pages because it works.
Companies like HubSpot, Slack, Notion, and every serious SaaS business use comparison tables on their pricing pages. The reason is simple: when people can scan and compare without effort, they make decisions faster and with more confidence.
HubSpot does not ship a native comparison table module. Your options have been:
Comparison Matrix Pro was built because every other option on the HubSpot Marketplace falls short of what a real SaaS pricing page or product comparison page requires.
Display 2 to 6 products as columns in a CSS Grid layout. Each product gets its own header with name, optional SVG icon, dual pricing (for billing toggle), a price note, and a CTA button. The grid is not built with HTML tables. It uses CSS Grid, which means full responsive control without the layout headaches that come with traditional table markup.
Organize features into up to 10 categories, each with up to 30 features. Every feature supports five value types per product: check (green checkmark), cross (red x), partial (yellow circle), text (custom string like "10 GB" or "Unlimited"), or empty. This covers every comparison scenario from simple yes/no feature checks to nuanced plan differences.
Category rows act as accordion headers. Click to collapse or expand all features within that category. This is critical for comparison tables with a lot of features. Visitors can focus on the categories that matter to them without scrolling through 50 rows of features they do not care about. Categories can be set to start collapsed, and the collapse animation is configurable.
An animated switch between two pricing sets. Label it Monthly/Annual, or use any custom labels. Each product has two price fields, one for each toggle state. An optional discount badge ("Save 20%") surfaces the savings incentive right at the decision point. The toggle uses ARIA attributes for accessibility.
Mark any product as featured and the entire column gets a distinct background highlight that extends through every row: header, category rows, feature rows, and CTA row. An optional top border accent and a positioned badge ("Most Popular" or any custom text) draw the eye to your recommended plan. This is the visual nudge that guides visitors toward the option you want them to choose.
Optional info tooltip on any feature row. Hover or focus to see additional context. Keyboard accessible with tabindex and aria-label. Useful for explaining what a feature actually means without cluttering the table with long descriptions.
Mobile accounts for 58% of SaaS pricing page traffic in 2026. A comparison table that breaks on mobile is not just an inconvenience. It is lost revenue.
Comparison Matrix Pro uses a split header and body architecture. On mobile, the body scrolls horizontally while product headers stay visible at the top. The first column (feature names) can be set to sticky so visitors always see what they are comparing as they scroll through products. Font sizes scale down at configurable tablet and mobile breakpoints.
This is not a "stack everything vertically and hope for the best" approach. The table stays a table on mobile, but one that actually works with touch and small screens.
Every visual element is configurable from the Style tab in the HubSpot editor. The controls are organized into 13 groups:
Nothing is hardcoded. If your brand uses a specific shade of green for checkmarks or a particular border radius on buttons, you set it once and it applies everywhere.
Beyond styling, eight settings toggles control how the table behaves:
Comparison Matrix Pro is not limited to pricing tables. Here is what teams are using it for:
Comparison Matrix Pro is a standalone module. It does not require a specific theme. Install it in any HubSpot CMS portal, drop it on any page template, and configure everything from the visual editor. Multiple instances on the same page are fully isolated through scoped CSS, so you can run two different comparison tables on one page without style conflicts.
No jQuery. No external dependencies. Pure vanilla JavaScript. Fast load times and clean Core Web Vitals scores because the module does not pull in libraries your visitors do not need.
Comparison Matrix Pro is available on the HubSpot Marketplace for $9.99. See the live demo and full documentation on the product page. Browse all Studio Nope modules.
If your HubSpot pricing page or product comparison page is still a rich text table that breaks on mobile or a static layout that nobody can edit, Comparison Matrix Pro is the module that fixes it.