E-commerce on
Netlify

Give your e-commerce store near instant pageloads with a frontend deployed to Netlify’s global network.

The new architecture for commerce

Watch the headless commerce summit keynote

In this video from the Headless Commerce Summit, Netlify cofounders Chris Bach and Matt Biilmann go through the advantages of pairing a headless approach to e-commerce with the prerendering capabilities of the Jamstack.

What you'll learn

Pair headless commerce with the Jamstack to increase both site performance and developer velocity. Get an overview of this new architecture and the benefits it brings to your commerce projects.

The future of commerce is headless

In commerce, data and personalization are proven to drive revenue— but growth depends on your storefront also being fast. Headless commerce with Netlify is the fastest way to build compelling and fast e-commerce experiences.

Reserve the Runway, a screenshot of the Victoria Beckham Beauty web site

Case Study: Victoria Beckham Beauty

When Victoria Beckham Beauty engaged Fostr, an e-commerce agency, to create their online store, they wanted a premium, bespoke customer experience to match their brand. The project had an ambitious timeline of just 3 months for its design and implementation, and needed to accommodate some very specific design requirements, as well as deliver an efficient shopping experience.

A few definitions

Headless
A term for backend services providing data and functionality without controlling the frontend UI. Headless systems communicate with decoupled frontends via APIs.
Jamstack
A modern frontend web architecture pioneered by Netlify specifically as a companion to headless backend systems. Jamstack allows teams to develop rich, interactive UIs with modern frameworks and tools.

“Improving load time by 0.1s boosts conversion rates by 8%.”

Google / Deloitte

A modern platform for better conversion

“Headless” is a modern architecture for commerce that’s driving higher conversion through sites that are significantly faster, more custom to the brand, and more personalized to the customer.

The fastest possible storefront

Create responsive storefronts that load instantly. Your entire site is pre-rendered at build time and served to each shopper from a local node of our global edge network.

A custom, on-brand experience

With headless commmerce, the frontend of the application is decoupled from the backend. This allows you to make changes in the frontend fast and frequently, without coordinating every change with the backend. And unlike a monolithic approach, where your team is stuck using whatever templating technologies are built into your e-commerce platform, you can now build out the pages of your site with full control over the experience.

How it works

Headless backend systems

Virtually every one of today’s commerce platforms can be operated in headless mode, allowing you to decouple the frontend from all the complexity of the backend platform. Data from the headless backend services is provided to Netlify via APIs where the frontend of the application will be generated. Using this approach, many enterprises combine data and functionality from a wide variety of headless services.

Netlify Build Automation

Webhooks alert Netlify when data has been updated in the backend headless systems. Netlify runs a build process that can then pull recent data from the backend APIs and apply the data to your templates to generate high performance prerendered web pages for your entire e-commerce storefront. Netlify’s agnostic build environment can run a wide variety of technologies and frameworks, so you are free to create your entire frontend using whatever tools are selected by your team.

DALLAS LONDON MOSCOW TOKYO

Global deployment

Once the build completes, your entire e-commerce site—including the prerendered pages, images and assets, serverless functions, and advanced edge logic—are deployed across Netlify’s global infrastructure in one atomic update.

Unleash your development team

Headless commerce comes as welcome relief for development teams used to fighting the arcane templating engine of a monolithic platform like Magento or Commerce Cloud. Netlify allows your developers to pick any framework or programming language to build really rich web experiences. And consuming these platforms via API usually means a shorter learning curve along with the flexibility to change out any provider at any time.

Meanwhile, the resulting product pages receive supercharged performance as a result of being generated at build time rather than at request time, and served directly from a CDN.

“Other fashion brands benchmarking against VBB want to understand how it’s so much faster.”

Ryan Foster , Fostr

Experiment more. Iterate faster.

Easily and transparently replace older systems with best-in-breed technologies. The only necessity is that they provide an API, a feature common to all modern web and commerce tools. You can start a new headless-first presence in record time or migrate an older site over, piece by piece.

Netlify offers a powerful suite of services to help teams ship faster, including:

Deploy contexts on Netlify’s app

More benefits

From content to secuirty to personalization, here are even more benefits of headless e-commerce on Netlify:

Unite content and commerce

Technical limitations used to require brands to maintain a content site and a separate e-commerce storefront. But with headless e-commerce and Netlify, you can combine content and commerce, bringing rich content experiences into your storefront and shopping and checkout into every page of content.

Better sercurity & reduced attack surface

Across our global Edge, content deployed to the edge nodes is fully prerendered and static, offering no active processes or surface area for attack.

Faster personalization

New functionality coming soon to Netlify will allow you to write your own functions to transform and personalize content on the edge, adapting content for different visitors based on your own criteria. You’ll be able to run custom code alongside your static assets for fast, personalized content that’s never out of date. Sign up for the Netlify Edge Handlers Preview to discover more about personalization on the edge.