Show Quantity Breaks Table on Collection Page

The Show on collection page feature allows you to display a quantity breaks table directly on your collection pages. This helps customers quickly understand volume discounts before visiting the product page, encouraging larger order sizes.

⚠️ This feature is available on the Professional plan.

What this feature does

When enabled, a quantity breaks table appears on supported collection pages, showing:

• Quantity ranges (for example: 10-19, 20-49, 50+)
• Discount per product
• Total or discounted price (depending on your settings)

This gives customers early visibility into bulk savings and reduces friction in decision-making.

Before you start

Make sure that:

• You are on the Professional plan
• Quantity break rules are already created
• Your theme supports collection product cards (Online Store 2.0 recommended)
• You have permission to edit theme code

Enable from the app

1. From your Shopify admin, go to Apps.
2. Open P: Quantity Breaks.
3. Go to Boost conversion.
4. Find Show on collection page.
5. Click Customize.
6. Enable the feature and save.

Some themes require manual installation to define where the table is rendered.

Add code to your collection page (Required for some themes)

If the table does not appear automatically, you need to manually add a placeholder code to your theme.

Step 1: Open 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:

• collection.liquid
• card-product.liquid
• product-card.liquid (older themes)

For Online Store 2.0 themes, card-product.liquid is recommended.

Step 3: Paste the code

Paste the following code exactly at the position where you want the quantity breaks table to appear, usually below the price or product title.

{% assign result_collection = "" %}
{% for collection in card_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="{{ card_product.id }}"
  data-collections="{{ result_collection }}">
</div>

<script>
if (typeof window.omgProductList === "undefined") {
  window.omgProductList = [];
}

(function () {
  const product = {
    id: {{ card_product.id | json }},
    title: {{ card_product.title | json }},
    handle: {{ card_product.handle | json }},
    variants: [
      {% for variant in card_product.variants %}
      {
        id: {{ variant.id | json }},
        title: {{ variant.title | json }},
        price: {{ variant.price | json }},
        available: {{ variant.available | json }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  };

  const productExists = window.omgProductList.some(p => p.id === product.id);

  if (!productExists) {
    window.omgProductList.push(product);
  }
})();
</script>

What this code does

• Identifies the product and its collections
• Registers product data for discount evaluation
• Creates a placeholder where the quantity breaks table is rendered
• Prevents duplicate product registration on the page

This code does not affect checkout logic or pricing rules.

How the table behaves

• Appears only for products with active quantity break rules
• Automatically hides if no discount applies
• Updates dynamically based on your app configuration

Troubleshooting

If the table does not appear:

• Confirm the code is placed inside the product card loop
• Make sure card_product is available in the file
• Clear theme cache and refresh the page
• Re-save your quantity break rules
• Contact support if your theme is heavily customized

Best practices

• Place the table near the price for maximum visibility
• Avoid showing too many discount tiers on collection pages
• Use this feature for bulk-friendly or high-margin products

Need help?

If you are unsure where to paste the code or the table does not render correctly:

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

Updated on: 22/01/2026