HubSpot CMS: Implementing a Professional "Pricing Table Module"

On a website, how you compare service plans and present pricing is a critical factor that directly impacts conversions. By implementing the Pricing Table Module, you can build a functional and professional pricing comparison table that aligns with your brand—all without needing constant help from an engineer.

1. Objectives

The primary objective of this module is to increase information transparency and strongly support user decision-making.

• Intuitive Comparison: Display multiple plans and features side-by-side, allowing users to instantly determine the best option for their needs.
• Design Consistency: Manage header colors, text sizes, and padding collectively from the editor to ensure the table harmonizes with the rest of your site.
• Mobile Optimization: Automatically converts complex tables into a vertical card format for smartphone users, ensuring readability on smaller screens.

2. Use Cases

• SaaS & Software Plan Comparison: Clearly illustrate the functional differences between plans like "Free," "Professional," and "Enterprise."
• Service Package Introductions: Present different service levels and price points for consulting or creative production services.
• Plan Explanations with Examples: Use the "is_example" setting for specific rows to show realistic usage scenarios alongside pricing, increasing user confidence.

3. Implementation Steps

This section covers the process from applying the code in the Design Manager to final configuration in the page editor.

Step 1: Applying Code in the Design Manager

To enable advanced table functionality, perform the following in the Design Manager:

• File Preparation: Create a new module within the Design Manager.
• Paste the Code: Simply copy and paste the provided source code into the respective HTML/HubL, CSS, and JS sections, then save and publish.

Step 2: Page Creation and Module Placement

Create a new page (such as a Landing Page) from the HubSpot admin dashboard. Search for the module name in the left sidebar of the editor, then drag and drop it into the desired editing area.

Step 3: Editor Configuration and Customization

Once the code is applied, you can fine-tune the details via the no-code side panel in the page editor:

• Column and Row Setup: Use "columns" to create your plans and "rows" to create comparison items, then fill in the content for each.
• High-lighting: To make specific cells stand out, toggle the "highlight" switch to change their background or text color.
• Style Adjustments: Use the color picker to adjust header colors, border thickness, and other stylistic elements to match your brand.

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "ed9560c9-9c1c-0441-0faf-e9550904cfa6",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "c179193d-d8a5-7392-e6fc-6b3d06e993e9",
  "label": "columns",
  "locked": false,
  "name": "columns",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "d7805557-6ec3-59cf-119a-3a052f27dad6",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "6ad38bcb-6b06-63a3-9001-ebe8efd355f5",
    "label": "is_example",
    "locked": false,
    "name": "is_example",
    "required": false,
    "type": "boolean"
   },
   {
    "children": [
     {
      "display_width": null,
      "id": "966af101-ccd3-c4db-a10b-3050a3c423fd",
      "label": "content",
      "locked": false,
      "name": "content",
      "required": false,
      "type": "richtext"
     },
     {
      "default": false,
      "display": "checkbox",
      "display_width": null,
      "id": "602c9712-5e63-c97e-7aca-d5ef1e4acf3f",
      "label": "highlight",
      "locked": false,
      "name": "highlight",
      "required": false,
      "type": "boolean"
     }
    ],
    "default": [],
    "display_width": null,
    "expanded": false,
    "group_occurrence_meta": null,
    "id": "4b422ad5-7d67-db73-cdc1-94e1320642ee",
    "label": "cells",
    "locked": false,
    "name": "cells",
    "occurrence": {},
    "required": false,
    "tab": "CONTENT",
    "type": "group"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "061a08e6-3523-bbb7-ce39-1b111ac42aa0",
  "label": "rows",
  "locked": false,
  "name": "rows",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   { "default": { "color": null, "opacity": null }, "id": "515623f8-4fa2-645b-5086-4a968101c60c", "label": "header_bg_color", "name": "header_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "96bbe9fa-b7e4-f1c2-ede4-cdb715c4de38", "label": "header_text_color", "name": "header_text_color", "type": "color" },
   { "display": "text", "id": "e766f233-5e0e-5134-7e0e-7580595ee79b", "label": "header_font_size", "name": "header_font_size", "type": "number" },
   { "display": "text", "id": "6dc0dc16-74d1-01d0-191a-df347869131e", "label": "header_padding", "name": "header_padding", "type": "number" },
   { "default": { "color": null, "opacity": null }, "id": "775f2e3b-8ff3-8d87-0321-ecdc42b1e2ac", "label": "row_title_bg_color", "name": "row_title_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "7507e164-c68a-a8ad-f6c2-761eb0c5102a", "label": "row_title_text_color", "name": "row_title_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "e6b750b8-64dd-2f9c-742a-2fbff12e6cc3", "label": "content_bg_color", "name": "content_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "ea8a1a14-c964-e9b7-360b-9abea479d953", "label": "content_text_color", "name": "content_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "3417db6a-c059-3069-a9e4-b3683340b2a7", "label": "highlight_bg_color", "name": "highlight_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "ad2b046b-2a21-c01e-927d-a4f8b1e7b58d", "label": "highlight_text_color", "name": "highlight_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "73861370-bc2f-10c2-8cc7-80535299e608", "label": "example_row_bg_color", "name": "example_row_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "bc2a46db-f8f0-35b0-1e0c-b890b29fd466", "label": "example_row_text_color", "name": "example_row_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "542c512e-4e10-7827-292b-d6446f54ef78", "label": "border_color", "name": "border_color", "type": "color" },
   { "display": "text", "id": "ca1c6f42-30f0-a850-7088-34b84e7cb3da", "label": "border_width", "name": "border_width", "type": "number" },
   { "display": "text", "id": "98e77063-97b2-4169-ba7f-fc157f640e47", "label": "font_size", "name": "font_size", "type": "number" },
   { "display": "text", "id": "de62c8f1-1e30-7799-5c12-993ba149848f", "label": "cell_padding", "name": "cell_padding", "type": "number" },
   { "display": "text", "id": "73dc7a53-67ab-6e86-f5cc-4e7982d282d5", "label": "first_column_width", "name": "first_column_width", "type": "number" }
  ],
  "id": "84432453-92c7-d5bc-237b-0c33d0abe501",
  "label": "style",
  "name": "style",
  "tab": "CONTENT",
  "type": "group"
 }
]