After cloning the storefront to your private git repo, you can head over to Netlify to complete the remainder of the configuration. If you don't already have a Netlify account, now is the time to create one. To create an account, click here—or log in to Cloudflare Pages to get started.

Creating your site

Once you have logged in, you should be prompted to link your GitHub account and select your repositories. If you are starting from a new Cloudflare Pages account, you will begin on the project creation flow—if you are starting from the dashboard, click to create a project. From there, log in with your git account, and select your storefront repo.

Adjusting the build settings

For Swell storefront themes, want to ensure that the:

  • Build command is set to yarn generate.
  • Build output directory is set to dist.

The above settings are specific to Swell themes. Consult your storefront documentation for additional information.

Additionally, there are a few variables we will need to add under the Environmental variables section to establish the connection between your Swell backend and the frontend host:

  • 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://.

Deploy

Now that we've set the configurations, we can go ahead and deploy the site. This may take a bit of time, depending on how much data is within your store. Starting from scratch, it took us anywhere from 3 to 5 minutes to get the site deployed. If the deployment stalls or you encounter a network issue during your deployment attempt, wait a few minutes before trying again.

Check out your live site

After the deployment process, you'll be able to access your shiny, new storefront from the Cloudflare Pages dashboard. Here, you can view the external-facing site, configure your domain and website settings, and start making sales. When making any changes to your site, simply push them from your git repo to update your site on Cloudflare Pages.