Storefronts

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 (you can create an account with GitHub/GitLab). Create an account or log in to Netlify to get started.

Once you have logged in, you'll want to create a New site from Git. From there, log in with your git account, and select the appropriate repo.

We want to ensure that the Build command is set to yarn generate to avoid any errors when loading the Swell storefront repo.

⚠️

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 Advanced build settings 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 the 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 protocol https://.

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.

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