Pricing block

  • A pricing packages block with prominent price indicators and a list of items such as services or products included in the package.
  • A pricing package or individual items pricing list displays the contents of the pricing package or the brief description of the product or service in a line of text.
  • A list of products or services as columns, with a possibility to separate them based on age, purpose, or other criteria.

Here’s how to add a Pricing block:

  1. Choose a location where you want to add a pricing block and click on the Add Block + button.
  2. In the Block Library, navigate to the Pricing section in the left-hand menu and click on a block that fits your business requirements. Click on the block and it will be automatically inserted into the page.

Customizing the Pricing block with lists

  1. Add the Pricing block.
  2. Hover over a page element to bring up the dialog box.
  3. Click on the “gear” Settings icon and the Block settings menu will appear.

You can change the following settings:

Screen_Shot_2021-04-05_at_14.49.40.png

  • Block style: choose the block color scheme.
  • Block title: check the box to display the main text. To remove, uncheck the box.
  • Package icon: check the box to display the icon that symbolizes the package. To remove, uncheck the box. You can replace the icon by hovering over it and choosing the new icon from the Icon Library
  • Package description: check the box to display the list below the price. To remove, uncheck the box. You can also delete each individual line of text.
  • Package button: check the box to display the button in each column of the Pricing blocks. To remove the button, uncheck the box.
  • Primary and secondary buttons: check the box to display each of these buttons. To remove any of them, uncheck the box.

 Once you are done customizing the Block settings, click Save to confirm the changes.

 

Customizing the Pricing block with line descriptions

Insert the block with the horizontally aligned package or product descriptions as described above. Hover over any element or empty space to bring up the dialog box.

Click on the “gear” Settings icon and the Block settings menu will appear.

You can change the following settings:

Screen_Shot_2021-04-05_at_14.45.13.png

  • Block title: check the box to display the main text. To remove, uncheck the box.
  • Package button: check the box to display the button in each column of the Pricing blocks. To remove the button, uncheck the box.
  • Primary and Secondary buttons: check the box to display each of these buttons. To remove any of them, uncheck the box.

 Once you are done customizing the Block settings, click Save to confirm the changes. 


Editing the text in title, subtitle, and pricing details

To replace the demo text with your own text in the block title, simply click on any line anywhere on the page and start typing. You can also paste the text from a text editor you are using.

Editing pricing buttons

You can modify the text in each line’s button by clicking on the button and typing in it. The button’s link can lead to the payment page.

 

Editing the Primary and Secondary buttons

You can edit the text in the button by hovering over it and starting to type your own text on top of the button.

To add the destination to the button, hover over the button to trigger the appearance of the dialog box. Click on the “chain link” Link icon and choose the page where this button leads to, an email address, or an external URL.

Need more Pricing options on your page?

If you would like to display more pricing options, you can easily duplicate any of the block elements. Here’s how you can do that:

  1. Hover over any block element you want to duplicate and click on the Duplicate icon.

Managing_various__Pricing__blocks_04__purple_.png

2. The identical block element will be inserted below the original line.

Managing_various__Pricing__blocks_05__purple_.png

Now you can modify this new line according to your business plan.

You can also duplicate a pricing element column in the Pricing block with price lists. Here’s how you can do it:

  1. Hover over the block you wish to duplicate to trigger the dialog box.  Click on the Duplicate icon.
  2. The new column with prices will be inserted below. It will be spaced automatically to preserve the clean look and feel of your site.

Deleting pricing options

You can remove any pricing package elements or individual pricing lines in the Pricing block. Simply hover over any element to trigger the appearance of the dialog box and click on the Delete icon.

Managing_various__Pricing__blocks_06__purple_.png

 The line will be removed from the Pricing block. 

Moving block elements across the page

You can move pricing columns in any way that meets your website goals. To move the column element:

  1. Hover over the column to bring up the dialog box, and click on the Move icon.
  2. Drag the element and drop it on another spot inside the block. The yellow marker line will show where the block will fit.
  3. The layout of the block will be adjusted automatically to preserve the clean look and feel of your website.

Note: you cannot move pricing lines or columns to another block on the page. 

Other helpful articles

Selling services in your Online Store

Selling digital products in Online Store

Creating a page from a page template

Creating a Contact Us page

Was this article helpful?
0 out of 0 found this helpful