Building a Headless Ecommerce Website

Building a website with Headless CMS and Headless Ecommerce is easier than ever, thanks to the mature APIs, SDKs and starter projects that are available to help you get going quickly.  Building a website with Headless Ecommerce and Agility CMS brings you several benefits.  Here are a few:

• More secure and reliable than traditional ecommerce
• Lightning-fast page load times
• Better user experience using modern front-end frameworks
• More control for developers to implement pixel-perfect designs
• Easier for marketers and editors to use CMS content to promote products online

Headless CMS, Ecommerce, and Website Frameworks

Choose your Ecommerce Platform

You have lots of options to choose from when composing the parts of your system.  Along with Agility CMS, you can use Shopify, BigCommerce, or any headless ecommerce platform that has a mature API. 

Choose your Website Framework

You can choose pretty much any modern website framework to build your solution with. For new projects we recommend Next.js, which has the broadest set of examples, or ASP.NET Core for .NET teams. Other frameworks can pull content through the Content Fetch API or the Content Sync SDK, and Vibe Coding with Agility shows how to build with the framework of your choice. Modern frameworks support static generation, server rendering and serverless functions, so you can pick the right rendering strategy for each page.  

How It Works

Do-It-Yourself DevOps

Everything starts with your code.  Websites built using headless technologies take content and data from APIs, "build" it into HTML pages and output it using a CDN.  If you are setting up the DevOpsyourself, you'll need to write code that runs on a build server, pulls in content from Agility CMS, and ecommerce data from an API. 

That's actually pretty complicated to set up - and can involve several different steps. Luckily, there are hosting providers like Vercel and Netlify that have greatly simplified this process.

The Faster and Easier Option: Vercel

Looking at the image above, it would seem that Vercel only eliminates 1 step from the DevOps pipeline, but in actuality, it does a lot more.  Connect Vercel to any git repo, and it will automatically build your code for you and do all the heavy lifting of pulling in the CMS content and ecommerce data.  Then, whenever you make changes to your code, it will automatically redeploy your changes. 

Netlify works similarly.

Next.js Commerce

The Next.js Commerce starter that this section used to describe is retired. It was built on Next.js Commerce, which Vercel no longer maintains. For a current way to combine Agility with a commerce platform, see Reference Architecture: Headless Commerce.