Articles on: Pareto - Quantity Breaks

Show Quantity Breaks Table on Collection Page

Show your volume discounts right on collection pages as a discount badge, a countdown timer, a crossed-out price, and a tier table, so customers see the savings before they open a product.


⚠️ This feature is available on the Professional plan.


In this article


What this feature does

When enabled, the app can add up to four elements to each product card on your collection pages:

  • Discount badge: a badge on the product image, for example "Save 20%".
  • Countdown timer: a timer on the product image that counts down to the end of the campaign.
  • Crossed-out price: the theme's price is replaced with the original price crossed out and the best tier price next to it.
  • Tier table: a short notification line under the product that reveals the full quantity breaks table when customers hover over it.

Each element has its own toggle, so you can use one of them or all four. They only appear on products that belong to a quantity break campaign that is currently running.


Before you start

Make sure that:

  • You are on the Professional plan
  • At least one quantity break campaign is On and within its schedule
  • You have permission to edit theme code (needed once, for the placeholder code below)
  • For the countdown timer: the campaign has its countdown timer turned on in Launch time


Turn on the feature

  1. From your Shopify admin, go to Apps and open P: Quantity Breaks.
  2. Go to Boost conversion.
  3. Find Show on collection page and click Customize.
  4. Tick Show discount on collection page.
  5. Set up the elements you want (see the sections below), check the Collection page preview on the right, then click Save.


Add the code to your theme

The app renders every collection page element into a small placeholder inside each product card. If nothing appears on your collection page after saving, add the placeholder to your theme. This is a one-time step.

Step 1: Open the theme code editor

  1. Go to Online Store → Themes.
  2. Find your active theme and click ….
  3. Select Edit code.

Step 2: Choose the correct file

Depending on your theme, open one of the following files:

  • card-product.liquid (recommended for Online Store 2.0 themes)
  • product-card.liquid (older themes)
  • collection.liquid

Step 3: Paste the code

Paste the following code exactly at the position where you want the tier table to appear, usually below the price or product title. The badge, countdown timer, and crossed-out price find their own place on the card from this anchor.

{% assign result_collection = '' %}
{% for collection in product.collections %}
  {% if forloop.first == false %}
    {% assign result_collection = result_collection | append: ',' %}
  {% endif %}
  {% assign result_collection = result_collection | append: collection.id %}
{% endfor %}
<div
  class="omg-discount-notification"
  data-product-id="{{ product.id }}"
  data-collections="{{ result_collection }}"
  data-product-info='
    {
      "id": {{ product.id | json | escape }},
      "title": {{ product.title | json | escape }},
      "handle": {{ product.handle | json | escape }},
      "tags": {{ product.tags | json | escape }},
      "vendor": {{ product.vendor | json | escape }},
      "type": {{ product.type | json | escape }},
      "variants": [
        {% for variant in product.variants %}
        {
          "id": {{ variant.id | json | escape }},
          "title": {{ variant.title | json | escape }},
          "price": {{ variant.price | json | escape }},
          "available": {{ variant.available | json | escape }},
          "sku": {{ variant.sku | json | escape }}
        }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    }
  '
></div>


What this code does

  • Identifies the product and the collections it belongs to
  • Passes the product's variants, tags, vendor, and type so the app can match it against your campaign rules
  • Creates the placeholder where the tier table is rendered and from which the badge, countdown timer, and crossed-out price locate the product image and price

This code does not affect checkout logic or pricing rules.


Discount badge

Open the Discount badge section.


Show badge on collection badge

  1. Tick Show badge on collection images.
  2. Enter the Badge text. The default is "Save {{max_discount_percent}}". Click the {...} button to insert variables: {{max_discount_percent}}, {{min_discount_percent}}, {{campaign_name}}, {{min_value}}, {{total_save}}, and {{discounted_unit_price}}.
  3. Pick the Text color and Background color.
  4. Choose a Shape: Pill, Circle, Corner, Banner, Rosette, Shield, Label, or Price Tag. Pill adds a Corner radius slider. Corner can only sit in the four corners of the image, and Banner runs along the top or bottom edge.
  5. Choose a Position on the image.
  6. Drag the Size slider (44 to 132 px, default 76 px).


The collection badge is configured independently from the badge in each campaign's Display settings, so you can style them differently. The values in the badge text (discount, campaign name) come from the quantity break campaign that wins for that product.


Countdown timer

Show contdown timer overlay on collection page

Open the Countdown timer section.

  1. Tick Show countdown on collection images.
  2. Enter the Notice. The default is "Sales end in {{timer}}". The {{timer}} chip is the live clock in hours:minutes:seconds. With the Banner and Pill shapes, the text and the clock sit on one line. With Circle and Corner, only the clock sits inside the shape and the notice shows as a small label next to it.
  3. Pick the Text color and Background color. These are independent from the countdown colors set in each campaign.
  4. Choose a Shape: Banner, Pill, Corner, or Circle.
  5. Choose a Position and drag the Size slider.


The time left comes from each campaign's own countdown timer in Launch time. The collection timer only shows on a product when the winning campaign has its countdown timer turned on. If a product belongs to several campaigns with a timer (quantity breaks, Order discount, Buy X Get Y, Bundle, Frequently bought together, or Build your own bundle), the card shows the timer with the most time left. Add-ons campaigns are not shown on collection cards.
The badge and the countdown timer are independent. If you place both at the same position, the badge sits on top of the timer.


Crossed-out price

Show crossed-out price on collection page

In the Replace theme's price card:

  1. Tick Enable price replacement.
  2. Enter the CSS selector of the price element in your theme's product card, for example .price-item.price-item--regular in Dawn. The selector is different for each theme. If you are not sure, contact us with your theme name.
  3. Click Save.


On the collection page, the theme's price is replaced with the original price crossed out and the price at the highest tier (the biggest discount) next to it. If the selector does not match anything, the theme's price stays unchanged.


Tier table

Show tier table popover on collection page

In the Table settings card:

  1. Tick Show table discount.
  2. Enter the Notification text, for example "Buy more, save more". This line appears under the product, and the table opens when the customer hovers over it. This field cannot be empty when saving.
  3. Tick the columns to show: Quantity, Discount per product, Price per product, and Total Amount. Each column has a Table heading and a Table content. Click the {...} button next to Table content to insert variables:
    • Quantity: {{min_quantity}}, {{max_quantity}}, {{tier_index}}
    • Discount per product: {{discount_percent}}, {{discount_amount}}
    • Price per product: {{discounted_price}}, {{discount_percent}}
    • Total Amount: {{tier_total_price}}, {{discount_percent}}
  5. In Font settings, set the Text note size, Text size, and Border size.
  6. In Color settings, pick the Background color, Text color, and Border color.


The older %s, %t, %d, and %p codes still work if you set them up before.


How the display behaves

  • All four elements appear only on products in a quantity break campaign that is On and currently running. Campaigns that are scheduled for later or have already ended show nothing.
  • If a product belongs to several quantity break campaigns, the badge, crossed-out price, and table follow the campaign that is higher in Collection Priority.
  • The elements re-render automatically when customers sort, filter, or load more products on the collection page.
  • The badge text and the countdown notice can be translated with AI translation in Boost conversion.
  • The table uses the same price calculation as the cart page table, so it may differ from the product page widget if you show tax or compare-at prices there.
  • The collection table is separate from Show on cart page. Changing one does not affect the other.


Troubleshooting

If nothing appears on the collection page:

  • Confirm Show discount on collection page is ticked and saved
  • Confirm the placeholder code is placed inside the product card loop
  • Make sure the product object (or card_product in Online Store 2.0 themes) is available in the file you edited
  • Clear the theme cache and refresh the page
  • Re-save your quantity break campaign

If only some elements are missing:

  • Badge or countdown timer missing while the table shows: the app could not find the product image inside the card. Contact support with your theme name.
  • Countdown timer missing: the winning campaign does not have its countdown timer turned on in Launch time.
  • Crossed-out price not changing: the CSS selector does not match the price element in your theme.

If your theme is heavily customized, contact support.


Need help

If you are unsure where to paste the code or the elements do not render correctly:

  • Contact support from App configuration
  • Include your theme name and store URL for faster assistance

Updated on: 06/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!