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:

1. Grid Mode: clean card layout with up to 5 columns.
2. Carousel Mode: sliding plans with auto-play and pause on hover.
3. Classic Table: traditional table with horizontal scrolling.
4. 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.

Colum 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!