Styling the Discounted Pricing Table

The volume discount table on your product pages has default settings when they appear. You can adjust a few settings on the app and style your volume discount table to your own preference such as the following:

  • Change colors or adjust the thickness of borders
  • Modify background colors and text alignment
  • Change the text colors
  • Modify the table's type of display
  • Set preferred terms or phrases 
  • Show product prices

In this article:

Changing the table design settings

To change the table design settings according to your preference, follow the steps below:

1
Launch the app and click on  S ettings.
2
Choose  Discount Table under the  Customize  Design tab.
3
Click the  Design tab.
4
Set  Override table style to  ON.
5
Under  Table Title Style, choose your desired  Title Position, Font size and color, and  Background.

Note: Your changes will be reflected in the preview window on the right as you make them.

6
Under  Table Header Cell Style, choose your desired  Background, Border, Font color , Text Align, Padding, Border Width, and Font size.
7
Under the  Discount Cell Style, choose your desired  Font color, Background, Table Font Style, and  Text Style.
8
Under  Table General Style, choose your desired  Table border, font style, border width, Min width, and  Max width.
9
Click  Save.

Modifying or Removing the "Off" word

The Off word in the volume discount table is populated by default. It signifies the amount or percentage of the discount that can be availed, depending on the customers' purchase. Some merchants prefer to use other terms instead of this word or totally remove it. Although populated by default, you can modify or remove this word if you prefer to. Follow the steps below:

1
Choose  Language under the  Customize  Design tab.
2
In the  Off field, replace the word  Off with your desired texts.  If you wish to totally remove the word, simply erase it entirely and enter a space instead.
3
Click  Save.

Showing product prices

Most customers would prefer to see the net price of the products after the discount has been applied compared to just seeing the discount amount or percentage. To show the product prices, follow the steps below:

1
Choose Discount Table under Customize Design.
2
Check  Display product price.
3
Click  Save.

Common Questions

Can I set different texts and languages on the discount table for each product page?
Unfortunately, the volume discount table settings are implemented for the entire store. Whatever language or texts you have set for the volume discount table will be applied to all products that will use it.

Can I show the discount table from the collections page?
No. The discount table only shows up on the product pages upon trigger by offers with the specified product and not by collections.

Why can't I see the discount table I created for one product?
The reason for this issue is that you have created multiple offers for a single product, which is strongly discouraged. The app detects it when multiple offers are created and will only prioritize the offer that is at the top of the list.

Related Articles