Pricing

Author: An Do 2995 views

What you’ll have when you come to the “Pricing” element? Let’s go forward with EComposer App to find it out.

The Pricing element allows you to clearly demonstrate the information from each packet (plan) to your customer who wants to upgrade their level. Show more details about your company’s packet to your customers, and let them compare what they will have for now and even after the upgrade. Follow the stages below with us to create one that belongs to your store.

1. How to add the Pricing element to your page

You can follow these steps to add the Pricing element to your page:

Step 1: Click into Elements –> Advanced –> Pricing
Step 2: Drag the Pricing element from the left sidebar and drop it wherever you want it to stay.

Note: You can include a variety of elements such as Icon, Heading, Button, Text, Divider and so on. Showcase all of the details that you want to send to your customer in the Pricing elements. Following the instance bellow.

2. How to Configure the Pricing

2.1. Editing Row

As you can see from the video below about how to edit rows, you can set up lots of fantastic elements for the columns with just one click. Go to the Navigator => Inner Row to edit the row as you want.

Layout: You can totally set up the column on the row as Content Width, Content Height, Column Gap, Align columns inside, Structure, or Video Background. Including Structure allows you to share the percentage of each column more easily, and you may have a chance to create a new column by adding it; also, you may delete it if you want to.

Design: Allows you to change the Background color or image, Background Overlay, set Border for that, and you may edit the Typography.

2.2. Configuring Pricing Columns

First of all, please go to the little pen icon in the right corner to go to the settings board. And then you will get your own design for each column in that.

Layout: This element allows you to set the Column width, Elements space, as Align elements inside for the one column that you are setting, and Video Background.
Design: Let you feel free to create a style for the column that belongs via Background, Background Overlay Border, Box Shadow, and Border Radius.

3. Frequently Asked Questions

The video above covers all available column settings. If you’d like step-by-step instructions for specific customizations, refer to the guides below:

How to add more Columns to the Pricing?

You can create additional pricing columns to showcase more plans or options. There are 3 ways to add more columns.

First way: Open Navigator => open the Inner Row of the Pricing element => click the Add Column button to add a blank column.

Second way: Open Navigator => hover over an existing column => click More actions => click Duplicate.

Third way: Hover on a column area => right-click the pen icon at the top right corner => click Duplicate to add the same column as the chosen one.

How to change the column background in Pricing?

You can change the Background of a column to a color or image in Normal and Hover states. You can also change the Background Overlay of the column.

How to Customize Column Borders?

You can adjust the border line, box shadow, and border radius of the Column in Normal and Hover states.

How to adjust Columns for Mobile view?

You can adjust the Width value of the columns on mobile to adjust the number of columns that will be shown on one row. For example, you can change the Width to 50% to show 2 columns on one row.