After you install the app

Add subscriptions to your storefront.

One subscription engine, three ways to put it on the page — whether you run a BigCommerce-managed Stencil theme, Catalyst, or a custom headless build. Pick the path that matches your stack and you'll have a subscribe option live on a product page.

Pick your tier ↓ Full integration docs ↗

Two ways in

No developer needed — unless you're headless.

On a BigCommerce-managed Stencil theme it's a no-code setup from the admin. On Catalyst or a custom headless storefront, a developer drops in a widget. Same engine either way.

Merchant — no code

Stencil storefront

Install the app, connect a payment processor, create a plan, and publish the widget — the Script Manager injects it on your product pages. No theme edits.

Merchant getting-started guide ↗

Developer — Catalyst / headless

Custom storefront

You control the template, so you place the subscribe widget yourself — a CDN tag, an npm web component, or React components for Catalyst. The tiers below.

Jump to the developer tiers ↓

Before you start

Every path needs these three things.

  1. 1

    The bc-subscriptions app must be installed on the merchant's BigCommerce store.

  2. 2

    At least one subscription plan must be created in the admin.

  3. 3

    The API Worker (apps/api) must be deployed and reachable from the storefront.

Developer integration

Pick the tier that matches your stack.

Each tier mounts the same widget against the same API. The snippet gets you the minimal install; the full guide covers configuration, theming, auth, and pitfalls.

Tier 1 — Stencil

BC-managed Stencil theme

Merchants on BigCommerce-managed Stencil themes (Cornerstone or customized variants). If you're not managing a custom build pipeline, this is the zero-friction path: the bc-subscriptions widget is injected by the Script Manager and requires no theme modification.

Package
No npm package — BC Script Manager drop-in
Effort
Low (operator-configured via admin wizard)
Full stencil guide ↗

Minimal install 

<script
  src="https://bc-subscriptions-cdn.pages.dev/v1/bc-subscriptions-widget.iife.js"
  async
></script>

Tier 2 — Headless

Any headless framework

Developers building custom headless storefronts on any framework — Next.js (non-Catalyst), Nuxt, SvelteKit, Remix, Hydrogen, plain HTML — or any framework-agnostic environment. Also the right tier for Stencil themes where you want direct DOM control over widget placement (rather than the automatic Script Manager injection of Tier 1).

Package
@bc-subscriptions/storefront-webcomponent
Effort
Low–medium (CDN tag or npm)
Full headless guide ↗

Minimal install 

<script
  src="https://bc-subscriptions-cdn.pages.dev/v1/bc-subscriptions-widget.iife.js"
  async
></script>

Tier 3 — Catalyst

Catalyst (Next.js App Router)

Developers building on Catalyst — BigCommerce's reference Next.js App Router storefront. If you're on a Catalyst-based storefront, use this tier rather than Tier 2 (headless web component): the `storefront-catalyst` package ships React 19 components that integrate with Catalyst's existing data fetching patterns and GraphQL layer.

Package
@bc-subscriptions/storefront-catalyst
Effort
Medium (React components + API client)
Full catalyst guide ↗

Minimal install 

npm install @bc-subscriptions/storefront-catalyst

Ready to wire it up?

The full guides cover every tier end to end — including testing the whole subscribe → charge flow in Stripe test mode before you go live.

Read the docs ↗ See it live ↗