Discounts can be applied at the line item level, or the cart, checkout, or order level. This means that they apply directly to specific line items, or apply to the cart or order as a whole. Discounts can be applied in the following ways:

- [As automatic discounts](https://help.shopify.com/manual/discounts/automatic-discounts)
- [Using manual discount codes](https://help.shopify.com/manual/discounts/managing-discount-codes)
- [Using Shopify Scripts](https://help.shopify.com/manual/checkout-settings/script-editor)

In this tutorial, you'll learn how to display discounts in your theme.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/pricing-payments/discounts/discounts-no-highlighting-8fc9ca5446b9cda28ecde55e36d056b275ef2991ad86478cef90c7800dcd71c2.png" class="lazyload" alt="Cart page with a shirt added to the cart. A discount applies directly to the shirt line item in the cart, while another discount applies to the cart as a whole." width="1165" height="555"></figure>

## Requirements

You've created a [cart template](/docs/storefronts/themes/architecture/templates/cart) or a [customers/order template](/docs/storefronts/themes/architecture/templates/customers-order).

## Resources

To display discounts in your theme, you'll use the following:

- [The `discount_application` object](#the-discount_application-object)
- [The `discount_allocation` object](#the-discount_allocation-object)
- [The `line_item` object](#the-line_item-object)

### The `discount_application` object

The [`discount_application`](/docs/api/liquid/objects/discount#discount-application) object registers discounts at the cart, checkout, or order level. Depending on where you're implementing your discount display, you'll access the relevant discount applications through the associated parent object:

- For the [cart](/docs/storefronts/themes/architecture/templates/cart) template:
    - [`cart.discount_applications`](/docs/api/liquid/objects/cart#cart-discount_applications)
    - [`cart.cart_level_discount_applications`](/docs/api/liquid/objects/cart#cart-cart_level_discount_applications)
- For the [customers/order](/docs/storefronts/themes/architecture/templates/customers-order) template:
    - [`order.discount_applications`](/docs/api/liquid/objects/order#order-discount_applications)
    - [`order.cart_level_discount_applications`](/docs/api/liquid/objects/order#order-cart_level_discount_applications)

> Note:
> Manual discount codes can only be applied at the checkout, so they're not available through `cart.discount_applications`.


### The `discount_allocation` object

The [`discount_allocation`](/docs/api/liquid/objects/discount#discount-allocation) object associates a `discount_application` with a line item.

You can access an array of all of the discount allocations associated with a line item using [`line_item.line_level_discount_allocations`](/docs/api/liquid/objects/line_item#line_item-discount_allocations).

### The `line_item` object

To complete the price display, you need to use price and discount attributes of the [`line_item`](/docs/api/liquid/objects/line_item) object, including:

- [`original_price`](/docs/api/liquid/objects/line_item#line_item-original_price)
- [`original_line_price`](/docs/api/liquid/objects/line_item#line_item-original_line_price)
- [`final_price`](/docs/api/liquid/objects/line_item#line_item-final_price)
- [`final_line_price`](/docs/api/liquid/objects/line_item#line_item-final_line_price)
- [`line_level_total_discount`](/docs/api/liquid/objects/line_item#line_item-line_level_total_discount)

## Implementing discount displays

Because discounts can apply to line items or to the cart or order as a whole, you should display discount information in two places:

- [With individual line items](#line-item-discounts)
- [With the total summary](#cart-discounts)

The examples in this tutorial use the [cart template](/docs/storefronts/themes/architecture/templates/cart). However, you can adapt these examples to add discounts to the [customers/order template](/docs/storefronts/themes/architecture/templates/customers-order) by using the [`order` object](/docs/api/liquid/objects/order) where the [`cart` object](/docs/api/liquid/objects/cart) is used.

You can implement the components directly in a Liquid template, or in a section in a JSON template.

## Line item discounts

If a discount applies to specific line items, then it should be displayed with those items. To display discounts with line items, you need to include the following in your display:

- [The line item price](#line-item-price)
- [The line item discount](#line-item-discounts)

### Line item price

If a discount has been applied to a line item, then you should show the original price with a strikethrough, as well as the new discounted price. Each of these can be accessed with the following attributes of the Liquid [`line_item` object](/docs/api/liquid/objects/line_item):

- [`original_price`](/docs/api/liquid/objects/line_item#line_item-original_price)
- [`original_line_price`](/docs/api/liquid/objects/line_item#line_item-original_line_price)
- [`final_price`](/docs/api/liquid/objects/line_item#line_item-final_price)
- [`final_line_price`](/docs/api/liquid/objects/line_item#line_item-final_line_price)

### Line item discounts

If a discount has been applied to a line item, then you should show each discount that's applied, with its associated discount amount, or a total discount amount. Line item-specific discounts can be accessed through the [`line_level_discount_allocations`](/docs/api/liquid/objects/line_item#line_item-line_level_discount_allocations) attribute of the Liquid [`line_item` object](/docs/api/liquid/objects/line_item), and the total line item discount can be accessed through the [`line_level_total_discount`](/docs/api/liquid/objects/line_item#line_item-line_level_total_discount) attribute.

### Example

The following is an example that outputs the price and discounts display:

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% for line_item in cart.items %}
  <!-- line item info -->

  {% if line_item.original_price > line_item.final_price %}
    <s>{{ line_item.original_price | money }}</s>
  {% endif %}

  {{ line_item.final_price | money }})

  {% if line_item.line_level_discount_allocations.size > 0 %}
    Discounts:
    <ul>
      {% for discount_allocation in line_item.line_level_discount_allocations %}
        <li>
          {{ discount_allocation.discount_application.title }}-{{ discount_allocation.amount | money }}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

END_RAW_MD_CONTENT</script>

</div>
</p>


<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/pricing-payments/discounts/line-item-discount-22566259c0df55db0be51515bd1fd14e54aa6a7f101f16c3bc0450b8a8c7c608.png" class="lazyload" alt="Cart page with a shirt added to the cart. A discount applies directly to the shirt line item in the cart." width="2976" height="1531"></figure>

> Tip:
> For another example of displaying line item discounts, you can refer to [Dawn's implementation](https://github.com/Shopify/dawn/blob/main/sections/main-cart-items.liquid).

## Cart discounts

The subtotal is the line item total after line item discounts have applied, and the total is the cart total after cart discounts have applied. If a discount applies to the cart as a whole, then it should display between the subtotal and total.

Cart-level discounts can be accessed through the `cart_level_discount_applications` attribute of the [`cart`](/docs/api/liquid/objects/cart#cart-cart_level_discount_applications) or [`order`](/docs/api/liquid/objects/order#order-cart_level_discount_applications) object.

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
Subtotal: {{ cart.items_subtotal_price | money }}

{% if cart.cart_level_discount_applications.size > 0 %}
  Discounts:

  <ul>
    {% for discount_application in cart.cart_level_discount_applications %}
      <li>
        {{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }}
      </li>
    {% endfor %}
  </ul>
{% endif %}

Total: {{ cart.total_price | money }}

END_RAW_MD_CONTENT</script>

</div>
</p>



<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/pricing-payments/discounts/cart-discount-976070fe43557d2a67faae566d3f8b08b66ad4c35ff1f0424e8cdb98db0c6a62.png" class="lazyload" alt="Cart page with a bottle of canola oil added to the cart. A 10% discount applies to the cart as a whole." width="2988" height="1745"></figure>

> Tip:
> For another example of displaying cart discounts, you can refer to [Dawn's implementation](https://github.com/Shopify/dawn/blob/main/sections/main-cart-footer.liquid).