Subscriptions

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.

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.

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.

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:

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.

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:

The prices and the line under them, as in the second card:

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.

3. Cart, checkout and account

• In the 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.
• The buy-again button of the order pages adds subscription products back as one-time purchases.

4. Boxes and subscriptions

A box built with 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:

Add-ons. A product with plans and 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