.svg){kind=icon}
Upvoting & Favoriting
How to add upvotes and favorites to Webflow
Now that you have signed up to Supersparks, authorized your site, and navigated to the editor screen for our upvoting & favoriting product, you can get started with the installation.
1. Copy & Paste Component
The beauty of this product is that it can be used for a wide-range of use cases. For example, upvoting, favorites, bookmarks, mark as watched, following topics, etc. As a result, there are a wide-range of use-case specific components to choose from that can be added to any CMS collection page.
After selecting, click on the copy button and paste it (using cmd + v or ctrl + v) into the static or CMS collection template page you would like to allow users to upvote / favorite. ⚠️ Please note, pasting components will not work on Safari ⚠️.
2. Paste Code Snippet
The second step is to copy and paste the Supersparks' script and paste it inside the <head> tag of your site settings. If you have previously added our script for another spark, you will not need to do this step again - your site only needs one copy of our script.
3. Configure settings
The next step in Supersparks, is to select the collection users are upvoting / favoriting. Once that is done, you can also select a number field in the collection if you wanted the number of upvotes / favorites to be synced into CMS item data - this unlocks the ability for users to sort items in a collection list by popularity / upvotes. Lastly, you can then select the membership tool you are using on your site - currently, only users of your site logged in through Memberstack, Outseta, or Webflow Memberships will be able to use this functionality.
4. Adapt design
Now the fun begins! In the Webflow Designer you can adapt the design of every aspect of the upvote / favorite component in the Webflow designer. Please note, classes or attributes starting with 'supersparks' or 'sparks' are required for the Supersparks app to function, so please avoid renaming or removing them.
5. Publish And Test
Publish your Webflow site and you can begin adding test reviews on your live site!
