Shopify Integration
This article introduces how to build a high-performance website based on the Shopify Storefront API and the Next.js framework. With the aid of EdgeOne Pages templates, you can quickly complete the integration of Shopify and Next.js. Through global CDN acceleration, it achieves outstanding website performance and user experience.
Getting Started
EdgeOne Pages provides a complete Shopify + Nextjs integration solution template. You can click the deploy button in the template to quickly deploy.
This document introduces the integration process, which mainly includes two steps: configure Shopify and deploy to EdgeOne Pages. If you want to learn about the specific implementation principles of this solution or require customized development based on your needs, proceed to the detailed configuration steps below.
Shopify Configuration
Shopify provides the StoreFront API to implement Headless e-commerce. EdgeOne Pages calls the StoreFront API to request user info, shopping cart information, and display it on the frontend.
1. Creating a Store
Enter Shopify Dev to register a new account and create a store. After creation, enter your store management backend.
2. Adding a Product
Add your product under
Products.
3. Installing the Headless Theme
Custom e-commerce websites implemented using the Storefront API will have their own store domain names. The Shopify Headless Theme needs to be installed to connect Shopify's built-in pages with your custom site.
Download the theme from the Github repository, enter the online store, and click
Add Theme->Upload zip file.
Select the downloaded theme package.
After uploading, click
Customize to enter the customization interface.
In the settings interface, fill in your site domain name, then click
Save to save, and click Publish to publish.
The theme is now successfully activated.
4. Environment Variable Preparation
Click the top search box, manually input
App and sales channel setting, and click App and sales channel setting at the bottom.
Click
Develop apps in the top right corner.
Initial entry requires enabling the
Create a legacy custom app feature.
Click create app, input the name, then click
Create app.
After App creation is completed, enter the configuration interface, click
Configure Storefront API scopes, and Configure permissions.
For permission configuration, see the following:
After configuration is complete, save. Enter the API Credentials tab, install the application to get
Storefront API Access Token.
In the settings interface, you can obtain your
store address at the top-left corner.
Get the store address and
Storefront API Access Token, then you can use API calls to access the Shopify store API.
Integration Details
API Routing (Backend API)
Shopping Cart API
POST /api/cart/create - Create a shopping cart
GET /api/cart/get - Retrieve shopping cart information
POST /api/cart/add - Add product to shopping cart
POST /api/cart/remove - Remove product from shopping cart
POST /api/cart/update - Update shopping cart product quantity
User Authentication API
POST /api/customers/login - User login
POST /api/customers/register - User registration
POST /api/customers/logout - User logout
GET /api/customers/account - Get user account information
Product and Order API
GET /api/collections - Search product categories
GET /api/collections/[handle] - Get products in a specific category
GET /api/orders - Get user orders
POST /api/checkout/create - Create a checkout session
Main Functional Modules
Shopify Integration Layer
Encapsulate Shopify Storefront API calls, provide a unified GraphQL client and business service layer, handle all data interaction with the Shopify backend.
Core client (src/lib/shopify/client.ts)
User Authentication System
Implement user registration, sign in, and log out in the Shopify customer system, manage user session status and store access tokens locally.
Authentication context (src/context/auth-context.tsx)
Shopping Cart Management
Implement full shopping cart functionality, including adding products, modifying quantity, deleting products, shopping cart state synchronization, supporting local storage and Shopify backend sync.
Shopping cart context (src/context/cart-context.tsx)
Deploying to EdgeOne Pages
1. Add an Environment Variable
Enter the template page Shopify Ecommerce Starter, click
Deploy, and after logging in, enter the console deployment page to configure the following environment variables:SHOPIFY_STORE_DOMAIN: Fill in your Shopify store address.SHOPIFY_STOREFRONT_ACCESS_TOKEN: Fill in your Storefront API Access Token.SHOPIFY_API_VERSION: Fill in 2025-04 if no special requirement.
After configuration, click the "Start Deployment" button and wait for deployment to complete. The deployment successful interface will display. If the project deployment fails, you can modify the project based on
Build Logs and Build Summary info, or contact staff to resolve.
2. Test Payment
