Overview

The Next.js + Shopify + Builder.io starter kit is designed to provide users with everything they need to create a self-hosted Next.js project integrated with Builder.io for content management and Shopify for e-commerce functionality. This starter kit allows users to create a Next.js app that can be easily deployed to a hosting provider of their choice, pulling live collection and product information from Shopify. Builder.io is seamlessly integrated as a visual CMS to manage the content of the Next.js app.

Features

• Ultra high performance
• SEO optimized
• Themable
• Personalizable, including internationalization and A/B testing capabilities
• Builder.io Visual CMS integration

Installation

Before proceeding with the installation, make sure you have the following prerequisites installed:

• Node.js (version 12.0.0 or higher)
• npm
• Git

Also, ensure that you already have a Shopify account and store created.

1. Create an account for Builder.io:

   • Visit the Builder.io website and create an account.

2. Obtain your Builder.io private key:

   • Go to your organization settings page in Builder.io.
   • Create a private key and copy it for later use.

3. Clone the repository and initialize a Builder.io space:

   • Clone the starter project repository.
   • Create a new space for the project’s content.
   • Replace <private-key> with your private key and <space-name> with a meaningful name for your space.
   • If you’re only interested in using this starter for a landing page with Shopify, use a specific command for that.

4. Setup Shopify private app:

   • Create a custom app for your Shopify store.

5. Connect Builder.io to Shopify:

   • Configure the project to talk to Shopify.

6. Up and Running:

   • The project is now ready to be deployed.

Summary

The Next.js + Shopify + Builder.io starter kit provides users with an all-in-one solution for creating headless Shopify stores. It offers high performance, SEO optimization, themability, and personalization options. With Builder.io integrated as a visual CMS and Shopify as the e-commerce back office, users can easily manage their content and access live collection and product information. The installation process involves creating a Builder.io account, obtaining a private key, setting up a Shopify private app, and connecting Builder.io to Shopify. Once installed, users can deploy their Next.js app to their preferred hosting provider.