# 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. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/how-to-use-pricing-table-element - Section: Sites / Funnels and Websites - Reading time: 5 min - Images: 10, each explained below --- 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?](#what-is-the-pricing-table-element) - [Key Benefits of Pricing Table element](#key-benefits-of-pricing-table-element) - [How to set up the Pricing Table element](#how-to-set-up-the-pricing-table-element) - [Dynamic Layout Modes](#dynamic-layout-modes) - [Pricing Models & Formatting](#pricing-models-and-formatting) - [Feature Lists](#feature-lists) - [Smart Pricing Features](#smart-pricing-features) - [Buttons & Actions](#buttons-and-actions) - [Appearance & Styling](#appearance-and-styling) - [Mobile & Responsiveness](#mobile-and-responsiveness) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#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. 1. **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053691733/original/VC4L91-VZN3tIpoEPJMgWKHpxQ8pkP9ZQQ.png) **Step 1 of 5: Navigate to the Page Builder: In the left-hand menu of your…** 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. - Where to go: 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 - Controls: Sites, Edit, Add the element, Pricing Table, Choose a layout, Grid, Carousel, Classic, Comparison, Configure the Layout, and Styling, Preview & publish - Next: Add the element: Drag the Pricing Table from the Elements panel onto the canvas. Full procedure: 1. 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 2. Add the element: Drag the Pricing Table from the Elements panel onto the canvas. 3. Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. 4. Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. 5. Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. 2. **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053305519/original/zAldnKQPIgXaNRHEy6Fl20qX2yxJJYVtYA.gif) **Step 2 of 5: Add the element: Drag the Pricing Table from the Elements panel onto…** 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. - What this covers: Add the element: Drag the Pricing Table from the Elements panel onto the canvas. - Controls: Add the element, Pricing Table, Sites, Edit, Choose a layout, Grid, Carousel, Classic, Comparison, Configure the Layout, and Styling, Preview & publish - Next: Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. Full procedure: 1. 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 2. Add the element: Drag the Pricing Table from the Elements panel onto the canvas. <- this image 3. Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. 4. Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. 5. Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. 3. **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053322294/original/JAGhBNsHYRyAvO5okG3-NgDyMkPs-GIwrw.png) **Step 3 of 5: Choose a layout: Select Grid, Carousel, Classic, or Comparison from…** 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. - What to choose: Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. - Controls: Choose a layout, Grid, Carousel, Classic, Comparison, Sites, Edit, Add the element, Pricing Table, Configure the Layout, and Styling, Preview & publish - Next: Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. Full procedure: 1. 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 2. Add the element: Drag the Pricing Table from the Elements panel onto the canvas. 3. Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. <- this image 4. Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. 5. Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. 4. **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053691242/original/GigWLk63VmdwkkJ3AdSXGPi-IDMABBlU1w.png) **Step 4 of 5: Configure the Layout (Pricing, features, buttons etc) and Styling of…** 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. - What this covers: Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. - Controls: Configure the Layout, and Styling, Sites, Edit, Add the element, Pricing Table, Choose a layout, Grid, Carousel, Classic, Comparison, Preview & publish - Next: Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. Full procedure: 1. 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 2. Add the element: Drag the Pricing Table from the Elements panel onto the canvas. 3. Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. 4. Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. <- this image 5. Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. 5. **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053675368/original/abInH4Z6V5QvNPbtH7iusKr9t5iJojvC8Q.png) **Step 5 of 5: Preview & publish: Use Desktop/Mobile preview to confirm…** 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. - How to confirm: Preview & publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish. - Controls: Preview & publish, Save, Publish, Sites, Edit, Add the element, Pricing Table, Choose a layout, Grid, Carousel, Classic, Comparison Full procedure: 1. 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 2. Add the element: Drag the Pricing Table from the Elements panel onto the canvas. 3. Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings bar. 4. Configure the Layout (Pricing, features, buttons etc) and Styling of the pricing table. 5. 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053691450/original/McypElQnXoDL_h13dKz4hRMqJ9sDh6WIEA.png) **Step 3 of 3: For long lists, prefer Classic or Comparison layouts to leverage…** 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. - What this covers: For long lists, prefer Classic or Comparison layouts to leverage horizontal navigation. - Controls: Classic, Comparison, (Columns) Full procedure: 1. Add, reorder, or remove features for each plan (Columns) 2. Group related items and keep phrasing consistent across plans (Columns) 3. 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053674324/original/4FutUIHlHQONWzmvGoMWMfnMhlLq8aezTQ.png) **Step 3 of 3: Optional Pricing Captions for billing notes, taxes, or disclaimers** 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. - What this covers: Optional Pricing Captions for billing notes, taxes, or disclaimers. - Controls: Optional Pricing Captions, Previous Price Display, Discount Text Badges Full procedure: 1. Previous Price Display (strikethrough) to highlight a discount. 2. Discount Text Badges to emphasize promotions. 3. 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053677278/original/1ggPubjroBVdI5A_hF5KlvXeqsb-CdXYVQ.png) **Step 3 of 3: Show/Hide controls for button and caption visibility** 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. - What this covers: Show/Hide controls for button and caption visibility. - Controls: Show/Hide controls Full procedure: 1. Custom text: Clear, action‑oriented labels (e.g., “Start Free Trial”) for Personalized call-to-action buttons 2. Optional caption: Add supporting text below the button. 3. 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053673658/original/4310YTG8WYxqs5uGfyeslODsvuLvuAfk_Q.png) **Step 3 of 3: Keep card padding consistent to prevent visual jumpiness between plans** 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. - What this covers: Keep card padding consistent to prevent visual jumpiness between plans. - Controls: colors, typography, spacing, borders, column gaps (0–100 px) Full procedure: 1. Adjust colors, typography, spacing, borders, and column gaps (0–100 px). 2. Maintain adequate contrast for text, badges, and buttons. 3. 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053673363/original/S58ebKxxtuarpZzm39q4Wk3_oxEL92GJAA.png) **Step 4 of 4: Preview both Desktop and Mobile views and adjust spacing/typography as…** 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. - What this covers: Preview both Desktop and Mobile views and adjust spacing/typography as needed. - Controls: Desktop, Mobile, collapse, Classic/Comparison, horizontal scroll, arrows, Sticky head column, Comparison Full procedure: 1. Multi‑column layouts may collapse to fewer columns on mobile for legibility. 2. Classic/Comparison layouts retain horizontal scroll with arrows when content exceeds viewport width. 3. Sticky head column remains visible in Comparison mode to keep plan names in context. 4. 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. --- ## **Related Articles** - [Sites Overview](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) - [Drag & Drop with Auto‑Hierarchical Layout](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/drag-and-drop-with-auto-hierarchical-layout-in-funnel-website-builder) - [Show Popup on Entering Funnel/Website](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/show-popup-on-entering-funnel-website) - [How to Use the Download File Action for Buttons](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/how-to-use-the-download-file-action-for-buttons) - [Scroll to Elements or Sections](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/scroll-to-elements-or-sections-in-websites-or-funnels) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com