Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takeshape/takeshape-starter-shopify-gatsby
This starter shows off how to use Gatsby, TakeShape, and Shopify to create a rich e-commerce experience on the Jamstack
https://github.com/takeshape/takeshape-starter-shopify-gatsby
Last synced: about 2 months ago
JSON representation
This starter shows off how to use Gatsby, TakeShape, and Shopify to create a rich e-commerce experience on the Jamstack
- Host: GitHub
- URL: https://github.com/takeshape/takeshape-starter-shopify-gatsby
- Owner: takeshape
- License: 0bsd
- Created: 2020-11-10T23:14:33.000Z (about 4 years ago)
- Default Branch: trunk
- Last Pushed: 2021-09-13T21:39:24.000Z (over 3 years ago)
- Last Synced: 2023-03-02T21:26:13.540Z (almost 2 years ago)
- Language: JavaScript
- Homepage: https://shape-shopify-gatsby.netlify.app/
- Size: 521 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.takeshape.io/)
# shape-shop-gatsby — Get started with TakeShape, Shopify, and Gatsby.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 [Gatsby.js](https://gatsbyjs.org) and our [live demo](https://shape-shop-gatsby.netlify.app/) is deployed to [Netlify](https://netlify.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 [Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/takeshape/takeshape-starter-shopify-gatsby)
3. [Read our walkthrough](https://www.takeshape.io/articles/building-a-rich-e-commerce-experience-on-the-jamstack-with-takeshape-shopify-and-gatsby-js/) to learn how we built this project from scratch
## Quickstart
Before getting started, make sure you have the [Gatsby CLI](https://www.gatsbyjs.com/docs/gatsby-cli/) installed.
```console
$ npm install -g gatsby
```
1. First install the starter, then `cd` into it.
```console
$ gatsby new shape-shop-gatsby https://github.com/takeshape/takeshape-starter-shopify-gatsby
```
_If you prefer a manual approach, [fork this template repository](https://github.com/takeshape/takeshape-starter-shopify-gatsby/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.
or
```console
$ npm run setup
```
3. In your new TakeShape project, connect to your Shopify account.
- Click on the Schema tab in your project, then select "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.
- Click on the API tab in your project, then select API Keys in the sidebar nav. Select "New API Key". Save your new API key to a secure text file.
- Copy and save the API endpoint provided on the API Keys page. It looks like this:
`https://api.takeshape.io/project//v3/graphql`
5. Back in your Next.js project, create a `.env` file in your project with following lines:
```inputrc
TAKESHAPE_PROJECT=
TAKESHAPE_TOKEN=
```
6. Finally, start your local development site at `http://localhost:8000`
```console
$ npm run develop
```
7. To deploy this project as a live site, use Netlify's deploy button or install and run the [Netlify CLI](https://docs.netlify.com/cli/get-started/).
[](https://app.netlify.com/start/deploy?repository=https://github.com/takeshape/takeshape-starter-shopify-gatsby)
```console
$ npm install -g netlify-cli
```
## Reach out
If we can make your life easier we want to hear from you at
[[email protected]](mailto:[email protected])