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 providers 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. If you keep your own components, use the headless hooks only: they hold the state and make the API calls while your components do the rendering.

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 lists what the UI libraries offer, which makes a good checklist of what to build. For the calls behind each part, see SDK services and the frontend domain guides.

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
Existing React or Vue app with your own design systemB, hooks only: your components render, the headless hooks hold state and call the API
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 and your own UI, with the component reference as a checklist
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​