Building An Online Store With Saleor

What Is Saleor and Why Choose Headless Commerce

In the rapidly evolving landscape of e-commerce, businesses increasingly need flexibility, performance, and scalability that traditional monolithic platforms struggle to provide. Saleor emerges as a powerful headless commerce solution that decouples the backend commerce engine from the frontend presentation layer, giving developers complete freedom to build custom shopping experiences using modern web technologies.

The Rise of Headless Commerce

Traditional e-commerce platforms bundled the frontend (what customers see) with the backend (where commerce logic lives) into a single monolithic application. While this approach simplified initial setup, it created significant challenges as businesses grew. Headless commerce fundamentally changed this equation by separating the commerce backend from the presentation layer through a well-defined API.

Saleor takes this concept further with its GraphQL-first architecture. Rather than offering a traditional REST API, Saleor exposes a comprehensive GraphQL endpoint that allows frontend developers to request exactly the data they need, in the shape they need it. This eliminates over-fetching and under-fetching, resulting in faster page loads and better user experiences, particularly on mobile devices where network efficiency matters most.

Built on Python and Django, Saleor handles all complex commerce operations--product management, inventory, pricing, orders, payments, and fulfillment--while exposing a well-documented GraphQL API. Combined with high-performance architecture capable of handling millions of requests, Saleor represents a compelling choice for businesses ranging from startups to enterprise deployments.

Our e-commerce development services help businesses leverage headless commerce platforms like Saleor to create custom shopping experiences that drive conversions and scale with growth.

Setting Up the Saleor Backend

Option 1: Saleor Cloud (Quick Start)

For teams wanting to focus on storefront development without infrastructure management, Saleor Cloud provides a fully managed deployment option. Creating a new Saleor Cloud instance requires only a web browser and takes under five minutes. The dashboard provides access to the GraphQL playground, where developers can explore the API and test queries against live data.

The cloud platform handles database management, scaling, security updates, and performance optimization. Configuration options include setting up additional channels, configuring payment providers, and managing webhooks for external integrations. The free tier includes sufficient resources for development and testing.

Option 2: Self-Hosting with Docker

Teams preferring full control over their infrastructure can deploy Saleor using Docker containers. The official Docker Compose configuration sets up the Saleor core API, PostgreSQL database, and Redis for caching. Production deployments typically use Kubernetes manifests for horizontal scaling and rolling updates.

Initial Store Configuration

Initial setup involves configuring product types, attributes, channels, and payment gateways. Payment gateway setup connects the commerce system to processors like Stripe, Braintree, or Adyen. Shipping zones define where products can be delivered with available shipping methods.

For businesses exploring headless commerce, our web development services can help design and implement custom integrations that connect Saleor with your existing systems.

Working with the GraphQL API

Saleor's GraphQL API is the foundation of storefront development. Unlike traditional REST APIs, GraphQL allows you to request exactly the data you need in a single request.

Essential Queries

• Products Query: Fetch products with filtering, sorting, and pagination
• Product Query: Get single product details with variants and pricing
• Checkout Query: Retrieve cart state with line items and totals
• Collections Query: Get organized product groupings

Key Mutations

• checkoutCreate: Initialize a new shopping cart
• checkoutLinesAdd: Add items to the cart
• checkoutComplete: Finalize the purchase

The GraphQL playground at your Saleor instance's /graphql/ endpoint provides interactive schema exploration with autocomplete. For teams building custom storefronts, our web development expertise can accelerate GraphQL integration and deliver pixel-perfect user experiences.

The API supports channel-specific results, showing appropriate availability and pricing for each sales channel. This flexibility enables businesses to create specialized storefronts for different markets without managing separate backend instances.

Implementing Shopping Cart and Checkout

Cart State Management

The shopping cart requires persistent state that survives page navigation and browser refreshes. React Context provides a clean abstraction for cart state, with the CartProvider wrapping the application. The context maintains the checkout token in localStorage, ensuring the cart persists across sessions.

Optimistic updates improve perceived performance by updating the UI immediately while the API request processes in the background. When a customer adds an item to cart, the UI shows the updated state instantly, then confirms with a notification once the server request completes.

Multi-Step Checkout Flow

The checkout flow guides customers through:

1. Shipping Address: Collect recipient information and calculate shipping methods
2. Payment: Process payment through Stripe or other gateway
3. Review: Display order summary before final submission
4. Confirmation: Show order details after successful purchase

Cart operations interact with the Saleor checkout API to ensure consistency. Adding an item creates a checkout if one doesn't exist, then adds the specified variant with the selected quantity. The API validates that the variant is available in the requested quantity, returning errors for out-of-stock situations.

For complex checkout requirements, our custom application development team can implement custom checkout flows, address validation services, and integration with third-party logistics providers.

Customizing the Storefront

Theming with Tailwind CSS

The storefront uses Tailwind CSS for styling, providing a utility-first approach that enables rapid customization through configuration. Brand customization begins with updating the color palette--primary colors affect buttons and interactive elements, while secondary colors appear in accents.

Component Architecture

Component architecture follows atomic design principles with atoms (buttons, inputs), molecules (form fields, cards), and organisms (product grid, checkout form). Extending functionality involves creating custom components that implement the required behavior while maintaining the same props interface.

Common Customizations

• Product Cards: Add wishlist buttons, comparison links, or tiered pricing
• Navigation: Create mega menus with collection hierarchies
• Checkout: Add custom fields or integrate loyalty programs
• Account: Build order tracking and return management interfaces

The product card component demonstrates the override pattern. Custom cards might add wishlist buttons, comparison links, or tiered pricing indicators. Implementing a custom card component and updating the product listing provides extended functionality without modifying base components.

Our e-commerce design services ensure your custom storefront delivers exceptional user experiences that drive conversions and customer loyalty.

Payment Integration

Stripe Integration

Stripe integration begins with creating a Stripe account and obtaining API keys. The Saleor dashboard configures the Stripe plugin with publishable and secret keys, along with webhook configuration for receiving payment confirmations.

Security Best Practices

• All payment pages must be served over HTTPS
• Use payment provider's hosted fields to minimize PCI compliance scope
• Never log, store, or transmit raw card numbers
• Use environment variables for sensitive credentials
• Implement regular key rotation and monitoring

Supported Payment Methods

Saleor supports credit cards, PayPal, Apple Pay, Google Pay, and various regional payment methods through its plugin architecture. Test mode allows development with Stripe's test card numbers, simulating various payment scenarios including successful payments, declines, and 3D Secure challenges.

Using Stripe Elements or similar hosted field solutions minimizes compliance scope by keeping card data within the payment provider's PCI-certified environment. The storefront should never log, store, or transmit raw card numbers except through these secure channels.

Deployment and Production Considerations

Deployment Options

Vercel provides zero-config deployment with automatic builds, edge caching, and serverless function scaling. Docker container deployment packages the Next.js application for any container orchestration platform. Static export generates pure HTML/CSS/JS for hosting on any static service.

Performance Optimization

• Use Next.js Image component for automatic format conversion and lazy loading
• Implement code splitting for large components like checkout forms
• Configure GraphQL caching strategies to reduce API load
• Use CDN caching for static assets and API responses

Core Web Vitals metrics--Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift--directly impact both user experience and search rankings. Image optimization through Next.js Image component provides automatic format conversion (WebP, AVIF), lazy loading, and responsive sizing.

Monitoring

Production deployments require monitoring for:

• Response times and error rates (APM tools)
• GraphQL query performance
• Core Web Vitals metrics
• Infrastructure resource utilization

Alerting configuration notifies teams of anomalies before customers are impacted. For comprehensive monitoring solutions, our DevOps and cloud services can help design and implement observability frameworks tailored to your e-commerce needs.

Sources

1. Saleor Documentation: Storefront Quickstart
2. Saleor API Reference
3. Saleor GitHub Repository
4. Next.js Documentation
5. Apollo Client Documentation