Adding a pricing table

The Pricing Table element shows your plans side by side, one card each. A card holds a name, a price, a short description, a list of features and a button. You type all of it yourself.

Considerations

• Prices and features are text you type. They do not come from your products.
• Cards sit three to a row to start with. Change that under Plans Per Row in the Design tab. On a phone they stack into one column.

Add the element

1. Open the page in the page builder.
2. In the toolbox on the far left, click Elements.
3. Find Pricing Table in the Basic group, or search for it.
4. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Pricing Table.

Add and edit a plan

1. With the element selected, open the Content tab.
2. Click a plan to open it. Each block is named after the plan.
3. Fill in Name, Currency, Price and Period.
4. Type a Description.
5. Under Features, type one feature per row. Click Add Feature for the next one.
6. To make one card stand out, turn on Highlight this plan and type the Badge Text.
7. Type the Button Text and the Button Link, then set Link Target to Same Window or New Window.
8. Click Add Plan for another plan. Use Move Up, Move Down and Remove to reorder or delete one.

Content settings

• Name: the plan name, shown at the top of the card.
• Currency, Price and Period: the three parts of the price line.
• Description: one short line under the price.
• Features: the list of what the plan includes, one row each.
• Highlight this plan: lifts the card and paints it in the accent colour.
• Badge Text: a small pill on the card, such as Most Popular.
• Display Options: turn Show Description, Show Badge and Show Feature Ticks on or off for every card, and pick the Feature Icon.

Design settings

Open the Design tab to change the look. The groups are Layout, Card Style, Typography, Button Style, Border and Spacing.

Related guides

• Adding a comparison table
• Adding a price list
• Adding and arranging elements
• Using the element settings panel