Subscriptions

Two selectors: a one-time-vs-subscribe toggle (change-purchase-option) and a frequency picker (change-selling-plan) that lists the variant’s real selling plans. The chosen plan rides every add-to-cart and buy-now. Both hide themselves on products without selling plans, so they are safe in a shared template.

<storesynk-product handle="example-product">
  <change-purchase-option class="purchase-options">
    <purchase-option value="single" class="purchase-option">One-time purchase</purchase-option>
    <purchase-option value="recurring" class="purchase-option">Subscribe &amp; save</purchase-option>
  </change-purchase-option>

  <change-selling-plan labels="Every week, Every 2 weeks, Every month" class="selling-plans">
    <selling-plan-option class="plan-option">
      <show-selling-plan-name class="plan-name"></show-selling-plan-name>
      <show-selling-plan-price class="plan-price"></show-selling-plan-price>
    </selling-plan-option>
  </change-selling-plan>

  <add-to-cart>
    <button type="button">Add to cart</button>
  </add-to-cart>
</storesynk-product>

• change-purchase-option is not a clone container: author exactly two purchase-option children, value="single" and value="recurring".
• change-selling-plan shows only while subscribing. Author exactly one selling-plan-option; the engine clones it per real plan and fills the name and money-formatted price.
• Subscribe-first is the default: the page opens with “Subscribe” active and the first plan preselected. Add default-option="single" for one-time-first. Products without the widget always start one-time.

Options

Tag	Attribute	Default	What it does
change-purchase-option	default-option	"recurring"	Initial mode. "single" opens one-time-first.
purchase-option	value	(author it)	"single" or "recurring".
change-selling-plan	labels	""	Comma-separated custom plan names, in plan order.

selling-plan-option, show-selling-plan-name, and show-selling-plan-price take no authored attributes; the engine sets each clone’s value and ss-active.

Styling

ss-active marks the chosen option and plan; ss-empty marks a selector with nothing to show.

change-purchase-option { display: flex; gap: 8px; }
purchase-option[ss-active], selling-plan-option[ss-active] { border-color: #1a1a1a; font-weight: 600; }
change-purchase-option[ss-empty], change-selling-plan[ss-empty] { display: none; }

Gotchas

• Blank plan name or price cells mean the show-selling-plan-* tags sit outside their selling-plan-option. See selling plans.
• Picked a plan but the cart added a one-time purchase: a selector is outside its <storesynk-product>, or a value / ss-active was authored by hand.
• There is no one-time-label attribute anymore; the one-time choice lives on change-purchase-option.

Related

• Selling plans reference
• Add to cart and buy now
• Cart line reference (show-line-selling-plan shows the plan in the cart)