Examples

Copy-paste implementations for common use cases

Quick Start: Best Discount Badge

The simplest way to show a discount badge using the max_reward_percent or max_reward_cents scalar metafields.

Preview

Code

{% assign percent_off = product.metafields.app--9549316097--discount_kit.max_reward_percent.value %}
{% assign cents_off = product.metafields.app--9549316097--discount_kit.max_reward_cents.value %}

{% if percent_off or cents_off %}
  <div style="
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
  ">
    {% if percent_off %}
      {{ percent_off | round }}% OFF
    {% else %}
      {{ cents_off | divided_by: 100.0 | money }} OFF
    {% endif %}
  </div>
{% endif %}

This approach is simpler than parsing the full discounts array and automatically shows the best available discount.

---

Best Discount with Title

Show both the discount value and title using max_reward_discount:

Code

{% assign percent_off = product.metafields.app--9549316097--discount_kit.max_reward_percent.value %}
{% assign best_discount = product.metafields.app--9549316097--discount_kit.max_reward_discount.value %}

{% if percent_off and best_discount %}
  <div class="promo-banner">
    <strong>{{ best_discount.discount_title }}</strong>
    <span>Save {{ percent_off | round }}%</span>
  </div>
{% endif %}

---

Sales Badges

Simple Percentage Badge

Preview

Code

{% assign discounts = product.metafields.app--9549316097--discount_kit.discounts.value %}

{% if discounts.size > 0 %}
  {% assign discount = discounts | first %}
  <div style="
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
  ">
    {{ discount.maximum_reward_value | round }}% OFF
  </div>
{% endif %}

---

Pricing Display

Crossed-Out Original Price

Preview

Code

{% assign discounts = product.metafields.app--9549316097--discount_kit.discounts.value %}

{% if discounts.size > 0 %}
  {% assign discount = discounts | first %}

  {% if discount.reward_type == 'PERCENTAGE' %}
    {% assign discount_percent = discount.maximum_reward_value %}
    {% assign discount_multiplier = 100 | minus: discount_percent | times: 0.01 %}
    {% assign discounted_price = product.price | times: discount_multiplier %}

    <div class="pricing">
      <span class="original-price" style="text-decoration: line-through; opacity: 0.6;">
        {{ product.price | money }}
      </span>
      <span class="sale-price" style="color: #e74c3c; font-weight: bold;">
        {{ discounted_price | money }}
      </span>
    </div>
  {% else %}
    <span class="regular-price">{{ product.price | money }}</span>
  {% endif %}
{% else %}
  <span class="regular-price">{{ product.price | money }}</span>
{% endif %}

---

Volume Pricing Table

Preview

Code

{% assign discounts = product.metafields.app--9549316097--discount_kit.discounts.value %}

{% for discount in discounts %}
  {% if discount.discount_type == 'PRODUCT_VOLUME' and discount.config %}
    {% assign config = discount.config.value %}

    <div class="volume-table">
      <h4>{{ discount.discount_title }}</h4>
      <table>
        <thead>
          <tr>
            <th>Quantity</th>
            <th>Discount</th>
            <th>Price Each</th>
          </tr>
        </thead>
        <tbody>
          {% for tier in config.tiers %}
            {% assign tier_qty = tier.buys.value %}
            {% assign tier_discount_percent = tier.gets.value %}
            {% assign discount_multiplier = 100 | minus: tier_discount_percent | divided_by: 100.0 %}
            {% assign tier_price = product.price | times: discount_multiplier %}

            <tr>
              <td>{{ tier_qty }}+</td>
              <td>{{ tier_discount_percent | round }}% off</td>
              <td>{{ tier_price | money }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
{% endfor %}

---

Collection Banners

Simple Collection Promo

Preview

Code

{% assign discounts = collection.metafields.app--9549316097--discount_kit.discounts.value %}

{% if discounts.size > 0 %}
  {% assign promo = discounts | first %}

  <div style="
    background: #e74c3c;
    color: white;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  ">
    <h2 style="
      font-size: 1.8rem;
      font-weight: 700;
      margin: 0;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    ">{{ promo.discount_title }}</h2>
    <p style="
      font-size: 1.6rem;
      margin: 0;
      line-height: 1;
    ">Save up to {{ promo.maximum_reward_value | round }}% on this collection!</p>
  </div>
{% endif %}

---

Next Steps

Data reference

Complete field documentation

Introduction

Learn about Discount Kit Live