Demo live at: headless.builders
- Performant by default
- SEO Ready
- Internationalization
- Responsive
- UI Components
- Theming
- Standardized Data Hooks
- Integrations - Integrate seamlessly with the most common ecommerce platforms.
npm install @builder.io/cli -g
git clone https://github.com/BuilderIO/nextjs-shopify.git
Signup for Builder.io, then go to your organization settings page, create a private key and copy it and supply it for [private-key] below. For [space-name] create a name for your space, such as "Next.js Shopify"
cd nextjs-shopify
builder create -k [private-key] -n [space-name] -d
This command when done it'll print your new space's public api key, copy it and add as the value for BUILDER_PUBLIC_KEY into the .env files (.env.production and .env.development)
BUILDER_PUBLIC_KEY=...
Now you have a space clone matching the spec defined in this repo, you'll need to connect it to your shopify store.
Create a private app in your Shpoify store. Be sure to check the box for Storefront API access.
Access your newly created space, by selecting it from the list of spaces in your organization, a prompt will ask you for all the requied details to connect shopify with builder and import your products/collections and register webhooks to listen to product/collection updates.
Fill in the required tokens and press Connect your store, this might take a couple of minutes depending on your store size.
Add your storefront api token to the .env files (.env.production and .env.development)
SHOPIFY_STOREFRONT_API_TOKEN=...
SHOPIFY_STORE_DOMAIN=...
npm install
npm run dev
It'll start a server at http://localhost:3000
Go to your new space settings and change the site url to your localhost http://localhost:3000 for site editing.
You can deploy this code anywhere you like - you can find many deployment options for Next.js here. For this project, we particularly recommend Vercel - it's as easy as signing up for Vercel and choosing your repo to deploy. See more info here, or use the one click deploy option below: