E-commerce on
Netlify
Give your e-commerce store near instant pageloads with a frontend deployed to Netlify’s global network.
Contact salesThe new web architecture for commerce
Manscaped.com was originally built on the Shopify stack. But as they grew into different markets and internationalized their website, they realized this wouldn’t scale. In this talk, engineers Preston Straight and Alex Luong talk about why they chose the Jamstack approach and Netlify, how it affected site performance, scalability, and internationalizing their sites.
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.
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%.
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 commerce, 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.
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.
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:
- A complete git-powered workflow
- Built-in CI/CD
- Serverless functions based on AWS lambda
- Advanced edge logic
- Powerful build plugins to automate worfklows
- JWT-based identity and authorization
More benefits
From content to security 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 security & 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.
Useful links
If you are interested in seeing more about e-commerce on Netlify and exploring headless technologies, here are some resources for you: