Top

Customize the Quantity Breaks Grid

It's possible to customize the Quantity Breaks grid by entering your own custom HTML and CSS into the text box at the bottom of the Quantity Break Group setup page. To do this, follow these steps:

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select the Quantity Breaks app.

    Select the Quantity Breaks app 

  3. Select Quantity Breaks.

    select quantity breaks 

  4. Select Edit next to the group you would like to customize.

    select edit 

  5. Scroll down to the Custom field.

    scroll down to custom 

  6. Paste this code into the text field.
    <table class='shappify_qb_grid'>
    <thead>
    <tr>
    <th>[qty_text]</th>
    <th>[price_text]</th>
    <th>[percent_text]</th>
    </tr>
    </thead>
    <tbody>
    [per_level]
    <tr>
    <td>[qty] - [qty_max]</td>
    <td>[price] [price_each]</td>
    <td>[percent] [discount_off]</td>
    </tr>
    [end_per_level]
    </tbody>
    </table>

     paste this code

  7. Customize as you would like.

    Note: The above code will produce a grid similar to this (which actually isn't a standard grid layout listed in step 4):

    Quantity Break Group

  8. Select Save.

    select save 

That's it!

Code Legend

Most of the code is HTML, but the text that is wrapped in [ and ] characters are fields that the app will populate depending upon the required quantities for a discount and prices that are set up in a particular group.  Below is a legend pointing out what each of these fields is.

These are the "header" cells at the top of their respective columns:

  • <th>[qty_text]</th> - the "title" cell at the top of the quantity column
  • <th>[price_text]</th> - the "title" cell at the top of the price column
  • <th>[percent_text]</th> - the "title" cell at the top of the percentage discount column

These are the cells that output the specific quantity, price, and discount information for each quantity break level setup in the group:

<td>[qty] - [qty_max]</td> - Outputs the cells containing the quantity information in the quantity column.  [qty] outputs the minimum quantity needed to reach that quantity break, [qty_max] will output the maximum quantity allowable for that tier before the next tier is reached (if applicable).

<td>[price] [price_each]</td> - Outputs the cells containing the pricing information in the price column.  [price] outputs the price per unit, whereas [price_each] outputs the "ea" text.

<td>[percent] [discount_off]</td> - Outputs the cells containing the discount percentage off for the tier in the percentage discount column.  [percent] outputs the percentage discount, and [discount_off] outputs the "off" text.

Each of these fields can be removed for various effects, or even replaced with text altogether.  For example, replacing [price_each] with "per unit" will replace the outputted "ea" text with "per unit".

In order to reorder the columns, you'd just need to rearrange the lines in the code.  Just keep in mind that each column has two lines of code for it; the line for the column header, and the line for every other cell of that same column.

For example, if you wanted to have the "discount" column appear before the "priced" column, you just need to cut and paste the lines that output that column before the code that outputs the price column.  To illustrate, it would need to look like this:

<table class='shappify_qb_grid'>
<thead>
<tr>
<th>[qty_text]</th>
<th>[percent_text]</th>
<th>[price_text]</th>
</tr>
</thead>
<tbody>
[per_level]
<tr>
<td>[qty] - [qty_max]</td>
<td>[percent] [discount_off]</td>
<td>[price] [price_each]</td>
</tr><
[end_per_level]
</tbody>
</table>