Skip to content
English
Customer portal
Visit us at Arise GTM
  • There are no suggestions because the search field is empty.

Tabbed Pricing Pro CMS Module

Setup & Configuration Guide

Overview

Tabbed Pricing Pro adds a monthly/yearly billing toggle with discount labels, a plan comparison table, sticky tab navigation, separate monthly and yearly prices, and additional accent styling options.

What's Different from the Standard Version?

Feature Free Pro
Billing toggle — Monthly/Yearly toggle with discount badge
Separate prices Single price Monthly price + Yearly price per plan
Plan comparison — Side-by-side feature comparison table
Sticky navigation — Tabs stick to top when scrolling
Accent style Fixed Top Border, Side Border, Background Tint, or Gradient
Yearly discount label — Customisable "Save 20%" badge on toggle

Getting Started

  1. Open any page in the HubSpot editor.
  2. Search for Tabbed Pricing Pro in the module panel.
  3. Drag it onto your page.
  4. Configure plans with both monthly and yearly prices.

Pro-Only Fields

Pro Settings

Field What it does
Enable Billing Toggle Show a Monthly/Yearly switch above the plan cards.
Billing Default Which option is selected on page load: Monthly or Yearly.
Monthly Label Text for the monthly toggle option. Default: "Monthly"
Yearly Label Text for the yearly toggle option. Default: "Yearly"
Yearly Discount Label Badge text shown next to the yearly option (e.g. "Save 20%").
Enable Compare Show a "Compare plans" button that opens a feature comparison table.
Compare Default Open Whether the comparison table is open on page load.
Enable Sticky Nav Tab navigation sticks to the top of the viewport when scrolling.
Accent Style Top Border, Side Border, Background Tint, or Gradient.

Pricing Plans (Pro additions per plan)

Field What it does
Monthly Price The price shown when the toggle is set to Monthly.
Yearly Price The price shown when the toggle is set to Yearly (typically discounted).

Accent Styles

Style Effect
Top Border Featured plan has a coloured top border (clean, minimal).
Side Border Featured plan has a coloured left border (editorial style).
Background Tint Featured plan has a subtle coloured background.
Gradient Featured plan has a gradient border using accent + accent dark colours.

Example Configuration

Plan Monthly Yearly Featured
Starter $29/mo $24/mo No
Growth $79/mo $64/mo Yes
Enterprise Custom Custom No

Tips

  • Anchor on yearly: Set the billing default to "Yearly" — visitors see the lower price first and are more likely to commit to annual billing.
  • Discount label: Make savings tangible: "Save 20%" or "Save $180/year".
  • Comparison table: Only enable if your plans have meaningfully different features.
  • Sticky nav: Enable on long pricing pages so visitors can always switch between plans as they scroll.