Shopify Integration
This article introduces how to build a high-performance website based on the Shopify Storefront API and the Next.js framework. With EdgeOne Pages templates, you can quickly complete the integration of Shopify and Next.js, and achieve outstanding website performance and user experience with global CDN acceleration.
Getting Started
EdgeOne Pages provides a complete Shopify + Nextjs template integration solution. You can click the deploy button in the template to quickly deploy.
This document introduces the integration procedure in two steps: configure Shopify and deploy to EdgeOne Pages. If you want to understand the specific implementation principles of this solution or require customized development based on your needs, proceed to read the detailed configuration steps below.
Shopify Configuration
Shopify provides the StoreFront API to implement Headless e-commerce. EdgeOne Pages requests user information, shopping cart information, etc., by calling the StoreFront API and displays them on the frontend.
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 a Headless Theme
Custom e-commerce websites implemented using the Storefront API have their own store domain names. You need to install the Shopify Headless Theme 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.
Fill in your site domain name in the settings interface, then click
Save to save, click Publish to publish:
The theme is now successfully activated.
4. Preparing Environment Variables
Click the top search box, manually input
App and sales channel setting, then 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 the configuration is complete, save. Enter the API Credentials tab, and install application to get
Storefront API Access Token.
Simultaneously in the top-left corner of the settings interface, your
store address can be obtained.
Get the store address and
Storefront API Access Token, then you can use API calls to access the Shopify store API.
Deploying to EdgeOne Pages
1. Adding an Environment Variable
Enter the Shopify Ecommerce Starter template page, click
Deploy, log in and enter the console deployment page, then configure the following environment variables:SHOPIFY_STORE_DOMAIN: Fill in your Shopify store addressSHOPIFY_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 the deployment to complete. The deployment successful interface will display. If the project fails during deployment, modify the project based on
Build Logs and Build Summary info, or contact staff to resolve the issue.
2. Test Payment
