How to use the Pricing element

This article will show how to use the Pricing element to display multiple pricing options of your products/services.

About the Pricing element

The Pricing element allows you to list the different pricing options or tiers available to customers and the benefits and features included in each tier in minutes. 


From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Pricing element on the left sidebar of the Editor, under the Stack section. Drag and drop the element to any position as you wish.



When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Item number

Enter the number or select one from the drop-down menu to determine the number of items that will be shown.


Click on the arrow next to each item. You will have the option to update the details of your pricing plan including:

  • Plan: Enter the name of the plan.
  • Price: Enter the price of the plan.
  • Type: Enter the plan type (per month, per year, etc.).

To show the details of each plan, you can consider using the Heading, Text block, or Image elements. Feel free to drag and drop the elements inside the table to create a section as you want. 




Enter the currency in the field below.



Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.



In case you would like to further customize the pricing table such as typography, background color, etc., please contact our support team for further assistance.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article


That's it! If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our customer support via email or live chat.

Was this helpful?