Skip to main content

Choosing your approach

Partners build on Propeller from different starting points. Some want a storefront running today. Some have an existing site on a CMS with its own frontend framework. Some need full control over every line of UI. The Storefront SDK supports three common approaches. Pick the one that fits your project, then follow the linked guides.

Approach A: Start from an Accelerator boilerplate​

Scaffold a complete storefront with the create-propeller-shop CLI, then customize it. The boilerplate owns routing: commerce pages (product, category, cart, checkout, account) are file-system routes, and an optional CMS catch-all serves content pages (CMS support currently ships in the Next.js boilerplate).

npx @propeller-commerce/create-propeller-shop@latest my-shop --stack=next --mode=hybrid --cms=none

Uses every layer (SDK, core, UI library, optional CMS), pre-wired.

Best for greenfield projects, fast time to market, and pre-sales demos. Available for Next.js, Vue and Nuxt.

Approach B: Add the packages to an existing app​

Install the SDK and the UI library for your framework, mount the PropellerProvider, and drop components and hooks into pages you already own.

This covers two shapes:

  • Existing frontend. You keep your app and its routing, and use Propeller components where you need commerce.
  • CMS-led. Your CMS owns all pages, URLs and routing. Commerce components are blocks injected into CMS-managed templates. This suits multi-brand and multi-site setups where editors manage everything in one place.

Uses the SDK plus the React or Vue UI library. Add the CMS renderers if your CMS drives page structure.

Best for teams with an existing site, a CMS that owns routing, or a design system to integrate with.

Approach C: Use the SDK headless​

Use the SDK services (and the formatters in the core layer) directly, and build all UI yourself. No Propeller components. The component reference serves as a spec for what to build and which services to call.

Uses the SDK only.

Best for strict architectural requirements, a framework without a Propeller UI library (Angular, Svelte, Web Components), or full control over the frontend.

Decision table​

Your situationRecommended approach
New storefront, speed is the priorityA — scaffold a boilerplate with create-propeller-shop
Prototype or demo quickly for pre-salesA — scaffold a boilerplate
Existing React app, want pre-built commerce UIB — install @propeller-commerce/propeller-v2-react-ui and the SDK
Existing Vue or Nuxt app, want pre-built commerce UIB — install @propeller-commerce/propeller-v2-vue-ui and the SDK
Your CMS owns routing and page structureB, CMS-led — components as blocks, CMS handles pages and URLs
You manage multiple brands or sites from one CMSB, CMS-led
A framework with no Propeller UI library (Angular, Svelte)C — SDK services, build UI from the component reference
You need full control over every part of the UIC — SDK only
A B2B portal that hides prices until loginAny — set the portal mode to semi-closed (see B2B capabilities)

Next steps​