Subscriptions

The one-time vs subscription picker that lets customers buy on a Shopify selling plan.

Last updated

August 14, 2026

How to use

Place it on the product page and connect ⛁ Butter Data to the product's Butter Data CMS field.
Set Default (One-time / Subscription) and, optionally, ↳ Sub # — if you want a default subscription selected that's not the first option.
Choose Display (All / One-time / Subscription(s)), then edit the One-time title and description if needed.
Set Subscriptions (Single / List) and, for List, Limit / Offset.
Choose Picker (Radio / Dropdown).
Radio: connect ⦿ Selected / ⦿ Unselected designs and set Layout. Dropdown: use Styles (Config) or connect a ⦿ Design (Connect).
Nest Price components inside your designs for formatted, market-aware pricing.

Radio vs. Dropdown picker

The Picker control sets how customers choose between options; each style has its own design path, both connected via Component Instances.

`Picker`	What it looks like	What you configure
Radio	A row or grid of your own designed options, keyboard-navigable as an ARIA radio group.	Connect `⦿ Selected` and `⦿ Unselected` designs and arrange them with the `Layout` group.
Dropdown	A compact native HTML select.	Config mode styles the native select via `Styles`; Connect mode swaps in your own trigger via `Component`, sized by `Width` (Fill / Fit).

Single vs. List subscription rows

`Subscriptions`	`Behavior`
Single	One subscription row represents every plan — nest a Subscription Frequency control inside it so the customer picks the cadence there.
List	Each selling plan gets its own row. `Limit` / `Offset` apply only in this mode, to cap or skip rows.

Setting the default selection

Set Default to One-time or Subscription to control what's pre-selected on load, and ↳ Sub # to pick which subscription plan (by 1-based position) is the default when Default is Subscription. If you're placing multiple instances of this component on the same page, set Default the same way on all of them.

How plan selection is shared with the page

Components nested inside each plan row — Subscription Text and Subscription Frequency — automatically show that row's title, description, price, and cadence. With Subscriptions set to Single, nested Price components still show the real, currently active plan.

Selecting a plan is what the Purchase Button reads when the customer adds to cart — whatever's chosen here is what actually gets added. The Radio picker supports full keyboard navigation with arrow keys; the Dropdown picker is a native dropdown with your configured focus styles.

Constraints & gotchas

Requires Shopify selling plans on the product — with none, only the One-time option shows. Subscription Text and Subscription Frequency must live inside this selector, since both read the plan-row context it provides; standalone, they have nothing to display.