When managing multiple pricing tiers or offerings for your services, it is crucial to help your customers understand the differences beyond just the price. And the pricing table element will make it easy. So, let’s check how to use it to display your service pricing in your Funnels, Websites, Stores, and Blogs.

Adding the Element #

Navigate to the Site section and head to the Funnels, Websites, Stores, or Blogs.

Edit a page or blog site to access the builder.

Click the plus sign icon to open the Quick Add to open the element menu, then drag and drop the Pricing Table element.

General Settings #

Select between four different arrangements to showcase your pricing and plan differences. The options are:

• Grid Mode: clean card layout with up to 5 columns.
• Carousel Mode: sliding plans with auto-play and pause on hover.
• Classic Table: traditional table with horizontal scrolling.
• Comparison Table: sticky first column for easy side-by-side viewing.

Once you’ve selected your layout, you can modify its look with the dials below.

Use the typography tab to customize the look of your offering’s text.

Managing Your Columns #

Each pricing tier will be contained within a Column; you can manage them in the general settings in the Columns tab. Click “+ Add Column” to create a new one. You can click the trash can icon to remove it or drag its card into place to reorganize it.

To edit a column’s content, overwrite it directly on the element, similarly to a text element.

Column Features #

For all options below, the changes will only be applied to the selected column. Starting with the option to remove the column’s title (1) or caption (2), and adding a highlight label (3) or image.

In the Column Features menu, you can add (1), remove (2), and reorder the features you’re attributing to the plan.

The Feature Tip allows you to add a small explanation, displayed upon hovering, for the selected feature.

Pricing #

To set a column’s pricing, first select a pricing model from the dropdown menu.

If selecting a Subscription or Per Unit Model, define the charge frequency.

Set your price (1), which will be displayed in big numbers, add any previous price you wish to use for comparison (2), and enable or disable (3) the discount text.

Button Actions #

In this section, you can select to enable or disable the column’s button (1) and CTA text.

Select a Button Action, then configure the follow-up actions for it.

Styles #

Use this section to customize the look of your pricing table. Options within this section include Colors, Box Shadow, Border, Line Height, Text Transform (for text formatting), Custom Class, and CSS Selector.

Once you’ve modified the element to your liking, save and publish your changes.

There you have it; now you can easily display multiple pricing options in a professional and centralized way, helping you catch customers’ attention and direct them to pick their best match. We hope you enjoy it.

Frequently Asked Questions #

Where can I use the Pricing Table element? #

You can add the Pricing Table to Funnels, Websites, Stores, and Blogs from the Site section by editing a page to access the builder.

What layout options are available? #

You can choose from Grid Mode (up to 5 columns), Carousel Mode (sliding plans with auto-play), Classic Table (horizontal scrolling), and Comparison Table (sticky first column for side-by-side viewing).

How do I add or remove a pricing tier? #

In the Columns tab, click “+ Add Column” to create a tier, use the trash can icon to remove one, and drag a column card to reorder it.

What pricing models can I set? #

Select a pricing model from the dropdown; for Subscription or Per Unit models you can define the charge frequency, set a price, add a comparison price, and toggle discount text.

Can I show a feature explanation on hover? #

Yes. The Feature Tip option lets you add a small explanation that displays when a visitor hovers over the selected feature.

How do I configure what the plan button does? #

In Button Actions, enable the column’s button and CTA text, select a Button Action, then configure the follow-up actions for it.