> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Show recurring payments in the cart

> Show plan names, first payments, and the recurring total on cart lines for selling plan products

<Info>
  These blocks read Shopify's `selling_plan_allocation` on cart lines, so they work in any theme that renders the cart in Liquid, with or without the Methods app block on the page.
</Info>

When you sell memberships or subscriptions, the cart can show each line's plan name, first payment, and recurring payment, plus the total recurring amount across the cart. Customers then see what they pay today and what they pay on each renewal.

***

## Add the blocks to your cart template

<Steps>
  <Step title="Open the cart template">
    On <Icon icon="shopify" iconType="solid" /> **[Themes](https://admin.shopify.com/themes)**, open your theme's **... > Edit code** menu, then open the file that renders cart lines, for example `main-cart-items.liquid`.
  </Step>

  <Step title="Add the recurring total">
    Paste the [total recurring payment](#total-recurring-payment) block below the cart item loop.
  </Step>

  <Step title="Add the plan details">
    Paste the [line item plan details](#line-item-plan-details) block inside the `{% for item in cart.items %}` loop.
  </Step>

  <Step title="Save and test">
    Add a membership or subscription product to the cart and confirm the amounts match the plan.
  </Step>
</Steps>

### Total recurring payment

Sums the recurring price adjustment of every selling plan line in the cart.

```liquid Below the cart item loop theme={null}
{%- assign total_recurring_payment = 0 -%}
{%- for item in cart.items -%}
  {%- if item.selling_plan_allocation and item.selling_plan_allocation.selling_plan -%}
    {%- assign adjustments = item.selling_plan_allocation.selling_plan.price_adjustments -%}
    {%- for adjustment in adjustments -%}
      {%- if adjustment.order_count == null -%}
        {%- assign recurring_payment = adjustment.value | divided_by: 100 -%}
        {%- assign total_recurring_payment = total_recurring_payment | plus: recurring_payment -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endfor -%}

<p>Monthly recurring payment: {{ total_recurring_payment | money }}</p>
```

### Line item plan details

Shows the plan name, first payment, and recurring payment for one cart line.

```liquid Inside the cart item loop theme={null}
{%- if item.selling_plan_allocation and item.selling_plan_allocation.selling_plan -%}
  <div class="cart__item--details">
    <p>Plan: {{ item.selling_plan_allocation.selling_plan.name }}</p>

    {%- assign adjustments = item.selling_plan_allocation.selling_plan.price_adjustments -%}
    {%- for adjustment in adjustments -%}
      {%- if adjustment.order_count == 1 -%}
        <p>First payment: {{ adjustment.value | divided_by: 100 | money }}</p>
      {%- elsif adjustment.order_count == null -%}
        <p>Recurring payment: {{ adjustment.value | divided_by: 100 | money }}</p>
      {%- endif -%}
    {%- endfor -%}
  </div>
{%- endif -%}
```

***

## Considerations

* **Placement.** The plan details block must sit inside the `{% for item in cart.items %}` loop.
* **Formatting.** If prices look 100 times too small or too large, remove the `| divided_by: 100` filter. Whether it's needed depends on how your theme formats prices.
* **Non-plan products.** Lines without a selling plan are skipped.
* **Labels.** Keep the labels plain, such as "First payment" and "Recurring payment", so customers and screen readers can tell the charges apart.

***

## Related documentation

<CardGroup cols={2}>
  <Card title="Plans setup" icon="id-card" href="/documentation/methods/membership/plans-setup">
    Create the membership plans and the plan products customers subscribe to.
  </Card>

  <Card title="Product setup" icon="tag" href="/documentation/methods/membership/product-setup">
    Turn on the Membership method and set credit costs on products.
  </Card>
</CardGroup>