How to Use Pricing Table Element

Build clear, high‑converting pricing tables in GHL Customer Care. Compare plans with grids, carousels, or tables, add badges, and configure powerful button actions.

5 min read1,130 words10 explained images

View as markdown Open in Claude Open in ChatGPT

Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.

On this page

Key Benefits of Pricing Table element
How to set up the Pricing Table element
Dynamic Layout Modes
Pricing Models & Formatting
Feature Lists
Smart Pricing Features
Buttons & Actions
Button content
Appearance & Styling
Mobile & Responsiveness
Frequently Asked Questions
Related Articles

Discover the new Pricing Table element in GHL Customer Care—a versatile way to showcase pricing plans, packages, and service tiers. Choose from multiple layouts, apply flexible pricing models, and add conversion-focused details like badges and previous-price strikethroughs. With clear CTAs and mobile-ready behavior, this element helps visitors compare options and take action quickly.

TABLE OF CONTENTS

What is the Pricing Table element?
Key Benefits of Pricing Table element
How to set up the Pricing Table element
Frequently Asked Questions
Related Articles

What is the Pricing Table element?

The Pricing Table element lets you present one or more plans in a clean, comparable layout. It supports multiple display modes (grid, carousel, classic table, comparison table), several pricing models, and configurable actions so you can tailor the experience to your offer, page design, and audience.

Where it’s available: Funnels, Websites, Blogs, and the E‑Commerce Store builders in GHL Customer Care.

Key Benefits of Pricing Table element

Understanding core benefits makes it easier to decide when and how to use the element for maximum impact on conversions and clarity.

Layout flexibility: Choose Grid, Carousel, Classic Table, or Comparison Table to match your content and page goal.
Clear plan comparison: Use horizontal scrolling, arrows, and sticky head column (Comparison mode) to keep features readable.
Multiple pricing models: Communicate one‑time, recurring, tiered, or variable pricing without workarounds.
Conversion cues: Add previous price (strikethrough), discount badges, and captions that highlight offers.
Action control: Point buttons to URLs, open popups, jump to sections, download files, or have no action.
Brand consistency: Customize colors, spacing, and column gaps to blend with your site design.
Mobile readiness: Columns adapt for smaller screens while preserving comparison clarity.

How to set up the Pricing Table element

A quick, repeatable setup flow reduces build time and keeps pricing consistent across pages.

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Step 1 of 5: Navigate to the Page Builder: In the left-hand menu of your… What this shows Step 1 of 5: Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website.
What this shows Shows where to go for step 1 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". This screenshot accompanies step 1 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". At this point in the walkthrough you navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder. The next step is to add the element: Drag the Pricing Table from the Elements panel onto the canvas. Step 1 of 5Image 1 of 10 Where to goNavigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Buttons and menus referenced SitesEditAdd the elementPricing TableChoose a layoutGridCarouselClassicComparisonConfigure the Layoutand StylingPreview & publish
Next stepAdd the element: Drag the Pricing Table from the Elements panel onto the canvas.
All 5 steps in this procedure

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder this image
Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
Step 2 of 5: Add the element: Drag the Pricing Table from the Elements panel onto… What this shows Step 2 of 5: Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
What this shows Shows what this covers for step 2 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". This animation accompanies step 2 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". At this point in the walkthrough you add the element: Drag the Pricing Table from the Elements panel onto the canvas. The next step is to choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. Step 2 of 5Image 2 of 10 What this coversAdd the element: Drag the Pricing Table from the Elements panel onto the canvas.
Buttons and menus referenced Add the elementPricing TableSitesEditChoose a layoutGridCarouselClassicComparisonConfigure the Layoutand StylingPreview & publish
Next stepChoose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
All 5 steps in this procedure

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Add the element: Drag the Pricing Table from the Elements panel onto the canvas. this image
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Step 3 of 5: Choose a layout: Select Grid, Carousel, Classic, or Comparison from… What this shows Step 3 of 5: Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
What this shows Shows what to choose for step 3 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". This screenshot accompanies step 3 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". At this point in the walkthrough you choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. The next step is to configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. Step 3 of 5Image 3 of 10 What to chooseChoose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Buttons and menus referenced Choose a layoutGridCarouselClassicComparisonSitesEditAdd the elementPricing TableConfigure the Layoutand StylingPreview & publish
Next stepConfigure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
All 5 steps in this procedure

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. this image
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Step 4 of 5: Configure the Layout (Pricing, features, buttons etc) and Styling of… What this shows Step 4 of 5: Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
What this shows Shows what this covers for step 4 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". This screenshot accompanies step 4 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". At this point in the walkthrough you configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. The next step is to preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. Step 4 of 5Image 4 of 10 What this coversConfigure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Buttons and menus referenced Configure the Layoutand StylingSitesEditAdd the elementPricing TableChoose a layoutGridCarouselClassicComparisonPreview & publish
Next stepPreview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
All 5 steps in this procedure

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. this image
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Step 5 of 5: Preview & publish: Use Desktop/Mobile preview to confirm… What this shows Step 5 of 5: Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
What this shows Shows how to confirm for step 5 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". This screenshot accompanies step 5 of 5 in the "How to set up the Pricing Table element" section of "How to Use Pricing Table Element". At this point in the walkthrough you preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. Step 5 of 5Image 5 of 10 How to confirmPreview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish.
Buttons and menus referenced Preview & publishSavePublishSitesEditAdd the elementPricing TableChoose a layoutGridCarouselClassicComparison
All 5 steps in this procedure

Navigate to the Page Builder: In the left-hand menu of your sub-account dashboard, click on Sites and Open your chosen funnel or website. Click the blue Edit button of the page to launch the page builder
Add the element: Drag the Pricing Table from the Elements panel onto the canvas.
Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar.
Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table.
Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. this image

Dynamic Layout Modes

Selecting the right layout helps visitors understand differences between plans and speeds up decision‑making.

Mode	Description / Best For	Columns & Spacing	Navigation / Controls	Animation & Options
Grid Mode	Clean, card-based layout for side-by-side comparison.	Column gap: 0–100 px; Columns per row: up to 5.	—	—
Carousel Mode	Slide-based presentation with optional auto-advance.	Columns per slide: 1–5.	Auto-advance interval; pause on hover; infinite loop.	Fade or Slide animation.
Classic Table Mode	Traditional table for wide, detailed comparisons.	Uses horizontal width; ideal for long feature lists.	Horizontal scroll with arrow controls.	—
Comparison Table Mode	Deep, column-heavy comparisons where context matters.	Wide tables; sticky head column remains visible.	Horizontal scroll with arrow controls; sticky head column for context.	—

Tips

Prefer Grid for simple tiers (e.g., 3–4 plans).
Use Carousel if you want to feature plans one group at a time or conserve vertical space.
Choose Classic/Comparison for long feature lists that won’t fit within fixed‑width cards.

Pricing Models & Formatting

Choosing the right pricing model clarifies cost expectations and avoids surprises, which increases trust and conversions.

Pricing Model	Description
Fixed Price	One-time payment.
Subscription	Recurring billing with periods: daily, weekly, monthly, yearly.
Price From	Display “Starting at” pricing for variable services.
Price Range	Show min–max for customizable services.
Per Unit	Price by item, hour, day, seat, person, etc.
Free	Highlight complimentary offerings (optionally show previous price).
Custom	Enter custom pricing text for niche cases.

Feature Lists

Clear, scannable feature lists help buyers recognize what’s included and compare tiers quickly.

Add, reorder, or remove features for each plan (Columns)
Group related items and keep phrasing consistent across plans (Columns)
For long lists, prefer Classic or Comparison layouts to leverage horizontal navigation.
Step 3 of 3: For long lists, prefer Classic or Comparison layouts to leverage… What this shows Step 3 of 3: For long lists, prefer Classic or Comparison layouts to leverage horizontal navigation.
What this shows Shows what this covers for step 3 of 3 in the "Feature Lists" section of "How to Use Pricing Table Element". This screenshot accompanies step 3 of 3 in the "Feature Lists" section of "How to Use Pricing Table Element". At this point in the walkthrough you for long lists, prefer Classic or Comparison layouts to leverage horizontal navigation. Step 3 of 3Image 6 of 10 What this coversFor long lists, prefer Classic or Comparison layouts to leverage horizontal navigation.
Buttons and menus referenced ClassicComparison(Columns)
All 3 steps in this procedure

Add, reorder, or remove features for each plan (Columns)
Group related items and keep phrasing consistent across plans (Columns)
For long lists, prefer Classic or Comparison layouts to leverage horizontal navigation. this image

Smart Pricing Features

Visual pricing cues guide attention and make offers feel time‑sensitive or valuable without adding confusion.

Previous Price Display (strikethrough) to highlight a discount.
Discount Text Badges to emphasize promotions.
Optional Pricing Captions for billing notes, taxes, or disclaimers.
Step 3 of 3: Optional Pricing Captions for billing notes, taxes, or disclaimers What this shows Step 3 of 3: Optional Pricing Captions for billing notes, taxes, or disclaimers.
What this shows Shows what this covers for step 3 of 3 in the "Smart Pricing Features" section of "How to Use Pricing Table Element". This screenshot accompanies step 3 of 3 in the "Smart Pricing Features" section of "How to Use Pricing Table Element". At this point in the walkthrough you optional Pricing Captions for billing notes, taxes, or disclaimers. Step 3 of 3Image 7 of 10 What this coversOptional Pricing Captions for billing notes, taxes, or disclaimers.
Buttons and menus referenced Optional Pricing CaptionsPrevious Price DisplayDiscount Text Badges
All 3 steps in this procedure

Previous Price Display (strikethrough) to highlight a discount.
Discount Text Badges to emphasize promotions.
Optional Pricing Captions for billing notes, taxes, or disclaimers. this image

Buttons & Actions

The call‑to‑action is where comparisons turn into conversions. Configure actions that match your funnel strategy.
Action types

Open URL (external or internal).
Open Popup (launch a specific on‑page popup).
Step/Anchor Navigation (jump to a section on the page).
No action (useful for teaser plans or disabled states).

Button content

Custom text: Clear, action‑oriented labels (e.g., “Start Free Trial”) for Personalized call-to-action buttons
Optional caption: Add supporting text below the button.
Show/Hide controls for button and caption visibility.
Step 3 of 3: Show/Hide controls for button and caption visibility What this shows Step 3 of 3: Show/Hide controls for button and caption visibility.
What this shows Shows what this covers for step 3 of 3 in the "Button content" section of "How to Use Pricing Table Element". This screenshot accompanies step 3 of 3 in the "Button content" section of "How to Use Pricing Table Element". At this point in the walkthrough you show/Hide controls for button and caption visibility. Step 3 of 3Image 8 of 10 What this coversShow/Hide controls for button and caption visibility.
Buttons and menus referenced Show/Hide controls
All 3 steps in this procedure

Custom text: Clear, action‑oriented labels (e.g., “Start Free Trial”) for Personalized call-to-action buttons
Optional caption: Add supporting text below the button.
Show/Hide controls for button and caption visibility. this image

Appearance & Styling

Styling ensures the Pricing Table blends with your brand while remaining readable and accessible.

Adjust colors, typography, spacing, borders, and column gaps (0–100 px).
Maintain adequate contrast for text, badges, and buttons.
Keep card padding consistent to prevent visual jumpiness between plans.
Step 3 of 3: Keep card padding consistent to prevent visual jumpiness between plans What this shows Step 3 of 3: Keep card padding consistent to prevent visual jumpiness between plans.
What this shows Shows what this covers for step 3 of 3 in the "Appearance & Styling" section of "How to Use Pricing Table Element". This screenshot accompanies step 3 of 3 in the "Appearance & Styling" section of "How to Use Pricing Table Element". At this point in the walkthrough you keep card padding consistent to prevent visual jumpiness between plans. Step 3 of 3Image 9 of 10 What this coversKeep card padding consistent to prevent visual jumpiness between plans.
Buttons and menus referenced colorstypographyspacingborderscolumn gaps (0–100 px)
All 3 steps in this procedure

Adjust colors, typography, spacing, borders, and column gaps (0–100 px).
Maintain adequate contrast for text, badges, and buttons.
Keep card padding consistent to prevent visual jumpiness between plans. this image

Mobile & Responsiveness

Optimizing for small screens preserves readability and ensures users can still compare plans and take action without friction.

Multi‑column layouts may collapse to fewer columns on mobile for legibility.
Classic/Comparison layouts retain horizontal scroll with arrows when content exceeds viewport width.
Sticky head column remains visible in Comparison mode to keep plan names in context.
Preview both Desktop and Mobile views and adjust spacing/typography as needed.
Step 4 of 4: Preview both Desktop and Mobile views and adjust spacing/typography as… What this shows Step 4 of 4: Preview both Desktop and Mobile views and adjust spacing/typography as needed.
What this shows Shows what this covers for step 4 of 4 in the "Mobile & Responsiveness" section of "How to Use Pricing Table Element". This screenshot accompanies step 4 of 4 in the "Mobile & Responsiveness" section of "How to Use Pricing Table Element". At this point in the walkthrough you preview both Desktop and Mobile views and adjust spacing/typography as needed. Step 4 of 4Image 10 of 10 What this coversPreview both Desktop and Mobile views and adjust spacing/typography as needed.
Buttons and menus referenced DesktopMobilecollapseClassic/Comparisonhorizontal scrollarrowsSticky head columnComparison
All 4 steps in this procedure

Multi‑column layouts may collapse to fewer columns on mobile for legibility.
Classic/Comparison layouts retain horizontal scroll with arrows when content exceeds viewport width.
Sticky head column remains visible in Comparison mode to keep plan names in context.
Preview both Desktop and Mobile views and adjust spacing/typography as needed. this image

Frequently Asked Questions

Q: Where can I use the Pricing Table?
In the Funnels, Websites, Blogs, and E‑Commerce Store builders.

Q: How many columns can I show at once?
Grid supports up to 5 columns per row; Carousel supports 1–5 columns per slide.

Q: Can I show old vs. new pricing?
Yes. Enable Previous price (strikethrough) and optionally add a Discount badge.

Q: Can a plan button open a popup checkout or form?
Yes. Set the action to Open Popup and choose the popup you created for that page.

Q: What happens on mobile?
Columns may collapse, and table layouts allow horizontal scroll with arrows. In Comparison mode, the sticky head column remains visible.

Q: Which pricing models are included?
Fixed, Subscription (daily, weekly, monthly, yearly), Price From, Price Range, Per Unit, Free, and Custom.

Q: Can I hide buttons or captions?
Yes. Use Show/Hide controls in the Button settings.

Was this guide helpful?