The Price List addon allows you to display the information of a product as a single block. This block consists of the Product's Name (Title), Description (Content), Image (Media), as well as its Price.

This addon is really useful for an eCommerce site’s Product Page, a Restaurant’s menu, etc. It helps save time as it’s a ready-made block and you can simply edit the placeholder information to that of your products.

How to Add Price List

To add a Price List addon, open the Addons Panel. This can be accessed through the Sidebar or by clicking the plus icon inside a Row. Scroll down to the Content section and drag & drop this addon to where you want to place it. 

You can add more Price List blocks to make it a list.

Price List Settings

Now it’s time to edit its placeholder content to display real information. Do this by either clicking on the text directly or by opening the Price List Settings from the inline editor.

Title

Title: Enter the name of your item here.

HTML Element: Use this field to determine the HTML element for your title.

Typography: Customize the font style and size form this field. 

Top Margin: Set the space above the title here.

Bottom Margin: Set the space below the title here.

Alignment: Select the alignment for your title here.

Price

Define and style the price of your product or service to enhance visibility and branding.

Typography: Customize the font style and size for the price display.

Color: Select a color that complements your design.

Position: Align the price with the content, below it, or to the right.

Top Margin: Adjust the spacing above the price for better layout balance.

Bottom Margin: Modify the spacing below the price for optimal positioning.

Decimal Alignment: Choose to align decimal points at the top or bottom for a consistent price format.

Discounted Price: Highlight a discounted price alongside the original to attract attention.

Media and Image Settings

To add media to your Price List addon, navigate to the Price List Settings and click on the Media tab.

Media: Toggle to enable media for your price list.

Type: Choose between a number or image as the media type.

Alt Text: Provide descriptive text for the media.

Width: Adjust the width of the media.

Gap: Set the spacing between the media and other elements.

Border Radius: Customize the rounded corners with the border radius.

Tag: Add a tag to categorize or describe the media.

Content

You can add more details to your listing from here.

The three-dot icon in the top-right offers additional options to customize your content, including font size, alignment, lists, image uploads, and more.

Divider

Enhance the visual structure of your price list by customizing the divider’s appearance and placement.

Style: Choose from solid, dotted, dashed, or double lines to match your design.

Size: Adjust the thickness of the divider for emphasis.

Color: Choose a color that complements your content.

Position: Place the divider at the vertical center, bottom, or after the title and price.