Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • EdgeOne CLI
    • Pages MCP
    • Best Practices
      • 1-Minute Quick Deployment + Free Beta Test in Progress | Your Exclusive DeepSeek, Handled by EdgeOne!
      • Deploy WordPress Gatsby To EdgeOne Pages
      • Build an Ecommerce Platform Using WordPress + GatsbyJS
      • Combining Sanity to Deploy a Portfolio Template
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • FAQs
    • Contact Us
    • Release Notes
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !
Docs Overview/
Edge Developer Platform/
Pages/
Best Practices/
Build an Ecommerce Platform Using WordPress + GatsbyJS/

Build an Ecommerce Platform Using WordPress + GatsbyJS

Introduction: Technological Choices For Modern Ecommerce

Advantages Of the JAMStack Architecture

The JAMStack architecture is a modern web development architecture pattern that achieves high performance and high security website architecture through pre-rendering and service decoupling.
JAMstack = JavaScript + APIs + Markup
This architecture is reshaping the modern web development paradigm, showing significant advantages in ecommerce scenarios that require high performance and low-cost ops:.
Speed is conversion rate.
Security
Scalability
SEO and accessibility
Lower cost
This article introduces how to quickly build a high-performance, easy-to-maintain e-commerce website based on a Pages template with a JAMStack architecture, and implement common dynamic features such as login, shopping cart, and orders, so that you can quickly build your own high-performance e-commerce website.
The backend CMS chosen here is the very popular WordPress + WooCommerce.


Environment Construction and Configuration

WordPress Backend Construction

Docker Deployment (Recommended)
We provide a docker project that can be directly deployed, which can be deployed to your server using Docker containers.
The installation and deployment of the Docker environment can refer to Tencent Cloud Lightweight Server Docker Container Environment.
After the deployment is complete, open wp-admin: https://your.site.domain/wp-admin/admin.php.
After logging in, you can see the configured product information and page.

Self-Built
If you already have your own WordPress service and want to extend e-commerce features, you can also configure the environment yourself according to the following steps:
Step 1: Install the plug-in
Install the following plug-ins in your WordPress service and activate them:
Advanced Custom Fields
JWT Authentication for WP-API
WooCommerce
WPGraphQL
WPGraphQL for ACF
WPGraphQL for WooCommerce
WPGraphQL JWT Authentication

Step 2: Import/Create a product
After activating the WooCommerce plug-in, click on Products in the Navbar to enter the product management page.
You can create products according to your needs

Or download the csv file Download for import.
Step3:
First, create the following webpages for displaying the homepage banner.
-/highlight
-/promotion
-/sample-page
Click on ACF in the left menu, download Configuration File and import field configuration.
After the import is complete, go back to the page created above to edit and fill in the ACF data.

Edit and then publish.

Front-End Template

After deploying the backend service, select the WordPress Woocommerce Template on the Pages platform and configure the service address into the environment variable of the Edgeone Pages project.
Create a project and wait for the deployment to complete.

Click the link to see the complete page.