Subscription Frequency

The delivery-frequency control that lists a product's available cadences.

Last updated

Subscription Frequency icon

How to use

This control is meant to sit inside the subscription selector (Subscriptions), which provides the product context it needs.

  1. Place it within (or alongside) the subscription selector and connect ⛁ Butter Data to the same product — the selector passes this through.

  2. Choose the Type: Dropdown (native select) or Button (your own designs).

  3. Button mode only: connect the ⦿ Unselected design and, optionally, a ⦿ Selected design.

  4. Inside those designs, nest a Subscription Text for the cadence label alongside a Price component, then style the row or grid with the Buttons layout group.

  5. Dropdown mode only: style the native select via Styles (Config), or connect your own design via ⦿ Design (Connect).

  6. Choose Groups — Merge or Active — when the product has multiple groups. Use Limit / Offset to show a slice of options.

  7. Leave Auto Select Sub on so changing frequency switches the product from one-time to subscription.

Optionally set Tracking to record frequency selections in Framer Analytics.

Dropdown vs. Button mode

Type

What it looks like

What you configure

Dropdown (default)

A compact native HTML select listing every cadence.

Style it directly via Styles (Config mode), or connect a custom trigger design via Component (Connect mode).

Button

A row or grid of your own Framer button designs, one per cadence.

Connect ⦿ Unselected and (optionally) ⦿ Selected designs, using nested Subscription Text and Price. Lay them out with the Buttons group.

Merge vs. Active groups

Shopify products can have multiple selling-plan groups (e.g. "Subscribe & Save" vs "Prepaid Bundle"). With a single group, Merge and Active produce identical options.

Groups

Behavior

Merge

One option per unique cadence label across all groups — duplicate names combine into a single row.

Active

Only the cadences belonging to the group that contains the currently selected selling plan.

How the selected frequency stays in sync

The highlighted option always matches the customer's current plan. If you've used Limit or Offset to show only some of the cadences and the customer's plan isn't among them, no option highlights — that's expected, and it's what makes split layouts work.

In Button mode, the last-picked frequency stays highlighted even while the customer is on one-time, so switching back to Subscription picks up where they left off. Picking a frequency also switches the product to that subscription — unless Auto Select Sub is off, in which case it just highlights until the customer chooses Subscribe. Each option can show its own discounted price in the customer's currency, and the control works safely inside clickable product cards — tapping a frequency won't open the card.

On a product with no Shopify selling plans, the live site renders nothing; on canvas it shows mock cadences ("Every 15/30/45 days") so you can style it, and Button mode shows an empty-state prompt until designs are connected.

Constraints & gotchas

It needs Shopify selling plans on the product — with none, the live site shows nothing (only the canvas shows mock cadences). Button mode needs at least the ⦿ Unselected design connected, or it shows an empty state on canvas and nothing live. With Auto Select Sub off, changing frequency while one-time is selected only highlights the option — it won't switch the product to subscription until the customer picks Subscribe in the selector itself.

Questions? Join our Slack community