Customers choose a plan on the product page, in the Subscription options block. It shows the one-time price and your plans side by side, the savings, and exactly when the customer will be charged. Its text, fonts and colors follow your theme.
Add the block #
- In the app’s setup guide, click Open the theme editor on Show plans on product pages, or open Online Store › Themes › Customize and go to your product template.
- Add the app block Subscription options to the product section, under the price works well, and save.
- Open a product that has one of your plans to check it. On a product without plans the block shows nothing, and the theme editor says “This product has no subscription plans yet. Add plans in SI Subscriptions & Memberships.”
Themes without app blocks (vintage themes) use the Subscriptions app embed instead: turn it on under App embeds. It places the same options above Add to cart, and leaves them out on pages where the block is used.
What customers see #
Under Purchase options:
- One-time purchase, with the product’s price (not shown when the product is only sold as a subscription);
- each of your plans with the name customers see, a savings badge (“Save 10%”, or “Save up to 15%” when its frequencies differ) and the lowest price per delivery (“From $18.00”);
- once a plan is picked, its frequencies (a list, or a drop-down above 4) with the price and savings of each.
Under the chosen frequency the block spells out the terms:
- a price that changes over time: “Free for 14 days, then $20.00 every month.” or “First payment $25.00 (includes a $5.00 sign-up fee), then $20.00 every month.”;
- a prepaid plan: “$54.00 every 3 months, delivered every month ($18.00 per delivery).”;
- the unit price, when the product has one and the price doesn’t change over time;
- your plan description, and “Ends after 12 payments.” when the plan has a maximum number of payments;
- the charge line: “You’ll be charged $18.00 today, then $18.00 every month until you cancel.” or “Nothing to pay today. Then $20.00 every month until you cancel.”;
- the links Manage or cancel anytime in your account and Subscription policy (when your store has a subscription policy).
Prices come from Shopify in the customer’s currency and are printed in your theme’s money format. Savings compare the ongoing price per delivery with the one-time price, rounded down, so they are never overstated; a saving under 1% gets no badge.
When the customer changes variant, the prices and savings follow. A frequency the variant doesn’t have can’t be picked, and a plan with none for that variant reads “Not available for this selection”. If a customer clicks Add to cart with a plan picked but no frequency, they see “Choose a subscription option.”
Store-wide settings #
Settings › Product page (“How the “Subscription options” block shows your plans.”) sets the defaults:
| Setting | What it does |
|---|---|
| Selected first | One-time purchase (the default, and what Shopify recommends) or Subscription. |
| Show savings badges | The “Save 10%” badges. |
| Badge text | Optional. Shown instead of the savings; {percent} is replaced by the savings. |
| Show the plan name on cart rows | Adds “Subscription: plan name” under cart lines when your theme doesn’t show it. Needs the Subscriptions app embed. |
The block’s own settings in the theme editor (Heading, Selected first, Savings badges, Badge text, Show the account and subscription policy links) override these for that template. A link with ?selling_plan= and one of your plans opens the product with that plan picked.
In the cart and at checkout #
Shopify and most themes show the plan’s name on the cart line. Shopify’s checkout shows the plan and its terms, and the customer agrees to them there. The first order is a normal order you fulfil as usual.
Rental products #
With the Rentals & Bookings app, a product’s rent variants show the rental calendar instead of this block, and your rental plans appear in the calendar. The block hides itself on those variants and stays on any variant you sell. See Rental subscriptions with Rentals & Bookings.
Good to know #
- The block is built to keep the page still: the whole block is there when the page loads, and nothing jumps when the script starts.
- Your theme’s own Add to cart button sends the chosen plan. Nothing in the theme’s form is replaced.
- The block is keyboard friendly: the options are real radio buttons in labelled groups.
