Next.js Commerce with Shopify

To use Shopify as an Ecommerce Integration, you'll need a Shopify Partners account, where you'll be able to create and set up a new Shopify Store to use as your Commerce Backend.

What We'll Cover

Setting Up Your Store

Creating a Private App

Configuring Next.js Commerce for Shopify

Setting Up Your Store

Once you're logged into your Shopify Partners account, add a store.

Screen_Shot_2021-08-16_at_4.32.06_PM.png

Select the Development Store Type, and fill out the rest of the information with your own credentials. When you're done, click Save.

Screen_Shot_2021-08-16_at_4.33.20_PM.png

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.

Screen_Shot_2021-08-18_at_10.22.18_AM.png

Create a new App by clicking on Manage Private Apps.

Screen_Shot_2021-08-18_at_10.23.19_AM.png

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 .env.local.

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.

  1. Shopify Store Domain (e.g. agilitycms.myshopify.com)
  2. 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.

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.