When you're offering multiple pricing tiers, it helps your customers understand what they're getting beyond just the cost. The Pricing Table element makes that straightforward. Here's how to use it across 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 element menu, then drag and drop the Pricing Table element.

General Settings

Choose from 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 adjust its appearance using the dials below.

Use the typography tab to customise the look of your offering's text.

Managing Your Columns

Each pricing tier sits within a Column, managed from the general settings under the Columns tab. Click "+ Add Column" to create a new one. Use the bin icon to remove a column, or drag its card to reorder.

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

Colum Features

All options below apply only to the selected column. You can remove the column's title (1) or caption (2), and add 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 lets you add a short explanation for a selected feature, displayed when a user hovers over it.

Pricing

To set a column's pricing, 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 large numbers, add any previous price you want to use for comparison (2), and enable or disable (3) the discount text.

Button Actions

Here you can 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 customise the look of your pricing table. Options include Colors, Box Shadow, Border, Line Height, Text Transform (for text formatting), Custom Class, and CSS Selector.

Once you're happy with how it looks, save and publish your changes.

That's it. You can now display multiple pricing options clearly and professionally in one place, making it easy for visitors to find the right fit for them.