> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developer.ordergroove.com/lifecycle/v0/inactive-subscriptions/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developer.ordergroove.com/_mcp/server.

# Inactive Subscriptions Section

This article contains information about the Inactive Subscriptions Section. The Inactive Subscriptions Section can be found in the **inactive-subscriptions.liquid** file. For an overview of all elements, take a look at [Subscription Manager Components & Containers](/lifecycle/v0/overview).

---

## Overview

The Inactive Subscriptions Section can be divided into 2 parts:

**Header**

**Products**

## Header

```liquid
<section id="og-inactive-subscriptions">
    {% for subscription in subscriptions | reject('live') %} {% if index === 0 %}
  </h1>
```

## Products

```liquid
<div class="og-inactive-subscription">
    {% set product = products | find(id=subscription.product) %} {% if product %}
    <div class="og-product">...</div>{# /og-product #} {% endif %}
  </div>
  {# /og-inactive-subscription #} {% endfor %}
</section>{# /og-inactive-subscriptions #}
```

---

## Individual Products

Each individual product is wrapped with:

```liquid
<div class="og-product">
...
</div>{# /og-product #}
```

And each product is broken out to:

**Product Image**

**Controls Container**

## Product Image

```liquid
<div class="og-product-image-container">
  <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
</div>
```

## Controls Container

```liquid
  <div class="og-name-price-controls-container">
    <div class="og-description-and-controls">
      <div class="og-product-description">
        <h3 class="og-product-name"><a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
        </h3>
      <div class="og-subscription-quantity">{{ 'product_read_only_quantity' | t }}</div>
    </div>
  </div>
  <div class="og-inactive-subscription-actions">
    {% include 'reactivate-subscription' %}
    <div class="og-cancelled-text-date">
      <span class="og-cancelled-text">{{ 'subscription_inactive_cancelled_on' | t }}</span>
      <span class="og-cancelled-date">{{ subscription.cancelled | date }}</span>
    </div>
  </div>{# /og-inactive-subscription-actions #}
```

Within the Controls Container, the Description Controls are broken into 2 parts:

**Product Description**

**Reactivate Subscription**

## Product Description — Name & Quantity

```liquid
  <div class="og-description-and-controls">
    <div class="og-product-description">
      <h3 class="og-product-name">
        <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
      </h3>
      <div class="og-subscription-quantity">{{ 'product_read_only_quantity' | t }}</div>
    </div>
  </div>
```

## Reactivate Subscription

```liquid
  <div class="og-inactive-subscription-actions">
    {% include 'reactivate-subscription' %}
    <div class="og-cancelled-text-date">
      <span class="og-cancelled-text">{{ 'subscription_inactive_cancelled_on' | t }}</span>
      <span class="og-cancelled-date">{{ subscription.cancelled | date }}</span>
    </div>
  </div>{# /og-inactive-subscription-actions #}
```

## Reactivate Subscription Modal

The code for this modal is found in the `reactivate-subscription.liquid` file:

```liquid
<div class="og-reactivate-subscription-button">
<button
class="og-button"
type="button"
@click={{ 'show_closest_modal' | js }}
>
{{ 'subscription_reactivate_button' | t }}
</button>

<dialog aria-hidden="true">
<form 
action="{{ 'reactivate_subscription' | action }}" 
name="og_subscription_reactivate"
@success={{ 'close_closest_modal' | js }}
@reset={{ 'close_closest_modal' | js }}
>
<div class="og-dialog-header">
<h5 class="og-dialog-title">{{ 'modal_subscription_reactivate_header' | t }}</h5>
<button type="reset" aria-label="{{ 'modal_close' | t }}" class="og-button og-button-close">{{ 'modal_close' | t }}</button>
</div>{# /og-dialog-header #}

<div class="og-dialog-body">
{{ 'modal_subscription_reactivate_body' | t }}
</div>{# /og-dialog-body #}

<div class="og-dialog-footer">
<input type="hidden" name="subscription" value="{{ subscription.public_id }}"/>
<input type="hidden" name="every" value="{{ subscription.every }}"/>
<input type="hidden" name="every_period" value="{{ subscription.every_period }}"/>
<button name="reactivate_subscription" type="submit" class="og-button">
{{ 'modal_reactivate_save' | t }}
</button>
</div>{# /og-dialog-footer #}

</form>
</dialog>
</div>{# /og-reactivate-subscription-button #}
```

> APIs, SDKs, and guides for building subscription commerce with Ordergroove.