Builder.io is a visual interface that uses your Swell data when creating your storefront. Along with its powerful visual editor, Builder.io also offers analytics tools to inform your design decisions. This is a great no-code storefront option.

Using the Starter Kit

In this integration, you'll be using the Builder CLI and the Swell-Builder starter kit to generate a new Next.js application connected to your Builder dashboard and Swell ecommerce backend. For detailed setup instructions, please visit https://github.com/swellstores/nextjs-builder.

First, you'll want to set up your Builder account and create an organization within your account. Have your Builder private key handy for the next step—this is accessible from the organization settings page.

Next, go ahead and clone the starter kit repository into a local directory. Using the Builder CLI, create a new space using the private key.

For this integration, you will need to create an account and establish the connection between your Swell store and your Builder.io account. 

git clone https://github.com/swellstores/nextjs-builder.git
cd nextjs-builder

npm install --global "@builder.io/cli"

builder create --key "<private-key>" --name "<space-name>" --debug

Lastly, copy and paste your Builder public key generated in the CLI output along with your Swell public key and your store id into the repo's .env file.

That's it! You're now ready to begin development using the interactive Builder.io dashboard with your new space, custom models, and starter kit. You can deploy to any hosting service, though we recommend using Vercel's handy CLI for deployment.