Building an Ecommerce Platform with Shopify
This article describes how to quickly build a high-performance, easy-to-maintain e-commerce website based on Makers' templates, implementing common dynamic features such as login, shopping cart, and order, to facilitate your rapid creation of your own e-commerce website.
Overview
Shopify is a globally leading e-commerce platform with a comprehensive e-commerce ecosystem. Through the Shopify Storefront API, developers can build fully customized shopping experiences. Next.js is a full-stack framework based on React, supporting server-side rendering and static generation. The EdgeOne Makers Shopify Template fully leverages the technical advantages of both Shopify and Next.js, providing developers with a complete solution for building a headless e-commerce platform and achieving a perfect fusion of technology and business.
Main Features and Advantages:
Excellent performance: After statically generated pages are deployed to EdgeOne Makers, they can leverage CDN for fast loading.
Development efficiency: Based on Shopify's mature e-commerce backend, no need to repeat development of core features like payment, inventory, and order.
User experience: Fully custom front-end interface, not restricted by Shopify themes
SEO Friendly: Pre-rendered content is conducive to search engine indexing
Scenarios
1. Small and Medium-Sized E-Commerce Enterprises
Small and medium-sized e-commerce enterprises have limited funds and technology. Use our templates to build an ecommerce platform with no need to hire a professional development team. Shopify's low-threshold operation helps employees quickly start content management and store operations, providing an excellent shopping experience within a limited budget and helping businesses stand out in intense competition.
2. Brand E-Commerce Enterprise
For businesses that focus on brand image and user experience, standard Shopify themes may not meet personalized needs. Use our headless ecommerce solution to fully customize UI design and interaction experience while retaining Shopify's powerful backend functionality, helping brands establish a unique advantage in intense competition.
Configuring Shopify
Shopify provides the StoreFront API implementation to enable Headless e-commerce. EdgeOne Makers calls the StoreFront API to request user information, shopping cart information, and displays 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's admin backend.
2. Adding a Product
Add your product under
Products.
3. Installing a Headless Theme
A custom e-commerce website implemented using the Storefront API will have its own store domain name. Shopify Headless Theme needs to be installed to connect Shopify's built-in webpages 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 the App and sales channel setting at the bottom.
Click
Develop apps in the top right corner.
Initial entry requires
Create a legacy custom app feature.
Click create app, input the name and 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, and install the application to get
Storefront API Access Token.
Simultaneously, your
store address can be obtained in the top-left corner of the settings interface.
Get the store address and
Storefront API Access Token, then you can use API calls to access the Shopify store API.Deploying to
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 success interface will display. If the project fails during deployment, you can modify the project based on
Build Logs and Build Summary info, or contact staff to resolve the issue.2. Testing Payment
