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.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
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.
18.104.22.168. 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.
If you want to create a numbered list, use this field to add the number for the item.
Add the name of the item in this section.
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.
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.
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.
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.
Style the price in terms of font color, size, family, weight, line height, uppercase letters and spacing.
Style the description in terms of font color, size, family, weight, line height, uppercase letters and spacing.
With this option you can choose a solid color as the background for the module.
Here you can define the module's border color, width, style and radius.
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!