![ARISE GTM logo grey.png]](https://arisegtm.com/hs-fs/hubfs/ARISE%20GTM%20logo%20grey.png?height=40&name=ARISE%20GTM%20logo%20grey.png){kind=small}
Tabbed Pricing (SaaS) CMS Module
Setup & Configuration Guide
Overview
The Tabbed Pricing module is a HubSpot CMS module that displays multiple pricing plans in a tabbed layout, letting visitors compare plans without leaving the page. It creates a clean pricing section with plan cards, feature lists, and call-to-action (CTA) buttons. Visitors click a tab to view that plan's pricing card, which displays the price, features, and CTA buttons.
Best for: SaaS pricing pages, service tier comparison, membership plans, subscription offerings, and any page comparing multiple plan options.
Getting Started
- Open any page in the HubSpot editor.
- Search for Tabbed Pricing in the module panel.
- Drag it onto your page.
- Configure each plan using the repeater fields in the editor panel.
Note: Each instance of the module requires a minimum of 2 plans and supports a maximum of 5 plans.
Field Reference
Section Header
| Field | What it does |
|---|---|
| Eyebrow | Small text above the heading (e.g. "Pricing"). |
| Heading | The main section heading. Default: "Simple, transparent pricing" |
| Footnote | Rich text below the pricing cards for disclaimers or notes. |
Pricing Tabs (Repeater — 2 to 5 plans)
| Field | What it does |
|---|---|
| Tab Label | The text shown in the tab navigation (e.g. "Starter", "Growth", "Enterprise"). |
| Badge | Optional badge text shown on the tab (e.g. "Popular", "New"). |
| Featured | When ON, this plan gets a highlighted/promoted visual style. |
| Plan Name | The plan name shown inside the card. |
| Tagline | A short description below the plan name. |
| Price Label | Text above the price (e.g. "Starting at", "From"). |
| Price | The displayed price (e.g. "$29", "Free", "$199"). |
| Price Per | The billing period (e.g. "/mo", "/year", "/user/mo"). |
| Price Note | Optional small text below the price (e.g. "billed annually"). |
| CTA Label | Primary button text. Default: "Get started" |
| CTA Link | URL the primary button points to. |
| CTA 2 Link | URL the secondary button points to. |
| CTA 2 Label | Optional secondary button text (e.g. "Contact Sales"). |
| Features Heading | Section label above the feature list. Default: "What's included" |
| Features | Repeater (1–20) — each feature is one line of text. |
Styles
| Field | What it does |
|---|---|
| Accent Colour | Primary brand colour for featured elements and buttons. |
| Ink Colour | Main text colour. |
| Nav Background | Background colour of the tab navigation bar. |
| Card Background | Background colour of plan cards. |
Example Configuration
| Tab Label | Plan Name | Price | CTA | Featured |
|---|---|---|---|---|
| Starter | Starter | $29/mo | Start free trial | No |
| Growth | Growth | $79/mo | Start free trial | Yes (Popular) |
| Enterprise | Enterprise | Custom | Contact Sales | No |
Tips
- Featured plan: Mark your most popular plan as "Featured" — it gets a highlighted border and visual emphasis.
- Badges: Use badges sparingly — "Popular" or "Best Value" on one plan draws the eye.
- CTA buttons: Use action-oriented text: "Start free trial", "Get started", "Book a demo".
- Footnote: Use for "All plans include 14-day free trial" or "Prices exclude VAT".
Frequently Asked Questions
- Can I use more than 5 plans? No — the module supports 2 to 5 plans per instance. For more plans, see the Tabbed Pricing Pro module.
- Can I add icons to feature list items? Feature items are plain text only in this version. Icon support is available in Tabbed Pricing Pro.
Upgrading to Pro
Need monthly/yearly billing toggle, plan comparison table, sticky navigation, or accent style options? See the Tabbed Pricing Pro module.
Need help with your HubSpot CMS? If you're building, rebuilding or improving a HubSpot website, see how ARISE GTM approaches HubSpot CMS builds and migrations.