Price List Module

Price Lists are extremely useful as a way to organize and display the price of your products and/or services. It is possible to find the Price List Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.

 


Edit the Price List Module

To open the editing menu, double-click on top of the module you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.

 

1. Content

1.1. Use Lists from Global Data

Instead of manually adding your price list to each module, you can use the price lists you have added in Global Data. To activate this option, simply toggle on in the right side. When you use the Price Lists from Global Data you only need to input the lists once and you can then use them in your website as many times as you want. Learn more about Global Data here!


1.1.1. Show Lists

It is only possible to show one price list per module. Therefore, when enabling the lists from Global Data you must choose from the dropdown menu which price list you want to show.

 

1.2. Manually Adding List

1.2.1. Title

In this section you should add the title of the list.

 

1.2.2. Add Element

By default, the editor will create one element, already numbered as 1. Click on it to expand the field and be able to edit it. 

 

1.2.2.1. Add Image

In this section you can add an image to the list item. Choose it from your library or add the file by clicking on the Add File button.

 

1.2.2.2. Number

If you want to create a numbered list, use this field to add the number for the item. 

 

1.2.2.3. Title

Add the name of the item in this section.

 

1.2.2.4. Price

Add the price for the item. Please note that you have to manually add the currency, e.g. 20€, 15 USD, ... ; or you can even type down something else, e.g. Free, On Sale, among other options.

 

1.2.2.5. Description

Add a small descriptive text about the item. 

 

1.2.3. Change order & Delete Element

To change the items order simply click on the three vertical dots on the left side of each item and drag it to your preferred position. To delete an item of a list, simply click on the x icon on the right side.

 

2. Styling

 


2.1. Image

In this section you can define the image placement - to the left, centered or to the right - as well as the image size (as a percentage of the original size). Finally you can also define some spacing options in terms of margin. 

 

2.2. List Elements

In this section you can define a background color and border, including color, width, style and radius, to the list elements as a group. You can also define spacing both in terms of margin and padding.

 

2.3. Title

Style the title in terms of font color, size, family, weight, line height, uppercase letters, alignment and spacing. 

 

2.4. Item Name

Style the item name in terms of font color, size, family, weight, line height, uppercase letters and spacing. 

 

2.5. Price

Style the price in terms of font color, size, family, weight, line height, uppercase letters and spacing. 

 

2.6. Description

Style the description in terms of font color, size, family, weight, line height, uppercase letters and spacing. 

 

2.7. Background

With this option you can choose a solid color as the background for the module.

 

2.8. Border

Here you can define the module's border color, width, style and radius.

 

2.9. Spacing

When styling the spacing you can define the margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element.

 

3. Global Styling

It is possible to style all the Price Lists modules simultaneously with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Price Lists menu. Read more about the Price List Global Styling here!

 

Anything we’ve not covered?

Contact Us