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’

Table Layout Discount Widget

Select 1 in 2 types: Volume Discount or Quantity Discount 

Table Layout Discount Widget

Choose Table Layout 

Table Layout Discount Widget

2. Configure the Table Layout

Configurations in the General tab and 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. 

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 3 types of variables 

{{ price_per_item }}: Sale price each item at this tier

{{ min_qty }}: Min quantity at this tier

{{ max_qty }}: Max quantity at this tier

Table Layout Discount Widget

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 3 types of variables 

{{ price_per_item }}: Sale price each item at this tier

{{ min_qty }}: Min quantity at this tier

{{ max_qty }}: Max quantity at this tier


Table Layout Discount Widget

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 color / pattern fill of the below rows of the table
    2. Configure similarly to the widget background. 

Table Layout Discount Widget

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 

    • Related Articles

    • Set up your Quantity Discount and Volume Discount Offers

      Boost sales for a single product or any products, boosting average order value (AOV), or clear excess inventory with ‘Quantity Discount’ Offer and ‘Volume Discount’ Offer in G: Volume Discounts & Upsell. They are designed to help Shopify merchants ...

    • Set up your Quantity Breaks Discount Offer

      Boost sales for a single product, average order value (AOV), or clear excess inventory with ‘Quantity Breaks’ Offer in G: Volume Discounts & Upsell. Paired with 5+ interactive templates, they are designed to help Shopify merchants drive larger ...

    • Adding the Embedded Countdown Timer to your Discount Widget

      A countdown timer displayed directly in the discount widget creates a sense of urgency for customers, encouraging them to complete their purchase sooner. It also helps clear excess inventory quickly and boosts average order value—customers rush to ...

    • Getting Started to G: Volume Discounts & Upsell

      Introduction Struggle to boost your Shopify store’s average order value (AOV) or clear out excess inventory? Do your customers often abandon carts with only one or two items? G: Volume Discounts & Upsell is here to solve these worries. This ...

    • How to Fix the Shopify Discount Conflicts

      If you see a potential discount conflict notification, it means multiple automatic discounts apply to the same conditions and only one can be used at checkout. This guide shows how to review and resolve the conflict so the intended discount applies. ...