Storefronts V2
Swell offers a wide variety of APIs to build headless applications with. Check out Origin and Horizon apps for complete examples, or one of the 3rd-party integrations listed in this guide. Alternately, get started from scratch using the framework of your choice, and explore our Backend and Frontend API references to learn what's possible.
A headless approach may be preferred to integrate Swell into an existing site, or with a proprietary technology stack, although we recommend exploring Themes and Storefront apps as the primary choice for new stores.
Below is a list of popular web frameworks for building headless applications. Aside from these, Swell's APIs are based on HTTP/REST standards, which means you can use any client-side or server-side programming language you prefer.
Next.js is the leading React framework. We're currently developing a brand-new, subscription-focused storefront with Next.js and React—showcasing the power of a truly headless ecommerce backend that's combined with lightning-fast frameworks.
We've also released two developer starter kits built with Next.js, the Swell Next.js starter kit and the Swell-builder starter-kit, so you can get started building with Swell and Next.js.
Nuxt is a popular, modern web development framework built with Vue.js. Its balance of performance and approachability is a core reason we chose it to build our first storefront theme. So whether you're looking to update your Swell-hosted storefront with our built-in editor or craft the newest ecommerce experience, you get the latest JAMstack experience with Swell and Nuxt.
Vue is compatible with the Swell.js SDK—learn more about the Swell.js SDK with our Frontend API.
Looking for a frontend solution using React? Pair React with our Swell.js SDK in order to build out your storefront. Learn more with our Frontend API.
Along with our Swell.js compatibility, there is a community-based source plugin for Swell and Gatbsy.
We're constantly adding new libraries and developer kits. Even if you don't see your preferred technology listed above, rest assured that any Javascript framework can be used using our Swell.js SDK. This includes, but is not limited to the following frameworks:
- Angular
- Javascript
- Svelte
Next.js Commerce features everything developers need to start creating their storefront. Next.js Commerce comes fully styled with all UI elements for core ecommerce functionality built-in, like carts and product detail pages. It also supports a number of features for performance optimization. For new projects, use Vercel's clone and deploy feature or it can be implemented manually.
Clone and install
Visit this link. In the new window, you will name and create the Git repository to be linked to your project. Add the required environment variables. For the SWELL_REVALIDATION_SECRET, we recommend using a random generated key to generate a key. You can find your SWELL_STORE_ID SWELL_PUBLIC_KEY in the admin dashboard setting at Developer > API keys.
Once you make it through the setup flow, you're all set! Your Next.js Commerce starter kit is now connected to your Swell store and ready for development. You can clone the repository from your GitHub / GitLab / Bitbucket account.
Manual installation
To install this app manually, we'll want to clone the Verswell Commerce repo*—*this can also be found and cloned from your Vercel dashboard in the templates section after creating a new project if you are hosting with Vercel.
Configure the environment
Once you have cloned the project, you will need to create a .env file based on the .env.example provided within the project. The file requires your Swell Store ID and your public API key—both of which can be found in the Swell dashboard under Developer > API Keys.
In the .env, provide your Swell Store ID and public API key in the following format:
COMPANY_NAME="Vercel Inc."
TWITTER_CREATOR="@vercel"
TWITTER_SITE="<https://nextjs.org/commerce>"
SITE_NAME="Next.js Commerce"
SWELL_PUBLIC_KEY=
SWELL_STORE_ID=
SWELL_REVALIDATION_SECRET=This information can also be accessed within the Verswell Commerce readme.
Deployment
With the .env file configured with your Swell store information, you are ready to deploy your storefront. Fill out any additional settings or configurations, and you're ready to deploy on your hosting provider of choice.
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>" --debugLastly, 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.