What We'll Cover
Setting Up Your Store
Once you're logged into your Shopify Partners account, add a store.
Select the Development Store Type, and fill out the rest of the information with your own credentials. When you're done, click Save.
Creating a Private App
Next, you'll want to create a Private App that will give us the keys we need to authenticate the Next.js Commerce site with Shopify.
In the left navigation, click on Apps.
Create a new App by clicking on Manage Private Apps.
Fill out your App details, and allow the app to access your storefront data using the Storefront API.
Once you click save, you should now have the credentials you need to authenticate your Shopify Store with Next.js Commerce.
Configuring Next.js Commerce for Shopify
If running the Next.js Commerce site locally, you'll want to open your Next.js Commerce project and edit the following Environment Variables in the
If your Next.js Commerce site is deployed to Vercel, you'll want to edit the Environment Variables under the Settings of your deployed site.
- Shopify Store Domain (e.g. agilitycms.myshopify.com)
- Shopify Storefront Access Token
COMMERCE_PROVIDER=shopify NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=agilitycms.myshopify.com NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxx
You are now ready to start sourcing products from your Shopify store into your Next.js Commerce site.