Customizing a Pricing Table

Overview

You can customize various elements of your pricing page and match your brand's look and feel to get the most out of your pricing page and improve your conversions. You can customize the experience of your pricing page for both new users and for return users or subscribers individually.

Customizing Pricing Page for New Users

Chargebee Pricing Table allows you to personalize your pricing page for new visitors based on your specific business requirements.

Customizing plan-related information

You can customize the following aspects of your plan details on the pricing page:

• Add/Remove/Reorder Plans
• Customize Plan & Edit Pricing

Add/Remove/Reorder Plans

Click Manage Plans to customize the following:

• Drag and drop to reorder the plans based on how you want to display them on the pricing page.
• All plans from respective product families are fetched and displayed from your Chargebee Billing site for selection. You can select one or more plans from the list to add to your pricing page.
• You can also use the search box to look for specific plans and add them to the pricing page.

Customize Plan & Edit Pricing

Click the plan name to customize the following:

Description

Enter a description for the plan.

Highlight plan and add badge

You can enable the Highlight Plan toggle to visually highlight a plan as most popular, or you can select Add Badge to add a Most Popular badge to the plan, or you can do both.

Hide price and add labels

You can enable the Hide Price toggle to hide the price of this plan, and add custom labels such as Contact Sales, or Reach Out to Us along with Redirect to URL to capture leads.

Button text and behavior

Under Button Text & Behavior, enter a button text to be displayed on the plan Call-to-action (CTA)button, and select a preferred behavior on click. You can select to Open Checkout or Redirect to URL and specify a URL.

Feature list

Under Feature List, you can add the list of features included in the plan within the text box.

Edit pricing

Go to the Edit Pricing tab to override the actual price (Early Access) and add a strikethrough price to highlight discounts or promotions.

Price Override (Early Access)

Price Override allows you to change the final pricing of a plan card easily with a single action. This overridden price is applied during checkout. Use this simple yet powerful feature to offer quick discounts to your customers or to test a pricing change swiftly before making a permanent update.

If a subscription is created using the overridden price, the new price will be applied to all downstream processes, including invoice generation and revenue recognition.

To enable Price Override on your Pricing Table site, follow these steps:

1. In Chargebee Billing, enable price override in the product catalog.
2. In Pricing Tables, go to Settings > Advanced Settings > Override Price.
3. Copy the Site ID by selecting the copy button next to the ID.
   
4. Email atomicpricing@chargebee.com to request Price Override activation. Include the following details:
   • The copied Pricing Table Site ID.
     • The Chargebee Billing site domain linked to your Pricing Table site (for example, acme-test).
5. Chargebee will reply to your email once the feature is enabled.

You can disable Price Override on your Pricing Tables site.

To disable Price Override on your Pricing Tables site, follow these steps:

1. Sign in to Pricing Tables. The page URL contains the ID of your Pricing Tables site.
   
2. Copy the page URL from the browser's address bar.
3. Email atomicpricing@chargebee.com and request to disable Price Override. Include the page URL or site ID in your email.
4. Chargebee will reply to your email once Price Override is disabled.

Strikethrough Price

Use the strikethrough price feature to create a sense of value for your customers, whether or not you are applying an actual price override or providing a discount on the pricing page via API. This feature allows you to show the original price with a strikethrough on the plan card while displaying the current price next to it.

Use strikethrough pricing to highlight a price change, making the current price look more attractive. You can leverage this technique with or without a price override or discount via API. If you're not using an override or discount, the strikethrough price still serves as a visual cue to entice customers into making a purchase.

To set a strikethrough price, enter the original price in the Strikethrough field.

Price Variants (Early Access)

The Price Variants feature in Chargebee Billing, allows you to configure different prices for various user segments based on factors like geography, acquisition channel (e.g., website or email), and product attributes (e.g., t-shirt size). This approach helps optimize conversions and analyze price responsiveness while maintaining a streamlined product catalog.

For the plans listed on the pricing table, any attached price variants configured in Billing Product Catalog are also displayed.

• If price variants are configured in Product Catalog, the page notifies you. Select Apply changes to update the pricing table. (1)
• The number of available price variants for selected plans is displayed. (2)
• You can choose the price variant to preview its pricing table. (3)

Edit pricing for a price variant

Follow these steps to override the price and add strikethrough prices for price variants in Pricing Tables.

1. Set up Price Variants in Chargebee Billing.
   1. Enable Price Variants.
   2. Create Price Variants.
   3. Attach Price Variants to plan prices.
2. Override prices and define strikethrough prices for plan price variants.
   1. Open the pricing table.
   2. Select the Update pricing tab. The table displays the prices for each enabled plan, grouped first by price variant (1) and then by currency (2).
   3. Click a cell in the table to:
      • Enter an overridden price. (3)
      • Enter a strikethrough price. (4)
      • Enter both and overridden price and a strikethrough price. (5)

Select the price variant to display for the user

When embedding the pricing table, only the default price variants of the plan prices are shown. However, you can dynamically set the price variant for the plan prices displayed. To do this, integrate Pricify.js on your frontend and use the setPriceVariant() function.

Customizing Currency

When you are a business selling in multiple currencies, you can choose to display your plan pricing in select currencies or all of them. Follow the steps below to customize the currency details in your pricing page:

1. Click Currency from the customization options.
   
2. Click to enable the currencies in which you want to display your plan details in the pricing page. When more than one currency is selected, a currency selector is automatically added for your visitors to click and choose their preferred/relevant currency from.
3. You can drag and drop the currency options to reorder their display on the drop-down list based on your preference.

Show Geolocation-based currency

Additionally, you can enable the Geolocation-based currency feature to display plan pricing in currencies based on your visitors' geolocation. Follow the steps below to enable this feature:

1. Customize currencies for the pricing page to add all the plan currencies in which you are selling.
2. Click Share/Embed.
   
3. Under Additional Customization, enable the toggle Show Geolocation-based currency. With this feature enabled, plan pricing is always automatically displayed in the relevant currency for the visitors based on their location.
4. Click the toggle to Hide currency selector. You can choose to retain the currency selector if you want to allow visitors to manually choose their preferred currency.

Customizing Frequency

While selling your plans in multiple billing frequencies like weekly, monthly, and yearly, you can use this option to customize the plan frequencies that you want to display on the pricing page. To customize plan frequencies:

1. Click Frequency from the customization options.
   
2. All the plan frequencies for which price points are added in your Chargebee Billing Product Catalog are automatically listed for selected. Select the plan frequencies that you want to display in your Pricing Page.
   • For yearly frequency, you can optionally select Show price per month to display the reduced price of the plan per month when purchased annually.
3. Drag and drop to reorder the frequencies based on your preferred order of display.
4. Click the labels to customize the text.
5. Select your preferred Orientation to display the price per month/year accordingly.

Customizing Colors, Fonts, and Borders

Click Themes to customize the color palettes, font, and styling of your pricing page.

You can custom create your own theme from scratch by selecting your preferred settings for the following:

• Colours for Primary, Accent, Text, Button Text, and Background
• Font
• Border-radius
  

Optionally, you can select a preferred theme from the available presets.

Basic Customizations

The following table displays all the basic customizations that you can apply to use various text formats on your pricing page:

Advanced Customizations

While adding features to each plan card, consider using some of the following customizations to make your pricing page look more appealing:

Customizing Pricing Page for Subscribers

In addition to customizing your pricing page for new users, Chargebee Pricing Table allows you to customize the pricing page experience for your returning users, also known as the subscribers.

Follow the steps below to customize your pricing page for subscribers:

1. Log in to your Chargebee Pricing Table site, and select the pricing page that you want to customize.
2. Click the Subscribers tab.
3. Under Plans, you can customize the following:
   • Enable the toggle to Hide customer's subscribed plan if you do not want to display the plan that the customer has already subscribed to.
   • Under Button text & behavior for subscribed plan, you an update the text that gets displayed on the subscribed plan, and select an option for click behavior. You can select:
     • Do nothing: By selecting this option, you can disable the button from the plan card, so that customers do not have a click to action for the plan that they've already subscribed to.
     • Redirect to URL: By selecting this option, you can redirect your customers to a specific URL.
4. Under Frequency, you can customize What frequencies would you like to show on the page?. You can select:
   • Only show customer's existing frequency: Selecting this option displays only the plan frequency that the customer has already subscribed to.
   • Show all frequencies: Selecting this option displays all available frequencies of the plan irrespective of what the customer has subscribed to.