REA Price List

The REA Price List widget lets you create fully styled catalogs and menus that include pricing.

Content

List

List Items

Shows a list of all the items in the widget. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

By clicking on each item you can customize their content and settings, which are:

  1. Price: Add the price of the item.

  2. Offering Discount: Show or Hide offering discount.

  3. Original Price: Add the original price of the item.

  4. Title & Description: Set the title and description of the item.

  5. Badge: Choose the type of badge, either Icon or Text .

  6. Badge Icon: Set the badge icon by choosing from the two options, this setting is available if the Badge is set to Icon.

  7. Badge Text: Add the badge text, this setting is available if the Badge is set to Text.

  8. Image: Choose an image from the media library.

  9. Link: Enter the URL for the item’s link.

Style

List

Title & Price

  1. Typography: Set the typography options for the title and price.

  2. Color: Choose a color for the title and price.

  3. Title Hover Color: Choose a color for the title on hover.

Old Price

  1. Color: Choose a color for the old price.

  2. Typography: Set the typography options for the old price.

Badge

  1. Space: Set the left spacing between the badge and the title.

  2. Typography: Set the typography options for the badge.

  3. Color: Choose a color for the badge.

  4. Background Color: Choose a background color for the badge.

  5. Border Type: Choose the border type for the badge.

  6. Width: Set the border width for the badge.

  7. Color: Choose the border color for the badge.

  8. Border Radius: Set the border-radius values for the badge.

  9. Box Shadow: Set the box shadow options for the badge.

  10. Padding: Set the padding values for the badge.

Description

  1. Color: Choose a color for the description.

  2. Typography: Set the typography options for the description.

Separator

  1. Style: Choose the style of the separator between the title and the price, selecting from solid, dotted, dashed, double, or none.

  2. Weight: Set the weight of the separator.

  3. Color: Choose a color for the separator.

  4. Spacing: Increase or decrease the space to the left and right of the separator.

Image

  1. Image Size: Choose the size of the image, from thumbnail to full, or set a custom size.

  2. Border Radius: Set the border radius of the image, to control corner roundness.

  3. Spacing: Set the spacing between the image and the content.

Item

  1. Rows Gap: Set the spacing between each item.

  2. Vertical Align: Choose either top, bottom, or center alignment for the content, in relation to the image.

Last updated