{"id":21825104,"url":"https://github.com/sacred-g/shopify-ecommerce","last_synced_at":"2026-04-16T07:33:50.874Z","repository":{"id":250378251,"uuid":"817274443","full_name":"Sacred-G/shopify-ecommerce","owner":"Sacred-G","description":"A complete shopify ecommerce store built with nextjs powered by builder.io visual CMS","archived":false,"fork":false,"pushed_at":"2024-06-19T11:19:11.000Z","size":2281,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T08:14:21.593Z","etag":null,"topics":["builder","builderio","cms","ecommerce","netlify","netlify-deployment","nextjs13","nodejs","seo-optimization","shopify","vercel-deployment","visual"],"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/Sacred-G.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,"publiccode":null,"codemeta":null}},"created_at":"2024-06-19T11:19:05.000Z","updated_at":"2024-07-26T21:09:56.000Z","dependencies_parsed_at":"2024-07-26T23:26:52.845Z","dependency_job_id":null,"html_url":"https://github.com/Sacred-G/shopify-ecommerce","commit_stats":null,"previous_names":["sacred-g/shopify-ecommerce"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sacred-G%2Fshopify-ecommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sacred-G%2Fshopify-ecommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sacred-G%2Fshopify-ecommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sacred-G%2Fshopify-ecommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sacred-G","download_url":"https://codeload.github.com/Sacred-G/shopify-ecommerce/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795270,"owners_count":20511519,"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":["builder","builderio","cms","ecommerce","netlify","netlify-deployment","nextjs13","nodejs","seo-optimization","shopify","vercel-deployment","visual"],"created_at":"2024-11-27T18:01:06.440Z","updated_at":"2026-04-16T07:33:50.847Z","avatar_url":"https://github.com/Sacred-G.png","language":"TypeScript","funding_links":[],"categories":[],"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%2Fsacred-g%2Fshopify-ecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsacred-g%2Fshopify-ecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsacred-g%2Fshopify-ecommerce/lists"}