# 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)  
URL: https://www.smootify.io/docs/astro/build/account-subscriptions  
Updated: 2026-10-21

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/astro/build/account). The subscriptions come from a Shopify subscription app that creates the selling plans: see [Subscriptions](https://www.smootify.io/docs/astro/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 `customer-subscriptions` element.
2. Inside it, add a `customer-subscription` element. 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: `<button>` elements with `data-action="previous"`, `"next"` or `"load"`, inside `customer-subscriptions` and outside the row. See [Orders and buy again](https://www.smootify.io/docs/astro/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/astro/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/astro/build/orders). One script holds the order and subscription labels.

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

## 3. The subscription page

1. Create the page `src/pages/account/subscription.astro`, so its address is `/account/subscription`. For another address, set it in the option `subscriptionPageUrl`.
2. Add a `subscription-page` element, 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 `subscription-line-item` element. 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" alt="">
    <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 `img`). See [subscription line values](https://www.smootify.io/docs/astro/reference/attributes/subscription-line-item).

## 4. Pause, resume and cancel

Each action is an element with a `<form>` inside it, and a submit 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>
  <form><button type="submit"><span data-state="default">Pause</span><span data-state="loading">Please wait…</span></button></form>
  <div form-done hidden>Paused</div>
  <div form-fail hidden>Something went wrong</div>
</subscription-pause>
<subscription-activate>
  <form><button type="submit"><span data-state="default">Resume</span><span data-state="loading">Please wait…</span></button></form>
  <div form-done hidden>Resumed</div>
  <div form-fail hidden>Something went wrong</div>
</subscription-activate>
<subscription-cancel>
  <form><button type="submit"><span data-state="default">Cancel subscription</span><span data-state="loading">Please wait…</span></button></form>
  <div form-done hidden>Cancelled</div>
  <div form-fail hidden>Something went wrong</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 `form-fail`.
- **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.