Turn your pricing section into a high-converting sales tool—without writing a single line of code.
Pricing Plans Premium lets you showcase, customize, and update your plans in minutes. Flexible layouts, currency toggles, and category-based pricing make it easy for customers to find the perfect fit. Drag-and-drop controls, interactive animations, and instant updates create a smooth buying experience that scales with your business growth.
Key Features :
✅ Monthly & Yearly Toggle – Seamless switch between billing cycles.
✅ 3 Flexible Layouts – List, or accordion views adapt to any design style.
✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.
✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.
✅ Easy to Integrate – Simple setup and integration into any page or theme.
✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.
✅ Category-Based Pricing – Organize plans by service category.
In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.
Search for "Pricing Plans Premium" and drag and drop the module into the desired location on your page.
Layout ID :
To enable smooth scrolling for a CTA, assign an ID to the target element, reference that ID in the anchor link's href, and clicking the CTA will smoothly scroll the page to the section.
Layout Options :
Easily select your preferred layout (e.g., Plan Tab View, Tabbed View with toggle, or Dark View) to showcase your pricing in a format that matches your brand and content flow. Effortlessly reorder plans, switch between monthly and yearly billing, and adjust categories to create the ideal browsing experience. Whether you’re offering a few packages or managing a full suite of services, this module ensures a seamless, customizable, and engaging pricing journey for your customers.
Options :
Tab & Toggle :
Quickly guide visitors to the right plan using the built-in Tabs and Toggle controls. Users can switch between categories like CRM, Development, or UI/UX, and instantly toggle between Monthly and Yearly pricing — all in real time without page reloads. These intuitive navigation options make comparing plans effortless, delivering a faster, clearer, and more personalized decision-making experience.
Plan Cards :
Each plan card is fully customizable, allowing you to showcase key role details in a clean and engaging format. Include a compelling title, price, label, description and CTA. All content is managed directly in HTML for simple updates without touching the code logic.
Plan Table
Easily customize your pricing tables to match your brand and business needs. Adjust column labels, reorder features, and highlight popular plans to guide customer choices. Add or remove rows with ease, control text alignment, and style borders, backgrounds, and typography — all without touching code. Whether you’re showing three simple tiers or a detailed enterprise comparison, the Plan Table customization tools ensure your pricing is always clear, attractive, and conversion-focused.
Module Setting :
Adjust the margin, padding, container width and background colors to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.
Heading & Description
Easily style your pricing headings and descriptions to create the perfect first impression. Adjust font size, weight, and color, fine-tune spacing, and align text for maximum impact. Add compelling subheadings or supporting descriptions to highlight value and guide visitors toward the right choice. With flexible customization, your headings and descriptions stay on-brand, clear, and visually engaging — ensuring your pricing section speaks directly to your audience.
Tabs and Toggle – Styling Options
Customize the look and feel of your Tabs and Toggles to match your brand identity. Adjust colors, typography, and spacing, add hover and active state effects, and choose between rounded or square styles for a polished finish. Control the size and alignment for both desktop and mobile, ensuring smooth navigation across all devices. With flexible styling options, your Tabs and Toggles stay intuitive, attractive, and perfectly on-brand.
Card Column Setting :
You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.
Card Content Setting :
Take full control over your card content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.
Plan Table :
Style your Plan Table to perfectly align with your brand. Customize colors for headers, rows, and borders, adjust font sizes and weights, and fine-tune spacing for a clean, readable layout. Add highlight styles to feature your most popular plans, or apply alternating row colors for better visual flow. With full control over design elements, your pricing table remains clear, professional, and visually engaging on any device.
We hope you enjoy using our pricing plans premium module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.