Storefronts

Hosting a Swell storefront theme is not tied to our platform. While we make it easy to one-click deploy our themes to Swell and a visual editor, we understand that you may have another hosting provider in mind. All of our storefront themes at Swell are compatible with many leading hosting providers and offer the flexibility to choose the platform best suited for your needs.

⚠️

While these guides will work for hosting any git-based storefront, we will be using dedicated Swell themes within the examples.

When creating your store, you will have the option of using and installing Swell themes in your dashboard under your Storefronts section. Installing the theme this way will host it right on Swell—allowing you to utilize Swell's visual editor for customizing your storefront theme. This is by far the simplest solution for hosting a Swell storefront theme, but it is not the only option.

The first step in setting up your storefront host will be packaging up your storefront theme. From there, you'll be able to deploy it to your desired hosting platform, but we'll get to that a bit later.

It is important to note, that we periodically update our Swell themes' features and performance. For storefronts hosted on Swell, these updates are pushed automatically, but for storefronts hosted elsewhere, these updates will not be received.

⚠️

Hosting your Swell storefront through a different platform will prevent you from using the visual editor within the Swell dashboard for storefront customization. All changes will need to be made on the backend.

To host your Swell storefront theme elsewhere, we'll first need to get you set up with a public repo and clone the storefront. We recommend using GitHub for this—as it is compatible with all the hosting platforms we will be looking at later on.

👉

You can use alternatives like GitLab, but you may need to confirm its compatibility with the hosting platform of your choice before setting up your repo.

For the sake of an example, we'll use our OG theme, Origin. Below is a list of our storefront theme repositories, so the choice is yours. For an overview of each of the themes, you can find additional information about storefronts here.

Once you've decided on the theme, let's clone the project to a new private GitHub repo. Navigate to the storefront repo of your choice and clone it through your preferred method. Refer to GitHub's repo cloning guide for more information.

Clone storefront theme repo
Git cloning methods
GitHub CLI: gh repo clone swellstores/origin-theme

HTTPS: git clone https://github.com/swellstores/origin-theme.git

Once cloned successfully, you should see all the storefront files in your newly created private repo. We can now use this repo to deploy our storefront in any of the hosting services listed below. We'll briefly look at some considerations for each platform before jumping into the walk-through for getting the Swell storefront running on each platform.

For Swell's storefront themes, ensure that the build command is set to yarn generate. Otherwise, the package will not deploy correctly—no one wants that.

⚠️

For these configurations, be sure to consult documentation relating to your specific storefront. The following build command is explicitly for the Swell themes.

For each host platform, you'll need to define several build variables before deployment. Some variables may change depending on the provider, but generally, they should remain the same. Please refer to the specific hosting documentation for each platform below for a more detailed overview of each specific platform's needs. The common variables are listed below:

  • SWELL_STORE_ID: this is your store's subdomain and client ID on Swell. Your Swell store id is found on the top of your API keys section in the Swell dashboard.
    For example, https://storefront-demo.swell.store → would use storefront-demo.
  • SWELL_PUBLIC_KEY: One of your store's public API keys—found in the Developer settings within your dashboard.
  • SWELL_STORE_URL: Your store's URL. This is for redirect purposes, so if you want to use a custom domain—this is where you'd put it. Note: include the https://.

After gathering the above information for entry on your hosting platform, you can move over to deployment. Check below for additional information on hosting services or specifically hosting a Swell storefront theme on one of the services.

Storefronts on Cloudflare Pages

Like Netlify and Vercel, Cloudflare Pages is another JAMstack oriented deployment platform with room for advanced collaboration on projects through unlimited seats.

Learn More
Storefronts on Heroku

A seasoned veteran in the cloud hosting space, Heroku is renowned for its ease of use, scalability, and flexibility in building web apps.

Learn More
Storefronts on Netlify

Offering hosting and serverless backend services, Netlify specializes in automating the deployment of static websites.

Learn More
Storefronts on Vercel

Built and designed with the developer experience (DX) and performance in mind, Vercel is a serverless backend hosting platform for web applications.

Learn More