Creating a Shopify Partners Store

The first thing you will need is a Shopify Partners Account. It is completely free to sign up. The Shopify Partners account will allow us to create as many development stores as we need for free, which is exactly what we want.

info

You do not want to sign up for the Shopify Trial found on their home page.

Once you have created your account, you should land on the Shopify Partners dashboard.

Screen Shot 2021-12-16 at 9.11.22 AM.png

Click on the Stores link in the left sidebar and then click on the "Add store" button.

info

You will need to confirm your email address before you are able to create a store so make sure you do that first

Screen Shot 2021-12-16 at 9.12.22 AM.png

Click on "Development store"

Screen Shot 2021-12-16 at 9.13.49 AM.png

Then proceed to fill out the "Login information" section.

  • Your store will need to have a unique url
  • We won't need the password for this tutorial, but you have to add one to create your store. It doesn't have to be anything fancy or complex as this is just a demo store.

Screen Shot 2021-12-16 at 9.14.40 AM.png

Leave "Developer preview" unchecked as we do not need any unreleased features for this tutorial. Also make sure to fill out a real address for your store. I simply used my home address.

blurred-address.png

For the "Store purpose," check "I'm just playing around" and then click on the purple save button.

Screen Shot 2021-12-16 at 9.21.15 AM.png

Shopify will then create you store and take you to your store's dashboard.

Screen Shot 2021-12-16 at 9.25.15 AM.png

Adding Products

Since we are creating a developer swag store, we are going to need some swag for our store. I will be using some images I found from Redbubble.com but feel free to use whatever you would like. I will only be adding three products, but you can certainly add more if you would like.

Once you have the images of your products, click on the "Add product" button on your store's dashboard.

Screen Shot 2021-12-16 at 9.29.38 AM.png

Make sure to mark the "Product status" as active.

Here is a screenshot of the entire "Add product" screen with all of the information filled out. If you don't know what all of these fields are, just fill them out as I have in this screenshot.

screencapture-nextjs-ecommerce-demo-2-myshopify-admin-products-new-2022-05-09-10_20_06.png

When all of the fields are filled, click Save.

Repeat this for all of your products.

Once all of your products have been added, you should see something like this on the product screen. You can find the products page by clicking on the "Products" link in the left sidebar.

Screen Shot 2022-05-09 at 10.24.07 AM.png

Make sure that all of your products have a Status of "Active."

Storefront API

Since we will be using a custom Next.js frontend for our shop, we need to install the Storefront API from Shopify within our store.

Click on "Apps" in the left side bar.

screencapture-nextjs-ecommerce-demo-2-myshopify-admin-apps-2022-05-09-10_25_47.png

Click on the "Develop apps for your store" button.

Screen Shot 2021-12-16 at 9.42.29 AM.png

Then click the "Allow custom app development" button.

Screen Shot 2022-05-09 at 10.26.40 AM.png

Screen Shot 2022-05-09 at 10.27.24 AM.png

Then click on the "Create an app" button.

Screen Shot 2022-05-09 at 10.27.57 AM.png

Give your app a name and click “Create app”

Screen Shot 2022-05-09 at 10.28.17 AM.png

Next, click on the “Configure Storefront API scopes” button.

Screen Shot 2022-05-09 at 10.30.54 AM.png

For our demo I am going to give our full access, so make sure to check all of the checkboxes. I ignored the “iOS & Android Buy SDK” options.

screencapture-nextjs-ecommerce-demo-2-myshopify-admin-apps-development-6894609-configuration-storefront-api-integration-2022-05-09-10_31_55.png

Then click on Save

Next, you need to click on the “API credentials” tab. Then click “Install app.”

Screen Shot 2022-05-09 at 10.34.23 AM.png

Screen Shot 2022-05-09 at 10.34.42 AM.png

You will be given your Storefront API access token.

Screen Shot 2022-05-09 at 10.35.20 AM.png

We will need to use this API token in order to have our Next.js application retrieve our products from Shopify.