{"id":13479269,"url":"https://github.com/BuilderIO/nextjs-shopify","last_synced_at":"2025-03-27T09:31:06.992Z","repository":{"id":40535424,"uuid":"333993793","full_name":"BuilderIO/nextjs-shopify","owner":"BuilderIO","description":"The ultimate starter for headless Shopify stores","archived":false,"fork":false,"pushed_at":"2024-04-25T23:23:47.000Z","size":4323,"stargazers_count":432,"open_issues_count":9,"forks_count":211,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-08-01T16:55:47.879Z","etag":null,"topics":["drag-and-drop","headless","nextjs","nextjs-starter","react"],"latest_commit_sha":null,"homepage":"https://headless.builders","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BuilderIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/ROADMAP.md","authors":null,"dei":null}},"created_at":"2021-01-29T00:33:03.000Z","updated_at":"2024-07-30T19:11:41.000Z","dependencies_parsed_at":"2024-04-26T00:39:29.596Z","dependency_job_id":null,"html_url":"https://github.com/BuilderIO/nextjs-shopify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fnextjs-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fnextjs-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fnextjs-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fnextjs-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BuilderIO","download_url":"https://codeload.github.com/BuilderIO/nextjs-shopify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222222279,"owners_count":16951417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","headless","nextjs","nextjs-starter","react"],"created_at":"2024-07-31T16:02:12.509Z","updated_at":"2024-10-30T12:31:48.348Z","avatar_url":"https://github.com/BuilderIO.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Nextjs Templates","E Commerce"],"sub_categories":[],"readme":"# Next.js + Shopify + Builder.io example\n\nDemo live at: [headless.builders](https://headless.builders/)\n\n## Goals and Features\n\n- Ultra high performance\n- SEO optimized\n- Themable\n- Personalizable (internationalization, a/b testing, etc)\n- Builder.io Visual CMS integrated\n\n## Video walkthrough\n\nLearn how to get started with this Builder + Next.js + Shopify example with this step by step video guide here:\n\n\u003ca href=\"https://www.youtube.com/watch?v=uIHqPu2t1O0\"\u003e\n  \u003cimg width=\"400\" src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc161ccb26f6446869cba865d014c7caf\" /\u003e  \n\u003c/a\u003e\n\n## Table of contents\n\n- [Getting Started](#getting-started)\n  - [1: Create an account for Builder.io](#1-create-an-account-for-builderio)\n  - [2: Your Builder.io private key](#2-your-builderio-private-key)\n  - [3: Clone this repository and initialize a Builder.io space](#3-clone-this-repository-and-initialize-a-builderio-space)\n  - [4. Shopify private app](#4-shopify-private-app)\n  - [5. Connecting Builder to Shopify](#5-connecting-builder-to-shopify)\n  - [6. Configure the project to talk to Shopify](#6-configure-the-project-to-talk-to-shopify)\n  - [7. Up and Running!](#7-up-and-running)\n- [Deploy](#deploy)\n\n\u003c!-- markdown-toc end --\u003e\n\n## Getting Started\n\n**Pre-requisites**\n\nThis guide will assume that you have the following software installed:\n\n- nodejs (\u003e=12.0.0)\n- npm\n- git\n\nYou should already have a [Shopify](https://www.shopify.com/online-store) account and store created before starting as well.\n\n**Introduction**\n\nAfter following this guide you will have\n\n- A Next.js app, ready to deploy to a hosting provider of your choice\n- Pulling live collection and product information from Shopify\n- Powered by the Builder.io visual CMS\n\n### 1: Create an account for Builder.io\n\nBefore we start, head over to Builder.io and [create an account](https://builder.io/signup).\n\n### 2: Your Builder.io private key\n\nHead over to your [organization settings page](https://builder.io/account/organization?root=true) and create a\nprivate key, copy the key for the next step.\n\n- Visit the [organization settings page](https://builder.io/account/organization?root=true), or select\n  an organization from the list\n\n![organizations drop down list](./docs/images/builder-io-organizations.png)\n\n- Click \"Account\" from the left hand sidebar\n- Click the edit icon for the \"Private keys\" row\n- Copy the value of the auto-generated key, or create a new one with a name that's meaningful to you\n\n![Example of how to get your private key](./docs/images/private-key-flow.png)\n\n### 3: Clone this repository and initialize a Builder.io space\n\nNext, we'll create a copy of the starter project, and create a new\n[space](https://www.builder.io/c/docs/spaces) for it's content to live\nin.\n\nIn the example below, replace `\u003cprivate-key\u003e` with the key you copied\nin the previous step, and change `\u003cspace-name\u003e` to something that's\nmeaningful to you -- don't worry, you can change it later!\n\n```\ngit clone https://github.com/BuilderIO/nextjs-shopify.git\ncd nextjs-shopify\n\nunzip builder\n\nnpm install --global \"@builder.io/cli\"\n\nbuilder create --key \"\u003cprivate-key\u003e\" --name \"\u003cspace-name\u003e\" --debug\n```\n\nNote:\nif you're only interested in using this starter for a landing page with Shopify use this command instead:\n\n```\nunzip builder-landing-page-only\nbuilder create --key \"\u003cprivate-key\u003e\" --name \"\u003cspace-name\u003e\" --input builder-landing-page-only --debug\n```\n\nIf this was a success you should be greeted with a message that\nincludes a public API key for your newly minted Builder.io space.\n\n_Note: This command will also publish some starter builder.io cms\ncontent from the ./builder directory to your new space when it's\ncreated._\n\n```bash\n  ____            _   _       _                     _                    _   _\n| __ )   _   _  (_) | |   __| |   ___   _ __      (_)   ___       ___  | | (_)\n|  _ \\  | | | | | | | |  / _` |  / _ \\ | '__|     | |  / _ \\     / __| | | | |\n| |_) | | |_| | | | | | | (_| | |  __/ | |     _  | | | (_) |   | (__  | | | |\n|____/   \\__,_| |_| |_|  \\__,_|  \\___| |_|    (_) |_|  \\___/     \\___| |_| |_|\n\n|████████████████████████████████████████| shopify-product | 0/0\n|████████████████████████████████████████| product-page: writing generic-template.json | 1/1\n|████████████████████████████████████████| shopify-collection | 0/0\n|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1\n|████████████████████████████████████████| page: writing homepage.json | 2/2\n\n\nYour new space \"next.js shopify starter\" public API Key: 012345abcdef0123456789abcdef0123\n```\n\nCopy the public API key (\"012345abcdef0123456789abcdef0123\" in the example above) for the next step.\n\nThis starter project uses dotenv files to configure environment variables.\nOpen the files [.env.development](./.env.development) and\n[.env.production](./.env.production) in your favorite text editor, and\nset the value of `BUILDER_PUBLIC_KEY` to the public key you just copied.\nYou can ignore the other variables for now, we'll set them later.\n\n```diff\n+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123\n- BUILDER_PUBLIC_KEY=\nSHOPIFY_STOREFRONT_API_TOKEN=\nSHOPIFY_STORE_DOMAIN=\n```\n\n### 4. Shopify Custom App\n\nCreate a [custom app](https://help.shopify.com/en/manual/apps/custom-apps) for your Shopify store. If you don't have a Shopify store already, you can create a [development store](https://help.shopify.com/en/partners/dashboard/managing-stores/development-stores).\n\nWhen creating the private app you'll have to set a number of permissions so that builder can retrieve your Shopify inventory. For this press on `Storefront API` in the configuration tab and choose all the following permissions:\n\n![List of required permissions](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F24ebad91e8774a7e814487432391f4c6)\n\nThen in the `API Credentials` tab, click `install`:\n\n![installing custom app](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ffd00307e14ed40babe2d569d7a297e81)\n\nAnd copy the generated access token.\n\n### 5. Connecting Builder to Shopify\n\nAccess your newly created space by selecting it from the [list of spaces](https://builder.io/spaces?root=true)\nin your organization.\n\nYou should be greeted by a modal asking for various your storefront Access toke (from preview step) and your store domain, this will allow Builder.io to communicate with your store API:\n\n![Example of where the Shopify API keys map to Builder settings](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F30b68ab3caf544ca92a06f073bb27b55)\n\nFill in the required keys and press \"Connect your Shopify Custom App\"!\n\n### 6. Configure the project to talk to Shopify\n\nOpen up [.env.development](./.env.development) and [.env.production](./.env.production) again,\nbut this time set the other two Shopify keys.\n\n```diff\nBUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123\n+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd\n- SHOPIFY_STOREFRONT_API_TOKEN=\n+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com\n- SHOPIFY_STORE_DOMAIN=\n```\n\n### 7. Up and Running!\n\nThe hard part is over, all you have to do is start up the project now.\n\n```bash\nnpm install\nnpm run dev\n```\n\nThis will start a server at `http://localhost:3000`.\n\n### 8. Start building\n\nNow that we have everything setup, start building and publishing pages on builder.io, for a demo on building something similar to the [demo homepage](https://headless.builders), follow the steps in this [short video](https://www.loom.com/share/9b947acbbf714ee3ac6c319c130cdb85)\n\n## Deployment Options\n\nYou can deploy this code anywhere you like - you can find many deployment options for Next.js [here](https://nextjs.org/docs/deployment). The following options support one click installs and are super easy to start with:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fbuilderio%2Fnextjs-shopify)\n\n- Vercel: for more information check [Vercel docs on Next.js deployments](https://vercel.com/docs/next.js/overview) Or try the one click install by clicking the button above.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/BuilderIO/nextjs-shopify)\n\n- Netlify: For more information check [Netlify docs on Next.js deployments](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) Or try the one click install by clicking the button above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBuilderIO%2Fnextjs-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBuilderIO%2Fnextjs-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBuilderIO%2Fnextjs-shopify/lists"}