FastComments.com

Add Comments to BigCommerce Sites

With FastComments we can easily add live commenting to any BigCommerce site.

The instructions below are for a blog built on BigCommerce, but they would work well for any aspect of BigCommerce.

Note that this tutorial requires a FastComments account. It's recommended that you sign up first and then come back here. You can create an account here.

Step One: Prepare Your Theme Internal Link

First, let's create a custom theme that we're going to edit. If you already have a custom theme set up, you can skip this step.

To do this, we will go to Storefront and then Themes.

Select Storefront
Select Storefront
Select Themes
Select Themes

For this tutorial, we'll use the default theme, but the instructions are the same for all themes.

Next, we are not going to click Customize. Instead, click Advanced and Make a Copy.

Make a Copy
Make a Copy

Confirm copying the theme:

Save The Copy
Save The Copy

Once it's complete, you should see your theme listed under Themes at the bottom of the page, like this.

Custom Theme Created
Custom Theme Created

Now we can edit our new theme to add FastComments.

Edit Theme Files
Edit Theme Files

Step Two: Edit the Correct Template Internal Link

The next step is to add the widget code that makes the integration work.

Once you're in the theme editor, as directed in the previous step, you'll see a file browser on the left and an editor on the right.

We will edit a template that represents our blog post pages.

In the left-hand navigation, go to templates->pages->blog-post.html.

Open The Template
Open The Template

Step Three: Add Widget Code Internal Link

Next, copy the code we'll be using to install FastComments:

BigCommerce Comments Code
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo"
7}];
8</script>
9

Now we're going to paste the widget code on Line 6. It's important that the code is added before the line with {{/partial}}.

Paste on Line 6
Paste on Line 6

You should end up with something like this:

After Adding Code
After Adding Code

Now save the file:

Save
Save

...and exit the editor:

Edit The Editor
Edit The Editor

Step Four: Activate New Theme Internal Link

Our final step is to use the new theme template.

In the top right, you'll now see either Publish or Make Active Theme. Click that to continue and make the changes live:

Publish The Changes
Publish The Changes

Now we can check out our site! If you go to a blog post, you should see a comment box at the bottom.

Changes Live
Changes Live

Success Internal Link


Nice work! You've added live commenting to your BigCommerce site.

If you've run into a permission denied error, or would like to customize FastComments, read on.


Customization Internal Link


FastComments is designed to be customized to match your site.

If you'd like to add custom styling, or tweak configuration, Checkout our Customization Documentation to learn how.


Extra: Code Snippet for the Page Builder Internal Link

It's not recommended to add FastComments via BigCommerce's Page Builder because the code must then be manually added to every page you want.

However, if you choose to do this, you must use the following code snippet. Code snippets from other tutorials will not work because of the way BigCommerce operates:

BigCommerce Page Builder Snippet
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 (function () {
6 let loaded = false;
7 function attemptLoad() {
8 if (loaded) {
9 return;
10 }
11 if (!window.FastCommentsUI) {
12 return;
13 }
14 FastCommentsUI(document.getElementById('fastcomments-widget'), {
15 tenantId: "demo"
16 });
17 loaded = true;
18 }
19 attemptLoad();
20 const interval = setInterval(function () {
21 attemptLoad();
22 if (loaded) {
23 clearInterval(interval);
24 }
25 }, 300);
26 })();
27</script>
28