![Open Menu Menu Icon](/images/menu.png)
BigCommerce Installation
Using The Page Builder
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 ![Direct Link Internal Link](images/link-internal.png)
First, let's create a custom theme that we're going to edit. If you already have a custom theme setup, you can skip this step.
To do this, we will go to Storefront
and then Themes
.
![Select Storefront](/images/installation-guides/bigcommerce-step-1-select-storefront.png)
![Select Themes](/images/installation-guides/bigcommerce-step-1-select-themes.png)
For the purposes of this tutorial we will 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](/images/installation-guides/bigcommerce-step-1-select-make-a-copy.png)
Confirm copying the theme:
![Save The Copy](/images/installation-guides/bigcommerce-step-1-save-copy.png)
Once complete, you should see your theme listed under Themes
on the bottom of the page, like so.
![Custom Theme Created](/images/installation-guides/bigcommerce-step-1-custom-theme-created.png)
Now we can edit our new theme to add FastComments.
![Edit Theme Files](/images/installation-guides/bigcommerce-step-1-edit-theme-files.png)
Step Two: Edit The Correct Template ![Direct Link Internal Link](images/link-internal.png)
The next step is going to be adding the widget code that makes the integration work.
Once you are in the theme editor, as directed from the previous step, you'll see a file browser on the left and an editor on the right.
What we are going to do is edit a template that represents our blog post pages.
In the left-hand navigation, go to templates->pages->blog-post.html
.
![Open The Template](/images/installation-guides/bigcommerce-step-2-open-blog-post-template.png)
Step Three: Add Widget Code ![Direct Link Internal Link](images/link-internal.png)
Next, copy the code we will be using to install FastComments:
![Copy Copy](/images/copy-white-24px.png)
Now we're going to paste the widget code on Line 6
. It's important the code is added before the line with {{/partial}}
.
![Paste on Line 6](/images/installation-guides/bigcommerce-step-2-insert-code-line-6.png)
You should end up with something like this:
![After Adding Code](/images/installation-guides/bigcommerce-step-3-pasted.png)
Now we can save the file:
![Save](/images/installation-guides/bigcommerce-step-3-save.png)
...and exit the editor:
![Edit The Editor](/images/installation-guides/bigcommerce-step-3-exit.png)
Step Four: Activate New Theme ![Direct Link Internal Link](images/link-internal.png)
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](/images/installation-guides/bigcommerce-step-4-activate-theme.png)
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](/images/installation-guides/bigcommerce-step-4-live.png)
Success ![Direct Link Internal Link](images/link-internal.png)
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.
Domain Errors ![Direct Link Internal Link](images/link-internal.png)
You may get an authorization error, like the following:
![Domain Configuration Missing](/images/installation-guides/installation-guide-webflow-step-5.png)
This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.
In this case, the fix is simple. You just have to add your site to your FastComments.com account.
Customization ![Direct Link Internal Link](images/link-internal.png)
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 Page Builder ![Direct Link Internal Link](images/link-internal.png)
It's not recommended adding FastComments via BigCommerce's Page Builder as then the code has to be manually added to every desired page.
However, if this is desired, the following code snippet must be used. Code snippets from other tutorials will not work due to the nature of BigCommerce:
![Copy Copy](/images/copy-white-24px.png)