How To Build An E-commerce Site With Next.js

Earlier this year we released the official E-commerce Template which was a game-changer for those who wish to build high performance e-commerce sites all in one place. This template significantly improved the UX and DX of working with headless-commerce setups like Shopify by flattening the stack and eliminating the need to maintain site content across multiple headless platforms.

But like all Payload apps, this still requires your project to have its own front-end, and although we built one, there’s an unnecessary learning curve and complexity with this setup. Not only do you have to maintain and deploy them separately (and synchronously), there’s an added complexity of securing your apps across domains and ports.

We want to make the web simpler, not more complex, and one way to do this is by serving your front-end directly alongside Payload. This itself is nothing new, we’ve written about this extensively in the past and even maintain this official Custom Server Example. But what this ultimately means is that you can start with the fun stuff on day 1 instead of losing your mind getting to an MVP.

So today, we took our E-commerce Template to the next level by adding a beautifully designed, production-ready website right alongside your Payload app. This means that you can go from initial clone to first sale within minutes.

The last time you were tasked with building an e-commerce store, you were likely overcome with dread and fear. Your mind likely raced to one of the following pitfalls:

• Time to market
• Microservice Hell
• Customer-facing UI
• Feature anxiety
• Vendor lock-in
• API overages
• Monthly fees
• Data ownership
• Database access

With the E-commerce Template you can focus more on business strategy and less on technology. Your APIs are your own and your data belongs to you. You are not beholden to a third-party service that may charge you for API overages, on top of a monthly fee, and who may limit your access to your own database. Running an online store will never cost you more than your server (plus payment processing fees).

Imagine actually wanting to work on your e-commerce site, being more than happy to invite marketers in to dream up new landing pages for your latest campaigns, and where editors create completely unique layouts for all types of content, all by themselves. This template is right for you if you are selling:

• Physical products like clothing or merchandise
• Digital assets like ebooks or videos
• Access to content like courses or premium articles

Everything you need is ready to go, including:

• Admin Dashboard
• Authentication
• Pages and Products
• Shopping Cart
• Checkout
• Payment Processing
• Customer Accounts
• Forms
• Paywall Content
• Layout Builder
• Dark Mode
• SEO

And much more.

Quick Start

Option 1 (Recommended)

Head to Payload Cloud, clone the E-commerce Template, and deploy it on a free trial. This process may take a few minutes, and once it's done you'll have a fully working e-commerce store, complete with a live domain. This will have created a new repo for you in your GitHub account. You can clone this repo down for local development, and when you push, your commits will automatically deploy.

Option 2

The code for this template is completely open source and can be found here. To quickly clone this template, run the following command in your terminal:

npx create-payload-app my-project -t ecommerce

Then follow the instructions in the README to get started. You can always deploy this repo to Payload Cloud later.

Admin Dashboard

As with all Payload apps, you get an enterprise-grade admin dashboard out of the box. This dashboard is where your store admins can manage all users, orders, products, pages, and more. You can fully customize the look and feel and it can even be white-labeled to match your brand. The admin panel is also where your editors will use the layout builder to generate unique landing pages and product layouts.

Authentication

Authentication with Payload was already easy, but it just got even easier. In this template you get fully working customer login and create account flows, complete with password reset and email verification. Forms, field states, error handling, cookies, redirects, it's all ready to go out of the box. With this template you don't need to worry about building these flows yourself, or rely on a third-party service (that you'd likely have to pay for).

Customer Accounts

Users never have to leave your site to manage their account, which is a huge win for customer retention. They simply login to see their past purchases, review their order history, and update their account information. Users never have to navigate between platforms, they can do everything in one place. You can also use this data to send personalized emails to your customers, like abandoned cart reminders or product recommendations.

Shopping Cart

One of the hardest parts of any e-commerce app is the shopping cart. They need to work very well in order to increase conversion and seamlessly funnel users into your checkout process. A good shopping cart should:

• Allow users to shop without logging in
• Save anonymous users' carts to browser storage
• Sync saved carts to users' accounts upon login
• Persist the same cart across all devices

Checkout

The template integrates with Stripe to provide a fully working payment processing flow.

In full transparency, Stripe does take a small cut of every transaction, but to be fair, they provide a valuable service by handling 100% of the financial and accounting services. It is entirely possible to integrate with other payment processors, you would just need to build out the integration yourself.

Selling Digital Assets

Gating content behind a paywall is a great way to increase your revenue. If you are selling digital assets, easily control access to those assets behind a user's purchase history. If your product is a video course or premium content, for example, you can restrict access to that course or content to only users who have purchased it. Or if you're selling an ebook, easily restrict access to a download link until the user has purchased it.

Layout Builder

Your marketers will be able to dream up new landing pages and product layouts without feature anxiety. Editors will be able to create completely unique layouts for all types of content, configurable on-the-fly directly in the CMS. They can seamlessly navigate between the admin panel and the live site to see their changes in real-time.

This template comes pre-configured with a few heroes and blocks to get you started, but you can easily add more.

SEO

Meta tags, open-graph tags, structured data, sitemap generation, the works, it's all included. You can easily customize the SEO settings for each page and product from the admin panel.

Get Started

Use this template to get to market fast. Use it to enjoy building your next big e-commerce store. Or to create FOMO amongst your developer friends. Deploy in minutes on Payload Cloud or clone it from GitHub. Or, run npx create-payload-app. Happy building.