Skip to main content

Add a Pricing Table

A pricing table allows you to display the various plans available for your product on one screen to allow easy comparison by your customer. A default pricing table is automatically created for each of your products. The default pricing table includes all plans with a Plan Type of Standard or Coming Soon.

Salable's pricing table functionality enables you to design your pricing table, and it then generates the code that you need to display the pricing table. You can copy the code in Vanilla JS or React.

Use the Default Pricing Table​

A default pricing table is automatically created for each of your products. The default pricing table displays all plans with a Plan Type of Standard or Coming Soon.

You can view the default pricing table by selecting the three dots under Actions. If you are happy with the default table, select the three dots under Copy Code and choose whether you want the React code or the Vanilla JS code for the pricing table. This copies the relevant code to your clipboard, and you can paste it where required from there.

Create a Pricing Table​

If you want to display a pricing table that only includes specific plans, highlights a particular plan, uses the dark theme, or uses a different colour scheme for the buttons, then you must create that pricing table. Follow these instructions to create a pricing table.

  1. Select Products from the navigation menu on the left-hand side.

  2. Select the product you want to configure.

  3. Select the Pricing Tables tab on the sidebar.

  4. Select Create Pricing Table.

  5. Complete the displayed fields.

    FieldDetails
    NameName of the pricing table for reference within the Salable dashboard. This name is not visible to customers.
    Add PlansUse this dropdown to select which plans you want to include in the pricing table.

    The plans are displayed in the order they are selected, but you can reorder them here by drag-and-dropping the plans in the required order.

    You can highlight a specific plan in your pricing table by selecting the Featured radio button for that plan. Highlighting a plan displays it to your customers with different styling to emphasise that plan.
    Feature OrderIf your plan has multiple features, you can order them as you wish.

  6. Select Create Pricing Table.

You should see a notification telling you that your pricing table has been created.

Edit a Pricing Table​

Once you have created the pricing table, you are taken to the editor page for that pricing table. You can also enter the editor page for a pricing table by selecting the three dots under Edit from the Actions menu on the Pricing Tables page.

You cannot edit the default pricing table, like reordering the plans. The only way of removing a plan from the default pricing table is if you create or edit a plan and choose No on the Show in the default pricing table? section:::

You can use the editor to make changes to your pricing table. You can view any changes you make in the preview pane once you click the Update Pricing Table button.