Pricing Chart

Pricing Chart Module has some feature for you to customize the look and feel without touching the code.

Below are the steps how you can customize it:

Options will be the first one you will see once you view the module from your hubspot cms.

Under options, you can enable options to allow customizing the look and feel of the price chart and frequency where you can select both or one frequency. Note that selecting one frequency will hide the frequency select toggle.

 

Upon enabling the options the following fields will be available for edits:

1. Fonts - allows you to change the font of the module.

2. Background - allows you  to change the background of the section.

3. Container - Allows you to control the width of the price chart between the following options, Full Width, Custom Width and Custom Class.

4. Toggle Color - Which allows you to change the active color of the frequency.

Back to Price Chart Main Page, you can change the section title and a subtitle/featured text. Section Title will display above the toggle button while the Featured Text display after the toggle button.  Note that this won't show once you only have one frequency.

Next Section are the fields for the Plans. Click add button to add a plan. Note that you can only add up to 3 plan as beyond it will ruin the mobile UI.

And fill the fields with their corresponding details:

  • Plan Name - will be the first text that will display on each plan.
  • Feature Icon - will be displayed below the Plan Name. Leaving it empty will show a gray icon.
  • Featured text - will be displayed below the featured icon or above the button
  • Price (Monthly) - will be displayed once Monthly is toggled.
  • Price (Yearly) - will be displayed once Yearly is toggled.

Each plans have packages, these are the information which will be used to compare with the other plans.

Click Add and fill the field with their corresponding field.

The idea is you only need to add the same name of package for each plans so it'll successfully be compared.

E.g. Plan A have a Max Users  package, then the other plan must have Max Users as well so they will be compared in one row. Once this package is not present on the other plan, it'll just leave an empty space.

Now for the Features

The idea is you just have to list all the features for the plan, now the module will check each features from the other plan and once  each plan matched a feature it'll be check while on the other hand will be marked as X.

The last part is the button, just fill the fields to your liking.

  • Label will serve as a text for the buttons
  • Background Color will serve as a background of the button
  • Text Color will serve as a color of the text of the button
  • Link (Monthly) will be used once the Monthly is toggled
  • Link (Yearly) will be used once the Yearly is toggled

 

Now if you have any concerns, please send an email at [email protected]