How to Add a Comment Widget to a Shopify Blog

What the native comment form does and does not do

Shopify's blog comments are configured per blog under Content > Blog posts > Manage blogs, and the setting has exactly three states: "Comments are disabled", "Comments are allowed, pending moderation", and "Comments are allowed, and are automatically published". Every comment carries one of three statuses (Approved, Not approved, Spam), Shopify auto flags suspected spam, and unmarking a comment as spam approves it in the same action. Two things surprise people later: an approved comment cannot be pushed back to unapproved, and deleted comments cannot be recovered.

The bigger limitation is structural. Themes render the form with {% form 'new_comment', article %} and loop existing comments from article.comments, which paginate at a limit of 50 per page. The comment object exposes author, content, created_at, email, id, status, updated_at and url. There is no field that points a comment at another comment, so a reply is impossible to render even if you write the Liquid yourself.

Keeping the native form is a perfectly reasonable choice for a store that gets a comment a month. Swap it out when you want people talking to each other under a post rather than filing one-way notes.

Find out which article template your theme uses

This is the real gate on Shopify, and it has nothing to do with what you pay. Do it before you copy anything, because it decides which file you edit. In the theme code editor, open the Templates folder and look for the article template. If you see templates/article.liquid, you have a vintage theme and you can write HTML and Liquid straight into that file. If you see templates/article.json, you have an Online Store 2.0 or Horizon era theme, which is what most stores are on now.

A JSON template is a list of sections and settings, not markup. Pasting a <div> into it produces invalid JSON and a save error, which is exactly where people give up and conclude the widget does not work on Shopify. The edit target on a JSON theme is the article's main section: open the Sections folder and find the section the template references. In Dawn that is sections/main-article.liquid.

Which stores can actually do this

There is no plan upgrade to buy. Shopify documents the theme code editor, the theme editor, the Custom Liquid section and app embed blocks without any plan requirement, and the Basic plan page lists a customizable online store plus a built in blogging engine that collects comments. From Basic upward, that is the whole story. Four of the nine plans Shopify currently lists sit outside it, in two different ways.

Lite and Agentic have no storefront to install into. The Lite plan page says the plan does not include the online store sales channel, and the Agentic plan page lists Online Store first among the features that are not available with it. No online store means no theme, no blog and nowhere for a thread to live, so the install is not blocked so much as beside the point.

Starter and Retail share the other restriction. Both limit you to the Spotlight theme, both state that further themes and customization options are not available, and neither page says whether the code editor is reachable, so treat both as unconfirmed rather than as a yes or a no: open Edit code on your own store before you plan around it. Both are also closed to new signups. Shopify's wording on the Starter page is "The Starter plan isn't available to new stores.", and the Retail page carries the same line about Retail. If you are on either one, it is because you were already on it.

The thread you are about to paste in

Install the loader and the mount element

1. The address bar tells you what to register

   There are exactly two candidates. The .myshopify.com address is issued when the store is created and stays with it permanently, and the custom domain you connect later is the one customers type. Which of the two serves your blog post depends on how far you got with the domain setup, and a store that has not connected a custom domain yet is serving everything on the myshopify address. The widget compares location.hostname against the domains registered to your site id, so register the address that is in the browser bar when you open a real post, and register both if you are mid switch or you check your work on the myshopify address. Do that in the BootSignal dashboard. It answers with a site id, and that string is the only thing BootSignal puts into your theme.

2. Duplicate the theme, then open Edit code

   In the Shopify admin go to Online Store, find the theme, click the horizontal menu ("...") icon and choose Edit code. On mobile the path is Menu icon > Sales channels > Online Store > Manage themes > horizontal menu icon > Edit code. Duplicate the theme first so you have a copy to fall back to, since theme updates can drop code edits.

3. Put the loader in theme.liquid

   In the file tree open the Layout folder and select theme.liquid. Paste the loader just before the closing </body> tag and click Save. Keep defer on the tag: Shopify's Theme Check flags parser blocking scripts as a storefront slowdown, and a deferred tag does not hold up rendering. Every other BootSignal widget mounts through this same tag, so a ratings block or an announcement bar later on adds no second script file to the storefront.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>

   Copy

4. Add the mount element to the article section

   On a JSON theme, open Sections and edit the article main section (sections/main-article.liquid in Dawn). Place the mount element after the article content, usually right where the native comment block sits. On a vintage theme, paste it into templates/article.liquid in the same position. Bind data-thread-id to the post so each article keeps its own thread.

   <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>

   Copy

5. Save, then open a published post

   Save the section file and load a real blog post URL in a normal browser tab. The thread renders under the post, and the first visitor who signs in with Google can write. If nothing appears, read the hostname in the address bar and check it against the list in your dashboard, because that is the check the widget itself is running.

Why the mount div does not belong in theme.liquid

theme.liquid is the global layout. The loader belongs there precisely because it should run everywhere, but the mount element is a different animal: paste it into the layout and an empty comment thread appears on your product pages, your cart, your policy pages and your homepage. Merchants do this constantly, then wonder why a comment box is sitting under their checkout button.

If you truly cannot reach the article section (a locked or unusual theme), wrap the mount in a template conditional so it only renders on a blog post.

{% if template contains 'article' %}
  <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>
{% endif %}

It works, but it puts blog markup in the file every page of your store loads. The section file is the right home.

The Custom Liquid route, without the code editor

There is a no code path. Open the theme editor (Online Store > Edit theme), use the template dropdown in the middle of the top bar to switch to the blog post template, then in the Sections sidebar click Add section or Add block and choose Custom Liquid. Paste the mount element into the code field and save. Shopify's Theme Store requirements make this section mandatory for marketplace themes and describe Custom Liquid blocks as an insertion point for apps, so most merchants have it.

• The liquid setting caps content at 50kb, which no widget snippet will ever approach.
• Invalid Liquid throws an error on save, and unclosed HTML tags are closed for you, which can quietly rearrange a sloppy paste. Keep the snippet well formed.
• The setting cannot use {% javascript %} or {% stylesheet %} tags, so plain HTML plus a <script src> is the only shape that works.
• A custom built theme, an off marketplace theme or an old vintage theme may not offer Custom Liquid at all. Then the code editor is your only route.

Switch the native form off, or you will run two

Once the widget is live, the theme is still rendering Shopify's own comment form below it. Go to Content > Blog posts > Manage blogs, pick the blog and set it to "Comments are disabled". The form disappears from the theme without touching your code.

Copy anything you want to keep before you switch off, and copy it somewhere outside Shopify. Deleted comments cannot be recovered, and there is no migration path from the native table into a widget, so the old thread and the new one will start life as separate things.

The price, and why traffic does not move it

One subscription covers the thread and everything you might mount beside it later: $20 per month or $200 per year per registered domain, with no counter on pageviews or visitors. That matters more on a store blog than on a personal site, because a buying guide that lands on a deal aggregator can multiply your traffic overnight without moving the invoice. A second store is a second registered domain, added from the dashboard. The catalog is 31 paid widgets plus 31 free browser tools, and widgets added to it after you subscribe are included as well (full pricing). Priced comparisons against other comment tools live in the alternatives section.

If a subscription ever lapses, the thread does not vanish from your blog. Comments stay visible and become read only, nothing is deleted, and resubscribing restores everything as it was. That is worth knowing before you install anything on a storefront you plan to keep for years.

Star ratings on the same post

The loader you pasted into theme.liquid powers every other widget, so a second one costs you a single div in the same section file. On a store blog, ratings pull their weight: a buying guide with a score under it reads differently than one without.

Reviews collected here also feed the Testimonial Wall widget, which can only display quotes people actually left. It has no way to invent one, which matters on a commerce site where fake looking social proof costs you the sale.

Re-check the post after every theme update

This is the maintenance item nobody tells you about. Shopify is explicit: if changes you have made to a theme's code are incompatible with a theme update, then all your code changes are removed in the updated copy. Your loader and your mount element are code changes. They can vanish in an update that you approved for entirely unrelated reasons, and nothing warns you, because a missing comment thread does not break a page.

1. Before updating, duplicate the current theme so the working install survives as a copy.
2. After the update publishes, open one blog post and confirm the thread is still there.
3. If it is gone, re-open Edit code and re-paste both pieces: the loader in theme.liquid, the mount element in the article section.
4. Comments themselves are never at risk. They live on the BootSignal side, keyed by thread id, so a re-paste brings the whole thread back exactly as it was.

Put a note in whatever you use to track store changes, next to your other theme customizations. Two minutes after an update beats finding out from a customer that the discussion under your best post has been missing for a month.