Install Method 1A: Create A New Site From Template

To speed up the process of designing and developing a forum, we recommend starting with a template. All of our templates can be adapted in the Webflow designer. If none of the templates are your cup of tea and you would prefer to build from the ground up, we recommend skipping to the next section of this tutorial about 'from scratch' installation.

Please note, this guide will show you how to create a new Webflow project from one of our templates If you would like to add a template to an existing Webflow project, we recommend following this other help article.

Clone a template

Before getting started, be sure to clone one of our templates. We recommend cloning the variation that is relevant to whichever membership tool you are planning to use for your community. It's not the end of the world if you clone the wrong one - there are certain features included with each template variation that are more friendly to certain membership tools.

After cloning the template from the Webflow showcase, you can get started installing Supersparks. Be sure to sign up to Supersparks and authorize our app to the newly cloned site.

Template Installation

After clicking 'Add Sparks' on the homepage, you will be directed to the select screen. Instead of selecting an individual feature for your site, instead click  'Start from template' at the top bar. Next, you will select the template that you would like to use, which will then start the template installation process.

1) Install Type

The first screen will ask you how you are using the template (new site or existing site). For creating a new site from a template, select the first option and continue.

2) Membership Tool

Next, select the membership tool you are planning to use with the template. You can always change this option later.

‍

3) Confirmation Screen

Before commencing the template installation, this screen will just highlight the different features that will be added to the template and what their purposes are. Here is a more detailed explanation on how sparks work.

4) Paste code

After confirming, our tool will enable these features on your template and redirect you to the final step for adding the template code.

Next, copy the code snippet, go to your Webflow site settings, paste the snippet into your site header and save, and publish your site. Below is a short video tutorial for this step:

5) Testing 💪

After publishing, your template should be active. You can then get started testing out all the different functionalities of your site on your live site.

Adapting your template

1) Design 🎨

Every aspect of the templates design can be adapted (layout, styling, interactions, etc). Be sure to avoid removing or renaming any classes that start with 'supersparks-'. These classes are essential for our app to function.

2) Settings

You can also adapt the settings for the different sparks added during the installation. On the homepage or template install screen, after clicking on any sparkwith the 'template' label you will be directed to the spark page where you can edit settings, add extra features not pre-installed with the template, and display additional membership fields with content.

Video tutorial

To help guide you through the rest of the process, check out the video tutorial below for implementing one of our forum templates.

⚠️ Please note, the installation steps for installing the template in Supersparks has changed since we recorded this video - be sure to refer to the steps above for the latest installation steps. ⚠️