Add Comments to Shopify Sites

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

Then we will click Manage blogs in the top right:

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

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

Disable Comments

Now click save.

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

In the left panel, open Themes:

Open Themes

Under Current theme, select Actions and then 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

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

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

Next we're going to scroll down 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

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

Now we can save:

Save

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

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!

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.