FastComments.com

Add Comments to Shopify Sites

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

The instructions below are for a blog built on Shopify, but the embed code can also be manually added to any page by editing other theme files. FastComments Support can also assist with this.

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 2: Disable Default Commenting System Internal Link

The first step to using FastComments with Shopify is disabling Shopify's system.

Note FastComments Support can assist you in migrating over existing comment threads.

To replace the Shopify comment system, we'll go to our store dashboard and click Blog posts in the bottom left:

Open Blog Posts Admin
Open Blog Posts Admin

Then we will click Manage blogs in the top right:

Manage Blogs
Manage Blogs

Click on the blog we want to manage. If it says Comments are disabled you can skip this step and move to Step Two.

Manage Blog
Manage Blog

If not, select the blog and ensure Comments are disabled is selected in the right panel:

Disable Comments
Disable Comments

Now click save.

Step 3: Open The Blog Theme Template Internal Link

Now we're going to edit our store's theme to add FastComments.

In the left panel, open Themes:

Open Themes
Open Themes

Under Current theme, select Actions and then Edit code:

Edit Code
Edit Code

This will open up a code editor, with a file browser on the left and the code on the right.

All we need to do is copy a small piece of code that adds FastComments and paste it on the right line in the right file.

In the file browser on the left, scroll down and click Sections:

Select Sections
Select Sections

Now we're going to scroll down and select main-article.liquid:

Select main-article
Select main-article

This will open the theme template used to render a single blog article.

You should now see something similar to the following, with main-article.liquid selected at the top:

main-article Open
main-article Open

Step 4: Add The FastComments.com Code Internal Link

Next we're going to scroll down to line 100:

Scroll to Line 100
Scroll to Line 100

Now copy the following code snippet, which is designed specifically for Shopify - do not use code snippets from other tutorials:

Shopify FastComments Snippet
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget" class="page-width page-width--narrow"></div>
4<script>
5 FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 tenantId: "demo",
7 urlId: window.location.pathname
8 });
9</script>
10

Now we want to put our cursor on line 101 - right after the </div> - and paste. You should have something like this:

Add The FastComments Code
Add The FastComments Code

Now we can save:

Save
Save

Success Internal Link

Now if we view a blog post, we should see FastComments!

Success!
Success!

Congratulations on setting up FastComments with Shopify! If you've run into a Domain Error, or would like to learn how to customize the comment area, 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.