shape-shop-next — Get started with TakeShape, Shopify, and Next.js

This project shows off how connecting Shopify with TakeShape opens up new possibilities for e-commerce on the Jamstack. By connecting Shopify to your TakeShape project, you can get data for your products and content from a single GraphQL API. This sample project is built using Next.js and our live demo is deployed to Vercel.

To learn more and get started:

1. Explore the repo and copy it to your own GitHub account
2. Deploy this project to TakeShape and Vercel
3. Read our walkthrough to learn how we built this project from scratch

Quickstart

1. First install the starter, then cd into it.

   $ npx create-next-app --example https://github.com/takeshape/takeshape-starter-shopify-nextjs --use-npm

   If you prefer a manual approach, fork this template repository and create your own repo. After you git clone it to your local computer, run npm install and then continue on with these steps.

2. Next, set up your TakeShape project. Use the deploy button or the package's setup script.

   

   $ npm run setup

3. In your new TakeShape project, connect to your Shopify account.

   • Go to the Schema tab, then click "Connect Service".
   • Provide the URL of your Shopify store, then click save. You'll be taken through an OAuth flow to authorize the TakeShape app with your Shopify account.

4. Create an API Key with Dev permissions in your TakeShape project.

   • Go to the API tab, then find API Keys in the navigation sidebar. Select "New API Key". Copy your new API key to a secure text document.
   • Copy and save the API endpoint provided on the API Keys page. It looks like this: https://api.takeshape.io/project/<your project ID>/v3/graphql

5. Copy your storefront access token and domain

This example uses a Shopify Private App. You'll need the private app's storefront access token and the store's domain (in the format your-shop-domain.myshopify.com)

5. Back in your Next.js project, create a .env.local file in your project with following lines:

   TAKESHAPE_ENDPOINT=<takeshape-api-endpoint-you-copied>
   TAKESHAPE_TOKEN=<takeshape-api-key-you-copied>
   NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=<storefront-access-token-you-copied>
   NEXT_PUBLIC_SHOPIFY_DOMAIN=<your-domain>.myshopify.com #doesn't include https://

6. Finally, start your local development site at http://localhost:3000

   $ npm run dev

7. To deploy this project as a live site, use Vercel's deploy button or install and run the vercel CLI.

   

   $ npm install -G vercel

Add GraphQL API support

You can install a GraphQL extension for your code editor and use it with your TakeShape project's GraphQL API.

• If you're using VSCode, we recommend using the official GraphQL extension.
• If you're using JetBrains, we recommend using graphql-config.

First, install the TakeShape CLI, login, and run the link command in the project root:

npm i -g @takeshape/cli
takeshape login
takeshape link

This will download a .graphql file with your project's types and queries. This will power features like validation, autocomplete suggestions, and built-in definitions.

If you ever need to update your schema, you can run takeshape schema to download an updated version.

Reach out

If we can make your life easier we want to hear from you at [email protected]