Guides

Since Horizon is a standard Next.js application, deploying to Vercel is simple, especially when employing the Swell CLI (which we recommend using, by the way).

The Horizon Beta may overwrite Origin configurations, and we do not recommend installing it on an existing store where Origin has been customized. If you wish to still use Horizon, we suggest creating a new store instead.

Activate your Storefront

Since Horizon uses the Swell Editor to manage its content by default, the first step is to activate it. Visit the dashboard and under Storefront > Theme and click Activate storefront. If you don’t see this link, it means that your storefront is probably already active.

Activating the storefront

After a few minutes your storefront’s editor should be enabled and ready to populate.

Deploy

Now that your store is ready to communicate with an external Horizon deployment, navigate to Vercel to initiate the deployment process.

Deploying Horito Vercel

During this process, you will be asked to fill in the following environment variables:

  • NEXT_PUBLIC_SWELL_STORE_URL: Your store’s URL. Example: https://horizon-demo.swell.store
  • NEXT_PUBLIC_SWELL_PUBLIC_KEY This value refers to a Store's Public Key that can be found inside the Developer > API Keys route in the Admin Dashboard. Example: pk_u2VNxCYK32311eoOkV4bSHg09ikklJG1
  • SWELL_STORE_ID: The store's ID. It can be found at the top of the Developer > API Keys route in the Admin Dashboard. Example: horizon-demo
  • SWELL_SECRET_KEY: A Store's Secret Key. Can be found inside the Developer > API Keys route in the Admin Dashboard, and it's used to sync the store with the local editor configuration.
  • NEXT_PUBLIC_SWELL_EDITOR Set this to true only in development environments to enable editor live updates and Next.js’ Preview Mode. In production, this should be set to false.

Fill in these fields with the data located in the dashboard, under Developer > API keys. Afterward, follow the steps in the form to create a new repository and Vercel project.

Add your content

Great success! Horizon should now be deployed successfully on Vercel. Open the deployment link to interact with the demo pages and products.

The store won’t have much content out of the box. To add some, head to Storefront > Theme > Edit theme within the Swell dashboard. You will be redirected to the editor, where you can start adding page and content blocks.

The editor won’t be aware of your external deployment by default. To load your deployment inside of the preview window, append ?url={{VERCEL URL}} to the end of the page’s URL and hit Enter. The final URL should look something like this: https://{{YOUR STORE'S ID}}.swell.store/admin/store/editor?url={{VERCEL DEPLOYMENT URL}}

For an optimal experience, the Vercel deployment URL that you point to within the URL should have the environment variable NEXT_PUBLIC_SWELL_EDITOR set to true. This will communicate to Horizon that it should enable Next’s Preview Mode so that changes in the editor are immediately reflected, without requiring a page refresh.

Set the NEXT_PUBLIC_SWELL_EDITOR environment variable to true in development environments for immediate updates from the editor. Set it to false in production for quicker page loads by pre-generating pages wherever possible.

For more information on configuring the editor, follow this link. For details on how the editor data is being kept in sync, check out the Swell CLI docs.