# Subscriptions in the account

> Let customers see and manage their subscriptions on your site. Covers the subscription list, the subscription page with its products, status labels, and the forms that pause, resume and cancel a subscription.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/accounts/subscription-listing  
URL: https://www.smootify.io/docs/build/account-subscriptions  
Updated: 2026-10-10

Customers who buy by subscription manage it from their account on your site: they see what they get and when, and they pause, resume or cancel it without writing to you. This page builds the subscription list, the page of a single subscription, and the three forms that change it.

> [!NOTE]
> Customer accounts must be set up first: see [Customer accounts](https://www.smootify.io/docs/build/account). The subscriptions come from a Shopify subscription app that creates the selling plans: see [Subscriptions](https://www.smootify.io/docs/features/subscriptions).

## How it fits together

What Smootify needs:

- for the list: a `customer-subscriptions` element with one `customer-subscription` inside, the template of each subscription;
- for the subscription page: a page at `/account/subscription` with a `subscription-page` element on it;
- the pause, resume and cancel forms inside `customer-subscription` or `subscription-page`, so they know which subscription they change.

What is up to you:

- which details you show, and the design;
- where the forms go: in each row of the list, on the subscription page, or both.

## 1. The subscription list

1. Add a Custom element with the tag `customer-subscriptions`.
2. Inside it, add a Custom element with the tag `customer-subscription`. Design it as one subscription: Smootify repeats it once per subscription, newest first.
3. Inside it, add the values of step 2, and a link to the subscription page with `subscription="url"`.

```html
<customer-subscriptions>
  <customer-subscription>
    <div subscription="name">#1001</div>
    <div subscription="status">Active</div>
    <div>Next charge: <span subscription="nextBillingDate">1/1/2026</span></div>
    <a href="#" subscription="url">Manage</a>
  </customer-subscription>
  <button data-action="next">Next</button>
</customer-subscriptions>
```

- **How many.** `limit` on `customer-subscriptions` sets the subscriptions per page. Without it, the list shows 5.
- **More subscriptions.** Pagination buttons work as in the order list: Custom elements with the tag `button` and `data-action="previous"`, `"next"` or `"load"`, inside `customer-subscriptions` and outside the row. See [Orders and buy again](https://www.smootify.io/docs/build/orders).
- **No subscriptions.** Show an empty state with `customer-condition="no-subscriptions"` on the same page. It works only on a page that has the list. If the list cannot load, neither `has-subscriptions` nor `no-subscriptions` shows, and a next page that fails to load leaves the subscriptions already on screen.
- **While it loads.** Add `skeleton` to the placeholders you want to shimmer. See [loading](https://www.smootify.io/docs/reference/attributes/loading).

## 2. Subscription values

These work in a row of the list and on the subscription page.

| Attribute | What it shows |
|---|---|
| `subscription="name"` | the name of the order that started it, such as `#1001` |
| `subscription="status"` | the status, such as Active or Paused |
| `subscription="nextBillingDate"` | the date of the next charge |
| `subscription="billingInterval"` | how often it is charged, such as `1 Month` |
| `subscription="createdAt"` | the date it started |
| `subscription="shippingAddress"`, `subscription="billingAddress"` | the addresses, one line under the other |
| `subscription="subtotalPrice"`, `subscription="totalPrice"` | amounts of the order that started it |
| `subscription="note"` | the note |

- **The amounts** (`subtotalPrice`, `shippingPrice`, `totalTax`, `totalRefunded`, `totalPrice`) are those of the order that started the subscription, not of the next charge.
- **Links.** `subscription="url"` links to your subscription page. `subscription="statusUrl"` links to the order that started it, in the customer’s Shopify account, and `subscription="customerUrl"` to their Shopify profile.
- **Status labels.** Without labels, the status shows Shopify’s code with a capital letter only at the start, such as `Active`. For your own words, add the codes as Shopify sends them, such as `ACTIVE`, `PAUSED` or `CANCELLED`, to the `SmootifyStatusLabels` script shown in [Orders and buy again](https://www.smootify.io/docs/build/orders). One script holds the order and subscription labels.

The full list is in [subscription values](https://www.smootify.io/docs/reference/attributes/subscription).

## 3. The subscription page

1. In Webflow, create a page in the `account` folder with the slug `subscription`, so its address is `/account/subscription`. For another address, set it in the option `subscriptionPageUrl`.
2. Add a Custom element with the tag `subscription-page`, and put the subscription values inside it.

The page shows the subscription that `subscription="url"` links to. Opened without it, or for a subscription that is not the customer’s, the page goes to your home page.

**Products.** Inside it, add a Custom element with the tag `subscription-line-item`. Design it as one product: Smootify repeats it once per product of the subscription, and removes the other copies you make.

```html
<subscription-page>
  <div subscription="status">Active</div>
  <subscription-line-item>
    <img line-item="image">
    <div line-item="name">Product</div>
    <div line-item="quantity">1</div>
    <div line-item="price">$0.00</div>
  </subscription-line-item>
</subscription-page>
```

Inside `subscription-line-item`, `line-item` takes `name`, `title`, `variantTitle`, `sku`, `quantity`, `price` and `image` (on an Image). See [subscription line values](https://www.smootify.io/docs/reference/attributes/subscription-line-item).

## 4. Pause, resume and cancel

Each action is a Custom element with a Form Block inside it, and a Form Button in the Form:

- `subscription-pause` pauses the subscription;
- `subscription-activate` resumes a paused subscription;
- `subscription-cancel` cancels it.

Put them inside `subscription-page`, or inside `customer-subscription` to act from the list.

```html
<subscription-pause>
  <div class="w-form">
    <form><input type="submit" value="Pause" data-wait="Please wait…"></form>
    <div class="w-form-done"><div>Paused</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </div>
</subscription-pause>
<subscription-activate>
  <div class="w-form">
    <form><input type="submit" value="Resume" data-wait="Please wait…"></form>
    <div class="w-form-done"><div>Resumed</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </div>
</subscription-activate>
<subscription-cancel>
  <div class="w-form">
    <form><input type="submit" value="Cancel subscription" data-wait="Please wait…"></form>
    <div class="w-form-done"><div>Cancelled</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </div>
</subscription-cancel>
```

Smootify keeps only the forms that fit the subscription’s status, and removes the others:

| Status | Forms that stay | Forms removed |
|---|---|---|
| `ACTIVE` | `subscription-pause`, `subscription-cancel` | `subscription-activate` |
| `PAUSED` | `subscription-activate`, `subscription-cancel` | `subscription-pause` |
| `CANCELLED` | none | all three |
| `EXPIRED` | none | all three |

- **After the change**, the page reloads and shows the new status. If Shopify refuses the change, its message shows in the form’s Error message.
- **A second step.** Cancelling takes one click. To ask the customer to confirm, put the cancel form in a popover opened by a first button.

## Before you publish

> [!STUCK]
> - **The subscription page sends you to the home page.** It was opened without a subscription in its address. Open it from a `subscription="url"` link, logged in.
> - **The pause or cancel form is missing.** The subscription's status does not allow it, such as a cancelled subscription.
> - **The totals do not match the next charge.** They are the amounts of the order that started the subscription.
> - **The status shows `Active` in English.** Add the subscription codes to `SmootifyStatusLabels`.
> - **The products you designed disappear.** Only the first `subscription-line-item` is the template. Design one; Smootify repeats it.

## Coming from 1.x

- The amounts showed 0 in 1.x. 2.0 shows the amounts of the order that started the subscription.
- `subscription="canceledAt"` is not read.
- The rows no longer shimmer on their own while loading. Add `skeleton` to the placeholders you want.