DEV Community

Cover image for How To Build An E-commerce Site With Next.js 💰
Jacob Fletcher for Payload CMS

Posted on

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

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 Payload's new E-commerce Template you can focus more on business strategy and less on technology with a beautifully designed, production-ready website right alongside your Payload app.

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).

And you can go from initial clone to first sale within minutes.

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
  • 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 30-day 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.

Sell digital assets behind a paywall with this e-commerce template

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.

Image description

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.

What is Payload?

Payload is a fully open-source, TypeScript-based headless CMS and application framework that gets developers what they need and gets out of the way. Built with Node.js and React, Payload is code-first, so you can enjoy a backend and a CMS-grade admin UI without having to learn another CMS. Get started in one line $npx create-payload-app or have us do the work.

Top comments (0)