Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takeshape/takeshape-starter-shopify-nextjs
A Shopify storefront built with TakeShape and Next.js
https://github.com/takeshape/takeshape-starter-shopify-nextjs
Last synced: 1 day ago
JSON representation
A Shopify storefront built with TakeShape and Next.js
- Host: GitHub
- URL: https://github.com/takeshape/takeshape-starter-shopify-nextjs
- Owner: takeshape
- Created: 2020-10-22T21:29:19.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-22T23:02:13.000Z (almost 3 years ago)
- Last Synced: 2023-03-02T21:26:13.698Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://shape-shop-next.vercel.app/
- Size: 304 KB
- Stars: 16
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.takeshape.io/)
# shape-shop-next — Get started with TakeShape, Shopify, and Next.js
This project shows off how connecting [Shopify](https://shopify.com) with [TakeShape](https://www.takeshape.io) opens up new possibilities for e-commerce on the [Jamstack](https://jamstack.org). 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](https://nextjs.org) and our [live demo](https://shape-shop-next.vercel.app/) is deployed to [Vercel](https://vercel.com).
To learn more and get started:
1. Explore the repo and copy it to your own GitHub account
2. Deploy this project to [TakeShape](https://app.takeshape.io/add-to-takeshape?repo=https://github.com/takeshape/patterns/tree/main/shopify-lookbook) and [Vercel](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftakeshape%2Ftakeshape-starter-shopify-nextjs&env=TAKESHAPE_TOKEN,TAKESHAPE_ENDPOINT&envDescription=Provide%20credentials%20for%20your%20TakeShape%20project&demo-title=Lookbook&demo-description=A%20statically-generated%20site%20using%20Next.js%2C%20showing%20off%20data%20from%20a%20TakeShape%20project%20connected%20to%20Shopify.&demo-url=https%3A%2F%2Fshape-shop-next.vercel.app%2F)
3. [Read our walkthrough](https://www.takeshape.io/articles/building-a-rich-e-commerce-experience-on-the-jamstack-with-takeshape-shopify-and-next-js/) to learn how we built this project from scratch
## Quickstart
1. First install the starter, then `cd` into it.
```console
$ 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](https://github.com/takeshape/takeshape-starter-shopify-nextjs/generate) 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.
```console
$ 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//v3/graphql`
5. Copy your storefront access token and domain
This example uses a [Shopify Private App](https://shopify.dev/docs/storefront-api/getting-started#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:
```inputrc
TAKESHAPE_ENDPOINT=
TAKESHAPE_TOKEN=
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_DOMAIN=.myshopify.com #doesn't include https://
```
6. Finally, start your local development site at `http://localhost:3000`
```console
$ npm run dev
```
7. To deploy this project as a live site, use Vercel's deploy button or install and run the `vercel` CLI.
[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftakeshape%2Ftakeshape-starter-shopify-nextjs&env=TAKESHAPE_TOKEN,TAKESHAPE_ENDPOINT&envDescription=Provide%20credentials%20for%20your%20TakeShape%20project&demo-title=Lookbook&demo-description=A%20statically-generated%20site%20using%20Next.js%2C%20showing%20off%20data%20from%20a%20TakeShape%20project%20connected%20to%20Shopify.&demo-url=https%3A%2F%2Fshape-shop-next.vercel.app%2F)
```console
$ 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](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- If you're using JetBrains, we recommend using [graphql-config](https://graphcool.github.io/graphql-config/).
First, install the TakeShape CLI, login, and run the `link` command in the project root:
```bash
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]](mailto:[email protected])