Customisable Pricing Cards Documentation

Introduction

Customisable Pricing Cards module provides an organised way of showing your services or products' price. The pricing cards are designd in such a way that you get to showcase the highlights of the service along with their pricing in a single card. Using cards helps easily understand and differentiate between the pricing of select services or packs of services that the user can choose. With the plethora of customisation options available, the module can be seamlessly integrated with your website design and can elevate the user experience.

 

SUPPORT:

If you need assistance at any step of the way; get in touch with us at ProductSupport@transfunnel.com
And get Premium Support from Transfunnel - HubSpot's Elite Solutions Partner

Customisable Pricing Cards Documentation

Possible Layouts

Layout Options: Welcome to the "Customisable Pricing Cards" module, which when used makes your offerings/pricing page more organised and easy to understand the pricing as per the services you are offering at that price. The customisations that this module offers give you the options to choose many styles, colours, and methods to showcase your prices.

  • Easier decision making: Customisable Pricing Cards makes it easier for the user while navigating through the website, to decide whether your services are what they need.
  • Stylish yet concise: Customisable Pricing Cards module shows your plan pricing in a stylish yet easy to read and understand. This makes it easier for the user to understand in the first round of filtering what plan they should go for. This clears their confusion which in turn help you during calls.
  • Responsive and mobile-friendly: The " Customisable Pricing Cards " module is designed to provide optimal viewing experiences on various devices, including desktops, tablets, and mobile phones. With its responsiveness, your page will adapt seamlessly, ensuring a consistent and engaging experience across all platforms.
  • Customisation: The “Customisable Pricing Cards” module comes with a bunch of customisations, all of which you can control to give the user a seamless experience in tandem with your website’s colours, style, and design.

Content features:

The content part contains Headings, Pricing Switcher, Pricing Cards customisation option.

pricing-screen-1

Headings are defined to make the module easier to understand and seamless to view. You can edit them as small heading, title and description.

Switcher gives you the functionality to showcase multiple pricing options for your offerings.

pricing-screen-2

Pricing cards can be customised in many ways, you can adjust image icon, alt text, size, width and height of the card, details, prices and CTAs are also visible and can be easily edited at your will. 

Style features:

pricing-screen-3

In style, you can customise the spacing, headings, switcher and pricing separately

pricing-screen-4

In Headings, you can edit small title, title and description. You can edit their font style, size, colour, alignment for Laptop, tablet and mobile separately.

pricing-screen-5

In Switcher, you can add or remove the switcher. You can customise Switcher, Buttons and Spacing. 

pricing-screen-6

In Switcher, you can edit its corner radius, border style, background colour in solid colour or gradient colour. 

pricing-screen-7

You can edit button font style, size, background colour, and corner radius.

pricing-screen-8

In spacing, you can edit margins above and below and padding from 4 directions. 

pricing-screen-9

n pricing, you can customise cards, card icon, plan name, pricing value, plan details, plan CTAs, discounts/offer if any. 

pricing-screen-10

In cards settings, you can get the number of cards you require, card’s corner radius, border style, shadow colour, background colour – solid or gradient.

pricing-screen-12

In pricing card icons, you can the icon type, alignment and padding. 

In pricing plan names, you can edit font style, size, background colour, padding and border style for laptop, tablet and mobile respectively. 

pricing-screen-13

You can edit the font style, size, type, backgrounf colour, padding and border style in pricing value for laptop, tablet and mobile. 

pricing-screen-14

In plan details you can edit font type, style, size and alignment. You can choose the list icon, background colour, padding.

pricing-screen-15

In Plan CTAs, you can edit CTA types, font type, style, size, label colour, background colour, corner radius, section background colour, and padding. 

pricing-screen-16

You can enable or disable the discount option in the card. When enabled, you can edit colour and background colour. 

You can also show the “Most Popular” at the top of any card you want. This will help you showcase the most popular plan. 

Conclusion:

The "Customisable Pricing Cards" module provides you with a powerful tool to enhance the user experience while viewing your services and their prices in organised beautiful cards. With this, you can showcase your services is a seamless, organised, better to view, and structured manner. Start leveraging Customisable Pricing Cards module today and let irrelevant leads reduce.