Pricing Comparison widget

The Pricing Comparison widget lets you compare multiple plans side by side in a detailed feature comparison table.

While the Pricing Plans widget is designed primarily to present and sell your pricing options at a glance, the Pricing Comparison widget is useful when visitors need to understand the specific differences between plans before making a decision.

You can organize features into sections, display text values or included/not-included states, highlight a recommended plan, offer monthly and yearly pricing, and add a separate call-to-action for each plan.

This article explains how to build your comparison, manage plans and features, and customize its appearance.

Heading and subheading

Use the introductory fields to explain what visitors are comparing.

Heading

Enter the main heading displayed above the comparison.

For example:

Compare plans

Subheading

Use the Subheading field for a short supporting description.

For example:

Find the plan that scales with you. Switch or cancel anytime.

Keep both relatively concise so visitors can quickly move into the actual comparison.

Plans

The Plans section contains the pricing options displayed across the comparison.

From here, you can:

  • Add plans
  • Edit existing plans
  • Reorder plans
  • Delete plans

Add a plan

Click Add plan to create another pricing option.

Reorder plans

Use the drag handle next to a plan to change its position.

The order shown here determines the order in which plans appear in the comparison.

Edit a plan

Click the settings icon next to a plan to edit its pricing and call-to-action information.

Delete a plan

Click the trash icon to remove the plan.

💡 Tip

Keep the number of plans manageable. A detailed comparison becomes harder to scan when visitors need to compare too many columns at once.

Plan settings

Each plan contains the information displayed at the top of its comparison column.

Plan name

Enter the name of the plan.

For example:

  • Starter
  • Pro
  • Business

Icon

Select an optional icon to visually distinguish the plan.

Currency

Enter the currency symbol used for the plan.

For example:

$

The position of the currency symbol can be controlled globally in the Styling settings.

Price / month

Enter the monthly price.

For example:

19

Price / year

Enter the yearly price.

For example:

180

When the monthly/yearly toggle is enabled, visitors can switch between the two prices.

Single purchase

Enable Single purchase (no /month or /year) when the option has one fixed price instead of recurring monthly or yearly billing.

Button text

Enter the text displayed on the plan's call-to-action button.

For example:

  • Get started
  • Start free trial
  • Choose plan
  • Contact sales

Click Add Link to choose where visitors should be taken when they select the plan.

Label

Use Label to add a short message above a plan.

For example:

  • Most popular
  • Recommended
  • Best value

Enable Featured plan (highlight) to visually emphasize a plan within the comparison.

The highlighted column can stand out throughout the table, helping visitors follow that option while comparing individual features.

💡 Tip

Highlighting one recommended plan can make a large comparison easier to navigate. Avoid highlighting several plans at once, as this weakens the visual hierarchy.

Features

The Features section defines the rows displayed underneath the plans.

Features can contain either actual comparison information or act as section headings that organize related features into groups.

From here, you can:

  • Add features
  • Add sections
  • Edit features and sections
  • Reorder them
  • Delete them

Add a feature

Click Add feature to create another comparison row.

A feature could represent something such as:

  • Projects
  • Team members
  • Storage
  • Analytics dashboard
  • Priority support
  • Custom integrations

For each feature, configure what should be displayed under the different plans.

Depending on the feature, this could be:

  • A number such as 3
  • A value such as 10 GB
  • Text such as Unlimited
  • An included state shown with a ✓
  • A not-included state shown with a ✕

This makes it possible to combine quantitative limits and simple feature availability in the same comparison.

Reorder features

Use the drag handle to move features up or down.

Put the features that matter most to the buying decision near the top.

Edit a feature

Click the settings icon next to a feature to edit its label and the information displayed for each plan.

Delete a feature

Click the trash icon to remove it.

Feature sections

For longer comparisons, you can divide the feature list into logical groups.

For example:

Essentials

  • Projects
  • Team members
  • Storage

Advanced features

  • Analytics dashboard
  • Priority support
  • Custom integrations
  • SSO & security

Section heading

When editing an item, enable Section heading (groups features below) to turn it into a heading rather than a regular comparison row.

Enter the section name in Feature label.

For example:

Advanced features

The features underneath it are then visually grouped until the next section heading.

💡 Tip

Use sections when the comparison contains many features. Grouping related information makes a long table much easier to scan than presenting every feature in one continuous list.

Layout

The Layout setting controls how the plans and features are presented.

Available options:

  • Comparison table
  • Plan cards

Comparison table

Displays the plans as columns with individual features arranged in rows underneath them.

This is the primary layout for detailed plan comparisons and makes differences between plans easy to scan horizontally.

It works particularly well when you need to compare:

  • Limits
  • Included features
  • Storage
  • Team sizes
  • Support levels
  • Advanced functionality

Plan cards

Displays the same plan and feature information using a more card-oriented presentation.

Use this when you want a stronger visual separation between individual plans while still retaining the detailed feature information.

💡 Tip

Use Comparison table when detailed feature-by-feature comparison is the main purpose of the section. If you mainly need a simpler overview of prices and key benefits, the Pricing Plans widget will usually be a better fit.

Monthly / yearly pricing

Enable Monthly / yearly toggle to let visitors switch between the monthly and yearly prices entered for each plan.

Default billing

Choose which billing period is selected when the page first loads.

Available options include:

  • Monthly
  • Yearly

If yearly billing represents the better-value option, you may choose to make it the default.

💡 Tip

When annual pricing is discounted, clearly showing the difference between monthly and yearly options can make the value of the annual plan easier to understand.

Styling

The Styling settings control the overall appearance of the comparison.

Theme

Choose the visual theme used for the widget.

Select the option that works best with the surrounding page background.

Name & price font

Controls the font family used for prominent plan information such as:

  • Plan names
  • Prices

For consistency, use typography that fits with the rest of your website.

Currency symbol position

Controls whether the currency symbol appears:

  • Before the amount
  • After the amount

For example:

$49

or:

49 $

Choose the format appropriate for your currency and audience.

Colors

Several colors can be customized.

Accent color

Controls prominent elements such as:

  • Featured plan highlights
  • Icons
  • Included feature indicators
  • Labels
  • Buttons and other emphasis elements

Card background

Controls the background color used for plan areas and cards.

Text Color

Controls the primary text color throughout the comparison.

Make sure there is sufficient contrast against the selected background.

Toggle text color

Controls the text color used around the monthly/yearly pricing toggle.

For consistency, use colors from your website's Global Colors whenever possible.

Pricing Plans vs Pricing Comparison

The two pricing widgets are intentionally similar, but they serve different purposes.

Pricing Plans widget

Best when you want to give visitors a relatively quick overview of:

  • Available options
  • Price
  • Short description
  • Main benefits
  • Call to action

Pricing Comparison widget

Best when visitors need to examine:

  • Detailed plan differences
  • Individual feature availability
  • Limits and allowances
  • Multiple feature categories
  • Included and excluded functionality

You can also use both on the same page: start with Pricing Plans for the high-level overview and place a Pricing Comparison further down for visitors who want the complete breakdown.

Best practices

  • Keep plan names short and easy to distinguish
  • Arrange plans in a logical progression
  • Put the most important comparison criteria near the top
  • Use ✓ / ✕ for simple included/not-included features
  • Use text or numbers when a feature needs more context
  • Group long feature lists into logical sections
  • Highlight only one primary or recommended plan
  • Keep labels such as Most popular short
  • Make call-to-action buttons specific to each plan when appropriate
  • Avoid including minor features that do not affect the buying decision
  • Check large comparison tables carefully on both desktop and mobile

💡 Tip

A detailed comparison should reduce uncertainty, not create more of it. Include the information visitors genuinely need to choose between plans and leave out differences that do not meaningfully affect the decision.

Summary

  • The Pricing Comparison widget creates a detailed plan and feature comparison
  • Add a heading and supporting subheading
  • Create, reorder, edit, and remove pricing plans
  • Add monthly and yearly pricing or configure a single purchase
  • Give each plan its own icon, label, button, and link
  • Highlight a featured plan
  • Add individual features and define values for each plan
  • Organize features using section headings
  • Choose between Comparison table and Plan cards
  • Offer a Monthly / yearly toggle and choose the default billing period
  • Customize theme, typography, currency position, and colors
  • Use this widget when visitors need more detail than the standard Pricing Plans overview provides

Used well, the Pricing Comparison widget makes even relatively complex pricing structures easier to understand and helps visitors confidently identify the option that best matches their needs.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.