[Shop Pay Installments](https://help.shopify.com/manual/payments/shop-pay-installments) allows customers to pay for orders between 50 USD and 3,000 USD in 4 interest-free installments.

The Shop Pay Installments banner lets customers know that they have the option to pay in installments. It includes a **Learn more** link that opens a pop-up which shows how much the installment amount is, more information about installments, and any required disclosures.

<table>
  <tbody>
    <tr>
      <td style="border: none; vertical-align: middle;">
        <img src="/assets/themes/pricing-payments/installments/spi-banner-product.png" alt="Shop Pay Installments banner on the product page">
      </td>
      <td style="border: none;">
        <img src="/assets/themes/pricing-payments/installments/spi-banner-cart.png" alt="Shop Pay Installments banner on the cart page">
      </td>
    </tr>
    <tr>
      <td colspan="2" style="border: none;">
        <img src="/assets/themes/pricing-payments/installments/spi-banner-pop-up-blur.png" alt="Shop Pay Installments banner 'Learn more' pop-up">
      </td>
    </tr>
  </tbody>
</table>

In this tutorial, you'll learn how to add a Shop Pay Installments banner to the following locations:

- [The product form](#add-the-banner-to-the-product-form)
- [The cart form](#add-the-banner-to-the-cart-form)

## Requirements

Depending on where you want to add the Shop Pay Installments banner, you need to do one, or both, of the following:

- Add a [product form](/docs/api/liquid/tags/form#form-product) to a template. A product form can be added to any template that can access the [`product` object](/docs/api/liquid/objects/product).
- Add a [cart form](/docs/api/liquid/tags/form#form-cart) to a template. A cart form can be added to any template that can access the [`cart` object](/docs/api/liquid/objects/cart).

## Resources

To implement this feature, you'll use the following:

- The [`form`](/docs/api/liquid/objects/form) object
- The [`payment_terms`](/docs/api/liquid/filters/payment_terms) filter

> Tip:
> The `payment_terms` filter requires the `form` object from the Liquid [product form](/docs/api/liquid/tags/form#form-product) or [cart form](/docs/api/liquid/tags/form#form-cart). If your theme doesn't use these forms, then you can convert an HTML form to Liquid by [specifying any HTML attributes](/docs/api/liquid/tags/form#form-html-attributes) you need on the form.

## Implementing a Shop Pay Installments banner

The Shop Pay Installments banner can be added to the following locations:

- [The product form](#add-the-banner-to-the-product-form)
- [The cart form](#add-the-banner-to-the-cart-form)

> Note:
> The Shop Pay Installments banner appears only if Shop Pay Installments is enabled in the merchant's store.

### Add the banner to the product form

To add a Shop Pay installments banner to the [product form](/docs/api/liquid/tags/form#form-product), you need to add a reference to the [`form` object](/docs/api/liquid/objects/form), with the [`payment_terms`](/docs/api/liquid/filters/payment_terms) filter applied, between the opening and closing `form` tags:

```liquid

{% form 'product', product %}
  <!-- product price -->
  {{ form | payment_terms }}
  ...
{% endform %}

```

The reference should be below the product price so that price and payment information is grouped together.

> Note:
> The installments banner automatically updates based on the currently selected variant. The currently selected variant is noted by a form input with an attribute of `name="id"`.

If your theme doesn't include the price inside the product form, then you can create a second instance of the product form near the price display to host the installments banner. Inside this second form, you need to include a hidden `<input>` that notes the currently selected variant. This hidden input needs to be updated as the variant selection changes.

```liquid

<!-- product price -->

{% form 'product', product %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{ form | payment_terms }}
{% endform %}

```

The `payment_terms` filter can be used anywhere that you can use a product form. It's commonly used in the [product template](/docs/storefronts/themes/architecture/templates/product), or a section inside of the template.

### Add the banner to the cart form

To add a Shop Pay installments banner to the [cart form](/docs/api/liquid/tags/form#form-cart), you need to add a reference to the [`form` object](/docs/api/liquid/objects/form), with the [`payment_terms`](/docs/api/liquid/filters/payment_terms) filter applied, between the opening and closing `form` tags:

```liquid

{% form 'cart', cart %}
  <!-- cart subtotal -->
  {{ form | payment_terms }}
  ...
{% endform %}

```

The reference should be below the cart subtotal price so that price and payment information is grouped together.

The `payment_terms` filter can be used anywhere that you can use a cart form. It's commonly used in the [cart template](/docs/storefronts/themes/architecture/templates/cart), or a section inside of the template.

#### Updating the banner with cart total changes

To stay updated with the cart total, the banner parses for the subtotal price based on the attribute `data-cart-subtotal`. Most free Shopify themes have this attribute on their subtotal display by default, so the banner will update automatically. If your banner doesn't update automatically, then you need to add the `data-cart-subtotal` attribute to your subtotal display.

<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>
</div>

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

<script type="text/plain" data-language="liquid">

<span data-cart-subtotal>{{ cart.total_price | money }}</span>

</script>

</div>
</p>