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

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

Inside subscription-line-item, line-item takes name, title, variantTitle, sku, quantity, price and image (on an Image). See subscription line values.

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.

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

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.