Pricing Plans: Customizing the Look of Your Pricing Plans Page

4 min read
Customize the appearance of your Pricing Plans to complement your site's style and showcase the benefits your plans offer.
Encourage your visitors to sign up by adjusting the layout of your plans. You can also add stylized buttons and ribbons, format your text, and customize the background and color scheme. 
Screenshot showing the pricing plans page on a live site with a custom color scheme.
In this article, learn how to customize the design of your Pricing Plans page by:
Note:
We do not recommend adding any elements to the Plans & Pricing page. If you add elements, they automatically appear during checkout, hide important information and interfere with the process.

Adjusting the layout of your plans

Adjust the layout of your pricing plans to make the information clear and readable. This allows visitors to compare your plans and their benefits.

To adjust the layout:

  1. Go to the Pricing Plans page in your Editor.
  2. Click anywhere on the page. 
  3. Click Settings.
  4. Click Layout.
  5. Customize the layout using the following options:
    • Page Text Layout: Choose your alignment preference for your title, subtitle and disclaimer. 
    • Plan Card Padding: Use the sliders to set the amount of padding between elements on your plan cards and give them rounded edges using the corner radius setting.
    • Plan Description Layout: Set your plan description alignment.
    • Benefits Layout: Choose your bullet point style, alignment and line spacing for your plan benefits.

Customizing the information displayed on your plans

Display only the information you need to brief your customers on the details of your pricing plans. From the Display tab, you can highlight specific plans, choose whether or not to show titles and taglines, and more.

To customize how your plans are displayed:

  1. Select the Pricing Plans element in your Editor.
  2. Click Settings.
  3. Click Display. 
  4. Customize the display using the following options:
    • Plan Info: Choose which information to display about your pricing plans by clicking the following checkboxes: page title, page subtitle, plan name, plan tagline and plan benefits.
    • Highlighted Plan: Use the toggles to highlight a plan and add a ribbon.
    • Auto Renewal Disclaimer: Enable the Show disclaimer toggle to display any relevant terms and conditions for clients to view before they purchase a plan. When enabled, you'll be able to add this text to the Disclaimer text field.
Screenshot of the Pricing Plans display settings tab, showing a highlighted plan with a ribbon.

Personalizing the text on your plans

Use the Text tab to write the wording for the following parts of your pricing plan text elements you wish to display: page title, page subtitle, the select plan button, the free trial button and the ribbon. 

To personalize your text:

  1. Select the Pricing Plans element in your Editor.
  2. Click Settings.
  3. Click Text.
  4. Enter your desired text in the relevant fields (e.g. title, button, etc.)

Customizing the design of your plans

Customize the design of your pricing plans from the Design tab to complement the unique personality of your site. Choose a new background, format your text, stylize your buttons and even add ribbons to promote value deals to your customers.

To customize your design:

  1. Go to the Pricing Plans page in your Editor.
  2. Click anywhere on the page.
  3. Click Settings. 
  4. Click Design.
  5. Customize the design using the following options:
    • Background and Border: Select the color and drag the slider to change the opacity of your background, plan cards, benefits and dividers. 
    • Text Style: Choose the font and color for each piece of text that appears on your plan cards. 
    • Button: Choose the style, font, color, border width and opacity of your plan card button. 
    • Ribbon: Choose the font, color, background opacity and color, border width and border opacity and color for your highlighted plan's ribbon.
Tip:
Click the Highlighted tab in each of the sections above to customize your highlighted plan. You can also click Reset to original design at any time to start again from the beginning. 
Screenshot showing how to customize the Pricing Plan widget's design in the editor.

Did this help?

|