Multi-Plan Pricing Plan Selector
Installation Guide
If you don't already know, HubXpert has a wide array of published and developing modules in the marketplace. One of the standout modules is the "Multi-Plan Pricing Plan Selector” module, designed to help you create dynamic and customizable pricing plans with ease. You can find the module here.
This page will guide you through the installation process.
Introduction
The Multi-Plan Pricing Selector is a versatile and intuitive module crafted to enhance the display of pricing options on your website. This sophisticated module allows you to effortlessly filter pricing cards by their chosen plan—such as Weekly, Monthly, or Yearly. By implementing this module, you can dynamically showcase various pricing cards that correspond to the selected plan, ensuring that your visitors can easily navigate and find the option that best suits their needs.
Moreover, the flexibility of the module enables you to add as many pricing cards as necessary, accommodating a wide range of pricing structures and offering a tailored experience for your customers. Whether you are showcasing a SaaS service, subscription plan, or any other pricing model, this module empowers you to present your plans engagingly and professionally.
This tool is designed to provide businesses with the flexibility to showcase intricate pricing structures effectively. It features dynamic buttons, streamlined navigation, and extensive customization options. The best part? No coding skills are required—simply integrate it and make the necessary configurations!
First, Visit the Module Marketplace
If you haven’t done so already, access the Multi-Plan Pricing Selector module from the HubSpot marketplace. Here you can explore its features, including dynamic pricing cards, light and dark modes, custom fonts, and much more.
Second, Select the Account
If you have more than one HubSpot account, choose the account where you’d like to install the module. This ensures that your configuration is set up in the correct environment.
Third, Configure the Module
After selecting your account, you'll be taken to the module configuration page. From here, you can easily customize the module to fit your brand’s look and feel. The following options are available:
-
Set up tabs for different pricing plans: Choose from options like Weekly, Monthly, and Yearly.
-
Add pricing cards: Customize as many pricing cards as needed under each plan.
-
Personalize card elements: Adjust background colors, font styles, button designs, and more.
-
Light/Dark Mode: Switch between light and dark versions of the pricing cards for better alignment with your site’s theme.
-
Default Active Plan: Choose which pricing plan will be shown as the default when the page loads.
Finally, Add the Module to Your Page
Once you've configured the module, adding it to a page is simple:
-
Navigate to the page where you'd like to add the module.
-
Click the "+" icon to insert a new module.
-
Select the Multi-Plan Pricing Selector from the list of available modules.
-
The module will now be displayed on your page with all your customized settings.
Usage Guide
Now that you have installed the guide, let's see how you can use it and change it to your own style:
Toggle Between LIGHT and DARK Version
-
You can easily toggle between the light and dark versions according to your theme for the website.
-
You can individually customize the design for different color versions.
You Can Customize ALL Fonts and Colors
-
You can customize all the texts of the module, from the module header to the card’s text, everything is customizable.
-
You can customize those texts formats like font type, size, color, and layouts like Bold, Italic, light or underlined for the plan names, descriptions, and buttons or whatever.
You Can Customize The Plan Options
You can create multiple pricing plans, each with its unique pricing cards. You can toggle between these options (such as Weekly, Monthly, or Yearly plans), and the associated pricing cards can be customized uniquely. You can also toggle the recommended option for any pricing card you want.
You Can Change The Background
-
Choose between a solid color, gradient, or background image for each pricing plan card as well as for the section too.
-
You can also use your own custom images to create visually appealing backgrounds for each plan as well as for the section too.
Other Miscellaneous Features
-
You can add custom buttons with URLs, allowing visitors to navigate to specific pages (e.g., a checkout page or a detailed pricing breakdown) when they click a button.
-
Each pricing card can feature unlimited customizable icons that represent specific benefits of your pricing plans. Icons help users quickly grasp what each plan offers.
-
This module is designed to look perfect across all devices, ensuring a seamless user experience.
Use Case Clarification:
SaaS Products:
-
Scenario: Display multiple subscription plans (e.g., Basic, Pro, Enterprise) with different features and billing options (Weekly, Monthly, Yearly).
-
How the Module Helps: Easily toggle between plans and billing cycles, with customizable cards to showcase plan features.
E-Commerce:
-
Scenario: Offer tiered pricing for product bundles or subscriptions (e.g., Basic, Standard, Premium).
-
How the Module Helps: Present different pricing tiers with flexible billing options and highlight key benefits using dynamic pricing cards.
Memberships & Subscriptions:
-
Scenario: Show various membership plans (e.g., Basic, Premium, VIP) with different perks and billing options.
-
How the Module Helps: Compare membership tiers with dynamic toggling for different billing cycles and customizable pricing cards.
Module Features Overview
Key Features:
-
Customizable Pricing Cards: Easily add and customize pricing cards for different plans (Weekly, Monthly, Yearly).
-
Dynamic Plan Toggle: Allow users to toggle between plans for easy comparison.
-
Light/Dark Mode Options: Switch between light and dark themes to match your website's design.
-
Custom Fonts and Colors: Fully customize fonts, text styles, and background colors for complete brand consistency.
-
Dynamic Buttons: Add custom buttons with links to direct users to other pages like a checkout or detailed pricing page.
-
Responsive Design: Fully responsive across all devices (desktop, tablet, mobile).
