Creating pricing cards in the Quote Block
Sometimes you need to display several pricing plan options side by side. Qwilr's pricing cards offer a clean, visual way to help your client make comparisons.
In this article:
The Quote Block offers two ways to display pricing: on side-by-side plan cards, or in a table. In any quote, you can use either or both of these formats.
Adding a new pricing card section
When you first add a new Quote Block to a page, you'll be prompted to choose a format for your quote. Choose Plans Only if you want to display only pricing cards.
Sometimes, you might want to display the plan cards, and then have some add-on options listed below them. In that case, choose Combined Plans and Quote.
If you're working in an existing Quote Block, you can add pricing cards by clicking on the + symbol and choosing the Plans option.
When you're ready to add another card, click the + icon.
Entering data into a pricing card
The first information you'll want to add is your price and any recurrence. Click on the price field and enter the amount. Then use the drop-down menu to choose either a one-off charge, or a recurring period.
If you're presenting a price that has an end date, you can use the Unit field. In this example, we've set the unit price as a one-off, and then used the Unit field to indicate that the price covers a set number of weeks.
The unit price will multiply by the quantity, and you can define the unit any way you like.
Note: You can hide this field from view in the section options.
You can give any card a title (such as a plan name) by clicking the top field.
You might also want to add a list of features for this plan. Click the check mark at the bottom of the card to start adding features. Hit Enter to add a new feature to the list.
Adding options to a single card
Want to add a discount? Make a card optional or required? Give your client control over the quantity? All of that happens in the Plan Options menu.
Head to the top right corner of any card and click the pencil.
From here, you can:
- Apply a discount to the card
- Exempt the plan from taxes
- Make the plan card optional, or mandatory
- Set an optional quantity range for your client to choose from
- Set the card as Recommended, which highlights it.
Pre-selecting a card
Sometimes, instead of highlighting a card, as shown above, you might want to present a card as pre-selected. To do that, click on the Select button. This card will appear larger in the display.
Your client will still be able to make a different selection when they view the page.
Adding options to a set of pricing cards
You can also add options to a whole section of pricing cards at once. Click on the top edge of the section to bring up the toolbar. Then choose Section Options.
From here, you can apply a discount to all cards in the section.
You can use the Properties menu to customize the display of the cards. You can hide or show the quantity and Unit fields, as well as the feature lists below the cards.
The Properties menu also lets you configure your client's choices. If you enable the Single Select switch, your client will only be able to choose one card. Disable that switch, and they can choose multiple cards.
If you need to make any section of plan cards mandatory, you can disable the Optional Section switch.
Moving pricing cards
To move a single card right or left, click the Plan Options icon, and then click the arrows.
To move a section of cards, click along its top edge to bring up the toolbar. Then click the Move Up and Move Down arrows.
Cloning pricing cards
If your pricing involves lots of plan choices, cloning offers a great way to save time building your quote. There are three ways to clone a section of pricing cards.
Cloning a single card
To clone any single plan card, click the Plan Options icon. Choose Clone from the toolbar. This places a new, identical card to the right of the original
Cloning a section of cards
To clone a whole section of pricing cards, click on its top edge to bring up the toolbar. Then choose Clone. This places a new, identical section of cards below the original.
Cloning a section and adding a different billing frequency
Alternatively, if you need to present the same section of plans but with different billing frequencies, you can clone and update the billing. Click the top edge of the section to bring up the toolbar. Choose Properties, and then enable the Group Plans by Billing Frequency switch.
You'll be prompted to choose the billing frequency for the new copy of the section.
After that, each billing frequency appears as a button at the top of the section. Your client can use these buttons to view the different options.
Deleting pricing cards
To delete any individual card, click on the Plan Options icon. Then click the Delete icon.
If you need to delete whole section of cards, click on its top edge. A toolbar will pop up, where you can click the Delete Section icon.