> ## Documentation Index > Fetch the complete documentation index at: https://discountkit.app/llms.txt > Use this file to discover all available pages before exploring further. # 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. Product card with red '20% OFF' badge in top-right corner ```liquid theme={null} {% 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 %}
{% if percent_off %} {{ percent_off | round }}% OFF {% else %} {{ cents_off | divided_by: 100.0 | money }} OFF {% endif %}
{% 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`: ```liquid theme={null} {% 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 %}
{{ best_discount.discount_title }} Save {{ percent_off | round }}%
{% endif %} ``` *** ## Sales Badges ### Simple Percentage Badge Product card with red '20% OFF' badge in top-right corner ```liquid theme={null} {% assign discounts = product.metafields.app--9549316097--discount_kit.discounts.value %} {% if discounts.size > 0 %} {% assign discount = discounts | first %}
{{ discount.maximum_reward_value | round }}% OFF
{% endif %} ``` *** ## Pricing Display ### Crossed-Out Original Price Product pricing showing original price crossed out in gray and sale price in red ```liquid theme={null} {% 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 %}
{{ product.price | money }} {{ discounted_price | money }}
{% else %} {{ product.price | money }} {% endif %} {% else %} {{ product.price | money }} {% endif %} ``` *** ## Volume Pricing Table Product with info icon next to title and volume pricing popup showing quantity tiers and discounted prices ```liquid theme={null} {% 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 %}

{{ discount.discount_title }}

{% 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 %} {% endfor %}
Quantity Discount Price Each
{{ tier_qty }}+ {{ tier_discount_percent | round }}% off {{ tier_price | money }}
{% endif %} {% endfor %} ``` *** ## Discount Codes Discount Kit Live surfaces both **automatic** discounts (applied at checkout when conditions are met) and **code-based** discounts (the shopper enters a code). The `method` and `code` fields let you render the right UI for each. ### Render a Code Chip with Copy-to-Clipboard For code-based discounts, show the code with a copy button instead of an "applied automatically" badge. ```liquid theme={null} {% assign discounts = product.metafields.app--9549316097--discount_kit.discounts.value %} {% for discount in discounts %} {% if discount.method == 'code' and discount.code != blank %}
{{ discount.discount_title }} Use code:
{% endif %} {% endfor %} ``` Use `