Table Layout Discount Widget in Quantity Discount and Volume Discount

Table Layout Discount Widget in Quantity Discount and Volume Discount

The Table layout displays your discount tiers in a clear, structured table format. It provides the same functionality as the Stack layout while offering additional customization options in the Offer blocks and Design tabs, making complex tiered offers easier for customers to read and compare at a glance.

1. Create offer with Table Layout

On the app’s left tab menu, click ‘Create Offer"

Select 1 in 2 types: Volume Discount or Quantity Discount



Choose Table Layout


2. Configure the Table Layout

Configurations in the Discount Tiers tab and the Advanced tab are exactly similar to the Stack Layout.

Additional settings: Table header and Table body settings

2.1. Offer Blocks Configuration

Widget title & subtitle: Configure similarly to the Stack Layout here. 

Header Table

You can click “Add Column” to add more content rows and columns. Then enter headers and Content (in Offer Tiers block) in the corresponding fields.


Table title 1

Add title for the first column of the table (left side) → act as label for the first column of the table e.g. Discount

Table title 2

Add title for the second column of the table (right side) → act as label for the second column of the table e.g. Amount

Offer tiers

Content 1

  1. Add the content of the discount tier (under the column with Title 1) e.g. Each item for $95.00 ~ Each item for {{ price_per_item }} 
  2. You can insert 5 types of variables 
    1. {{ price_per_item }}: Sale price each item at this tier
    2. {{ min_qty }}: Min quantity at this tier
    3. {{ max_qty }}: Max quantity at this tier
    4. {{ discount_value_per_item }}: Discount value for each item in this tier
      1. Use case: tier 1. Each item is discounted by 5%
      2. Content: "You save {{ discount_value_per_item }} on each item" → "You save $5 on each item"
    5. {{ discount_value_min_item }}: Total discount value at tier minimum quantity
      1. Use case: Tier 1. Buy 3-6 items. Each item is discounted by $6
      2. Content: "Buy {{ min_qty }}, save at least {{ discount_value_min_item }} in total" → "Buy 3, save at least $18 in total"
    6. {{ discount_value_max_item }}: Total discount value at tier maximum quantity
      1. Use case: Tier 1. Buy 3-6 items. Each item is discounted by $6
      2. Content: "Buy {{ max_qty }}, save up to {{ discount_value_max_item }} in total" → "Buy 6, save up to $36 in total"




Content 2 

  1. Add the content of the discount tier (under the column with Title 2) e.g. 2 - 3 items ~ {{ min_qty }} - {{ max_qty }} items 
  2. You can also insert 5 types of variables 
    1. {{ price_per_item }}: Sale price each item at this tier
    2. {{ min_qty }}: Min quantity at this tier
    3. {{ max_qty }}: Max quantity at this tier
    4. {{ discount_value_per_item }}: Discount value for each item in this tier
    5. {{ discount_value_min_item }}: Total discount value at tier minimum quantity
    6. {{ discount_value_max_item }}: Total discount value at tier maximum quantity


Quantity & Discount configurations: Configure similarly to the Stack Layout here. 

Table Layout Discount Widget

2.2. Design Configurations

Preset, Widget spacing, Tier padding, Horizontal padding, Vertical padding, Widget background: Configure similarly to the Stack Layout here.

Widget layout

  1. Tier header background
  1. Set the color / pattern fill of the first row of the table
  2. Configure similarly to the widget background. 
  1. Tier background
    1. Set the colour / pattern fill of the below rows of the table
    2. Configure similarly to the widget background. 



Setting colors

Widget border, Tier border, Widget title, Widget subtitle: Configure similarly to the Stack Layout here.

  1. Table header
    1. Set the text color of the first row of the table.
    2. Configure similarly to the widget title. 
  2. Tier content 1
    1. Set the text color of the first column of the table (except the table header on the first row).
    2. Configure similarly to the widget title. 
  3. Tier content 2
    1. Set the text color of the second column of the table (except the table header on the first row).
    2. Configure similarly to the widget title. 
Typography
  1. Tier header title
    1. Set the text font and size of the first row of the table.
    2. Configure similarly to the widget title. 
  2. Tier content 1
    1. Set the text font and size of the first column of the table (except the table header on the first row).
    2. Configure similarly to the widget title. 
  3. Tier content 2
    1. Set the text font and size of the second column of the table (except the table header on the first row).
    2. Configure similarly to the widget title. 

Table Layout Discount Widget

Now you know how to set up and fully customize the Table layout for your Volume or Quantity Discount offers, giving your customers a clean and professional presentation of every discount tier. If you have any questions on this, please contact us via support@tapita.io