Frontend Development Guides
Guides for partners building customer-facing experiences on Propeller. All content in this section uses the GraphQL API.
Each topic starts with a concept explanation so you understand how Propeller handles the domain, followed by practical how-to guides with code examples.
Frontend patterns
Patterns that apply when building on Propeller's GraphQL API, regardless of your framework choice.
- Public vs authenticated data — which data changes based on authentication state and how that affects your architecture
Products and catalog
Understand Propeller's product model (clusters, products, variants and attributes) and learn how to query, filter and display product data.
- Understanding products and categories — products and variants (clusters)
- Querying products — filtering, pagination and search
- Product detail queries — attributes, cross-sell relations and bundles
- Categories and navigation — category tree, breadcrumbs and navigation menus
- Media and assets — images with transformations, videos and documents
Accounts and authentication
Account management for B2B and B2C: customers, contacts, companies, authentication and address management.
- Understanding companies, contacts and customers — B2B and B2C account entities
- Authentication and authorization — registration, login, tokens and session management
- Managing addresses — address CRUD for customers and companies
- Favorite lists — save products for quick access and reordering
Pricing and discounts
How Propeller's pricing layers work, including customer-specific pricing, tiered pricing and promotions.
- Understanding pricing layers — price types, tax zones and surcharges
- Customer-specific pricing — price sheets, action codes and custom overrides
- Tiered and volume pricing — bulk discounts and quantity breaks
Cart and checkout
The full order lifecycle from cart management through checkout and payment integration.
- Understanding the order lifecycle — how cart, order and fulfillment relate
- Cart management — create carts, add items, manage state and persistence
- Checkout flow — addresses, shipping, payment and order creation
- Payment integration — PSP integration, payment tracking and order confirmation
Orders and shipments
Order history, shipment tracking and reordering for the customer portal.
- Order history — list, filter and view order details
- Shipment tracking — display shipping information and tracking codes
- Reordering — let customers reorder from previous orders
Storefront SDK
The Storefront SDK is a set of packages and starter apps for building customer-facing storefronts on Propeller: a typed GraphQL SDK, a core layer, React and Vue UI libraries, optional CMS renderers and the Accelerator boilerplates. These guides cover what is specific to the SDK and build on the domain guides above.
- Understanding the Storefront SDK — the packages and how the layers fit together
- Choosing Your Approach — scaffold a boilerplate, add packages to your app or go headless
- SDK Services — the typed GraphQL client and service factories
- UI Components — the provider model, React and Vue components and headless hooks
- Customization — theme tokens, BEM hooks and the compound API
- Accelerator — the create-propeller-shop CLI and the Next.js, Vue and Nuxt boilerplates
- CMS Integration — the CMS adapter contract and the page and block renderers
- Routing — commerce routes, the CMS catch-all and URL patterns
- Deployment — build, run and host the boilerplate apps in production
- B2B Capabilities — shop and portal modes, the company model, purchase authorization and clusters
WordPress Plugin
In-depth guides for configuring and customizing the Propeller WordPress Plugin. Covers every admin tab, portal mode, multi-site and developer customization.
- Understanding the plugin — how the plugin works under the hood
- General settings — API connection, channel, language, currency and portal mode
- Pages and shortcodes — page slugs, shortcodes and custom pages
- Behavior and display — feature toggles and display options
- Translations and valuesets — UI labels and predefined value lists
- Sitemaps — XML sitemap generation from Propeller data
- Multi-site setup — running the plugin across a WordPress Multisite network