# Subscriptions
> Sell products by subscription with the selling plans of a Shopify subscription app, show plan prices, and know what works with boxes and add-ons.
Status: Ready (Smootify 2.0)
URL: https://www.smootify.io/docs/features/subscriptions
Updated: 2026-10-08
A subscription lets the customer receive a product again and again: coffee every two weeks, supplements every month. The plans come from a subscription app on Shopify. Smootify shows them on the product, sells them, and lets customers manage their subscriptions from their account. This page covers the plan picker, prices with plans, and what you can and cannot do with boxes.
> [!NOTE]
> The store needs a subscription app installed on Shopify. The app creates the **selling plans** (such as "Every 2 weeks, 10% off") and attaches them to products. Smootify shows and sells the plans; it does not create them.
## How it fits together
In Shopify, plans come in **groups**: a group such as “Subscribe and save” holds one or more plans, such as “Every 2 weeks” and “Every month”.
- On the product page, `subscription-swatches` lets the customer choose between a one-time purchase and a plan. It is built on a Webflow **Tabs** element: one tab for the one-time purchase, one tab per group, one Radio button per plan.
- The prices on the page follow the chosen plan.
- The chosen plan goes to the cart with the line, and the customer pays at the usual Shopify checkout.
- In the account, the customer sees, pauses, resumes and cancels subscriptions: see [subscriptions in the account](https://www.smootify.io/docs/build/account-subscriptions).
## 1. The plan picker
Inside `smootify-product`, usually in the add-to-cart Form, add a Custom element with the tag `subscription-swatches` and put a Webflow Tabs element inside it.
```html
```
What Smootify does with the Tabs:
- **The first tab and pane** are the one-time purchase. Clicking the tab removes the plan.
- **The second tab and pane** are the template of a group: Smootify copies them once per group and removes any other tab you designed.
- **In the template pane, the first Radio button** is the template of each plan. Its label takes the plan’s name. Use Webflow’s Radio Button element (`w-radio`, with its Field Label): a radio you build from a Div and a custom input is not repeated, and its plan never reaches the cart.
- **Clicking a group’s tab** chooses that group’s first plan, so the price changes at once; the radios then change the plan. When one of the group’s plans is already chosen, the tab keeps it.
- **Prices inside the tabs and radios.** A `smootify-price` inside `subscription-swatches` shows the price of its own option, whatever plan is chosen: in the one-time tab or radio the price without a plan, in a group’s tab the price of the group’s first plan, with the full price struck through. The product’s main price follows the choice.
- `subscription-group="name"` in the tab shows the group’s name.
The picker shows only the plans the selected variant can use, and changes with them. Design these four cases:
| Case | What the picker does |
|---|---|
| A group with several plans | the tab shows the group's name (`subscription-group="name"`), the pane one Radio button per plan; the tab and pane get the class `more-options`, and elements with `group-condition="more-options"` on or inside them show |
| A group with one plan | the tab shows the plan's name instead of the group's, and a click on it chooses the plan; the tab and pane get the class `one-option`, and elements with `group-condition="one-option"` on or inside them show |
| A product sold only by subscription | the one-time tab and its pane are removed; the picker starts on the first plan |
| No plan for the selected variant | `subscription-swatches` is removed when the product or the selected variant has no plan; a group without a plan for the selected variant is dropped |
**Start on a plan.** `auto-select-plan` with a group’s name chooses that group’s first plan when the page opens. Add `auto-select-index` to choose another plan of the group: `1` is the second. See [`subscription-swatches`](https://www.smootify.io/docs/reference/elements/subscription-swatches).
What is up to you: the look of the tabs and radios, the texts, and whether you show the group names at all.
## 2. Prices with plans
Every `smootify-price` of the product follows the chosen plan, except one with `data-ignore="subscription-swatches"`, which keeps the one-time price. Here, a coffee costs $20.00, and its plans take 10% off every 2 weeks and 5% off every month:
| | One-time purchase | A plan chosen ("Every 2 weeks") |
|---|---|---|
| `smootify-price` | $20.00, the one-time price | $18.00, the plan's price; with a discount, its `data-prop="compareAtPrice"` shows the one-time price, $20.00 |
| `smootify-price` in a plan's Radio button | its plan's price | its plan's price ($18.00, $19.00) |
| `smootify-price` with `data-ignore="subscription-swatches"` | $20.00 | $20.00 |
| Shows | `condition="no-subscription"` | `condition="subscription"`; `smootify-product` gets the class `has-subscription` |
The prices and the line under them, as in the second card:
```html
$0.00
$0.00
One-time purchase: $0.00
```
When a plan changes its price after some deliveries, the page shows the first price.
To show the store’s subscription policy, add `policy="subscription"` to a Rich text element: see [policies](https://www.smootify.io/docs/reference/attributes/policy).
## 3. Cart, checkout and account
- In the [cart](https://www.smootify.io/docs/build/cart), a subscription line gets the class `is-subscription`, and the plan’s name is listed with the line’s options (`cart-item="options"`).
- The customer pays at the usual Shopify checkout.
- The customer manages subscriptions in the account: see [subscriptions in the account](https://www.smootify.io/docs/build/account-subscriptions).
- The buy-again button of the [order pages](https://www.smootify.io/docs/build/orders) adds subscription products back as one-time purchases.
> [!WARNING]
> A cart with a price set by [name your price](https://www.smootify.io/docs/features/name-your-price) or the [product configurator](https://www.smootify.io/docs/features/product-configurator) checks out through a Shopify draft order. Subscription lines do not go into that order, and the cart is emptied when the customer leaves for the invoice. Keep subscriptions and custom prices in separate orders.
## 4. Boxes and subscriptions
A box built with [Magic Box](https://www.smootify.io/docs/features/magic-box) cannot be sold as a subscription: it becomes one line at checkout through a Shopify function that merges cart lines. Two other ways to sell a box take plans, the second with fields such as [dynamic properties](https://www.smootify.io/docs/features/dynamic-properties):
- **A Magic Box**: cannot have plans. Shopify does not merge lines that have a selling plan, and the box needs that merge to become one line. The same goes for a product with add-ons sent as one line.
- **Ready-made boxes**: each box is a product of its own in Shopify, such as "Coffee trio", with selling plans. It sells by subscription like any product. The customer's free choice stays a one-time Magic Box.
- **One box product, choices as fields**: one product, such as "Box of 6", with selling plans; the customer writes or picks the contents in fields of its add-to-cart form, such as dynamic properties, and the choices travel with the line. The box has one price, so every product the customer can choose must cost the same. Shopify sells the box, so the stock of the chosen products does not go down: the merchant needs a Shopify Flow workflow, or another tool, that reads the order and lowers it.
**Add-ons.** A product with plans and [add-ons](https://www.smootify.io/docs/features/add-ons) sells the add-ons only with the one-time purchase. While a plan is picked, the add-on pickers take `is-disabled` and the add-ons stay out of the cart.
## Before you publish
> [!STUCK]
> - **The subscription tab changes nothing, and only one plan shows.** The plan template is not a Webflow Radio Button. Replace it with one, keep its classes, and put the plan's name in its Field Label.
> - **The plan picker disappears.** The product, or the selected variant, has no selling plan. Plans come from the subscription app on Shopify.
> - **The one-time tab disappears.** The product can only be bought by subscription.
> - **A tab shows a plan's name instead of the group's.** The group has only one plan: the tab shows that plan and chooses it. Use `group-condition` to design that case.
> - **A box sold with plans does not reach checkout as one line.** Shopify does not merge lines that have a selling plan. Use ready-made box products instead.
> - **The add-ons are not added with a plan.** Add-ons go only with the one-time purchase: style the pickers' `is-disabled` class so the customer sees it.
> - **A subscription is missing from the order.** The cart also had a custom price and went through a draft order, which leaves subscription lines out.