Subscriptions in the account

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.

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".

<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.
• 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.

2. Subscription values

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

• 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. One script holds the order and subscription labels.

The full list is in subscription values.

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.

<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.

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.

<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:

• 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