Customize the Quantity Break Display

Custom Pricing allows you to customize the appearance of the quantity break grid and cart page banner message to better match your store. Custom Pricing offers six premade grid templates, with customizable language settings, colors, margins, padding, and more. You can even add your own custom CSS for complete control.

This article outlines the customizations you can make in the Quantity Breaks Display settings.

Quantity break grid style (template)

The Quantity Break Grid Style settings allow you to choose from six premade grid templates or enter code for a custom grid or message.

To select the style of your quantity break grid, please follow the steps below.

1. In Custom Pricing, navigate to Quantity Break Display.
2. In the Quantity Break Grid Style section, expand the dropdown menu under Select a grid style.

   

3. Select a grid style.

   Note: Selecting Custom Grid or Message allows you to enter custom html markup for your quantity break grid, customize an existing template, or display a custom message instead of a grid. Visit W3 Schools - HTML Tables for more information on how to customize HTML tables.

   

4. Click Save.

Display language

To customize the language that appears in your quantity break grid, please follow the steps below.

1. In Custom Pricing, navigate to Quantity Breaks Display.
2. In the Display Language section, enter your desired text in the relevant fields.

   Note: The language fields that appear in your grid are dependent on your grid style. Certain fields may not be relevant to your grid style.

   

3. Click Save.

Quantity break grid (appearance)

The Quantity Break Grid settings allow you to choose specific colors for your text, borders, backgrounds, and more.

To customize your quantity break grid appearance, please follow the steps below.

1. In Custom Pricing, navigate to Quantity Break Display.
2. In the Quantity Break Grid section, enable or disable the following settings:

   

   1. Display base price and quantity - Displays or removes the first row of your quantity break grid that displays the cost of one item.
   2. Override standard grid - Allows you to access and customize the grid style settings below.
   3. Bold Header - Makes the font in the grid headers bold.
   4. Grid Borders - Adds a visible border to the grid.
3. Click in each of the following fields to select your preferred colours for the following elements:

   

   1. Header background
   2. Primary background
   3. Alternate background
   4. Header Font Color
   5. Standard Font Color
4. Enter a number to increase or decrease the size of the following elements:
   1. Grid Font Size
   2. Padding In Cells
   3. Margin Around Grid
5. Enter any custom CSS in the Additional CSS field.
6. Click Save.

Cart language

The quantity break Cart Language settings allow you to customize the banner and text that displays your customer’s savings in the cart page.

To customize the Cart Language settings, please follow the steps below.

1. In Custom Pricing, navigate to Quantity Break Display.
2. In the Cart Language section, enter your preferred language in the following fields:
   1. Before Savings Amount
   2. After Savings Amount
3. Enter a number for your Savings Font Size.
4. Click in the following color fields to choose your preferred colors:
   1. Savings Font Color
   2. Savings Background
   3. Color Savings Border Color
5. Enter a number in the following fields to increase or decrease the size:
   1. Savings Margin
   2. Savings Padding
6. Enter any custom CSS in the Additional CSS field.
7. Click Save.