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 using the light theme.

You can view the default pricing table by selecting Preview in Browser. If you are happy with the default table, select Copy Code and choose whether you want the Vanilla JS code or the React 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 Name or select the Menu icon next to the product you wish to add a feature to and select Edit.

  3. Select the Pricing Tables tab.

  4. Select Add 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.
    ThemeChoose between light or dark theme.
    CTA ThemeChoose between the default colour scheme for buttons or specify a custom scheme. If you select Custom, you can provide the hex colour codes for your buttons.

  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 Edit from the Actions menu on the Pricing Tables page.

You cannot edit the default pricing table, like reordering the plans or

removing a plan, however you can change the theme while using it. You can use change the theme using config option. :::

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.

You can also view and copy the Vanilla JS or React code for your pricing table from the editor page.