How to Add a Comment Widget to a BASE Shop

The gate here is the theme, not the plan

Take the money question off the table first, since on most builders that is where a guide like this stalls. BASE separates its shop plans by what it charges you, not by what you can build. Its help center writes it as one sentence: "「BASEかんたん決済手数料」「サービス利用料」以外に、プランによって利用できる機能に違いはありません", meaning that outside the payment fee and the service fee there is no difference in the features a plan can use. The BASE Apps listing prices HTML編集 at 無料, and prices 独自ドメイン the same way. Nothing on this page asks you to move up a tier.

The rule that does bite sits on the same listing: "無料のオフィシャルテーマを元に、HTML編集をすることはできません". HTML editing cannot be done on top of a free official theme. The bases you are allowed to edit are 「新規作成（サンプル）」, the blank sample, and a designer theme purchased from デザインマーケット. Read that as a design decision rather than a technical one. Rebuild the storefront from the sample and the whole route stays free; keep the look you already have, if it came from a free official theme, and buying a designer theme becomes the real first step.

What lands on the page

The app that looks like a shortcut and is not one

Most BASE shops that touch code at all have already met the HTMLタグ管理 App. It is free, it is where GA4, Google Tag Manager and ad pixels go, and it takes a tag without asking you to open a theme. So it looks like the place to paste a widget script. It will take the paste. It will even load the script. Then nothing happens, for a reason BASE writes down rather than hides.

The help center says the placement is not yours to pick: "タグの設置箇所の選択はできません。headタグ内に反映されます". Tags land inside the head tag. The same page lists "bodyタグ内を編集する", editing inside the body tag, among the things the app cannot do. Custom tags reach "カート画面とレジ画面をのぞいた、すべてのページのheadタグ内", every page except the cart and checkout screens. An update that would let you choose the position is mentioned, without a date attached to it: "具体的な日程についてはまだ決まっておりません".

Line that up with what a comment widget needs and the mismatch is exact. The loader can arrive through the head perfectly well. Once it runs it looks for a mount element, finds none, and stops without complaining, because a page with no widget on it is a normal page. So the shop downloads a script and looks precisely as it did before, which is the most expensive kind of nothing: there is no error to search for.

Keeping both is allowed. BASE writes that "「HTMLタグ管理 App」と「HTML編集 App」は、あわせてご利用いただけます", together with a warning that setting the same tag through both can stop it working properly. Practical reading: leave your analytics where it is, and let the theme carry the widget.

The install

1. Write down both addresses the shop answers on

   A BASE shop has a free .base.shop address chosen when the shop was opened, and BASE states that "ショップ開設時に登録したURLは、後から変更することができません", it cannot be changed afterwards. A custom domain arrives through the 独自ドメイン App: point a CNAME at cname.thebase.in and allow up to 72 hours. It has to be a subdomain such as shop. or store., since BASE supports neither a root domain nor a subdirectory. Whether the original .base.shop address keeps serving once a custom domain is live is not stated on the BASE pages read for this guide, so treat it as unverified and register both in the BootSignal dashboard. Registering example.com also covers shop.example.com, because the hostname check accepts a subdomain of a registered domain. What the dashboard hands back is the site id.

2. Install HTML編集 from Apps

   Open the HTML編集 App in the BASE Apps list and install it. The listing describes what it unlocks as "HTML / CSS / JavaScriptなどを編集できるようになります". Your shop looks the same afterwards: the app adds an editor, it does not swap your theme for you.

3. Create a theme you are allowed to edit

   In the shop admin go to デザイン, then ＋テーマを作成する. Pick 「新規作成」 to start from the sample, or 「購入したテーマを元に新規作成」 if you bought a designer theme, then confirm with 「このテーマを元に作成」. Before typing a character, copy the source into a file on your own machine. There is no undo in this editor, and re-selecting a theme later overwrites what you edited.

4. Drop the loader into the shared part of the source

   Header and footer markup lives outside every block tag, and so should this: put the tag just before the closing </body>. It is the only BootSignal script the shop ever loads, whatever you add later.

   SnippetCopy

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

5. Put the mount div inside the page block that needs it

   Find the block tag wrapping the page you want threads on and paste the div inside it. Because the same source draws every page, a fixed thread id would give the entire shop one shared conversation, so the lines under the div read it from the address instead. Nothing else in the snippet is BASE specific.

   SnippetCopy

   <div id="bs-thread" data-bootsignal="comments"></div>
   <script>
     (function () {
       var el = document.getElementById('bs-thread');
       if (el) el.setAttribute('data-thread-id', location.pathname);
     })();
   </script>

6. Preview, save, then hand the theme to the shop

   The editor gives you プレビュー, which opens in a separate tab, and 保存する. Saving does not publish anything. Go back to デザイン, open テーマ, choose your theme under カスタムテーマ and press 保存する there. That second save is the one your customers see. The editor is documented as desktop only, so none of this is a phone job.

Why the div goes in a block and the loader does not

A BASE theme is not a folder of templates. The template docs put it in one line: "デザインテーマは画像、css、jsなどの外部ファイルを除けば1つのソースでショップ全体のページを構成します", one source composes every page of the shop once you set the images, CSS and JS aside. Pages are told apart inside it: "各ページのコンテンツは{block:IndexPage}などのそれぞれのページであることを判別するif文に相当するタグで囲います", each page's content is wrapped in an if-style tag such as {block:IndexPage}. Repeating parts, the header and the footer, simply sit outside those tags. Variable tags look like {IndexPageURL}, block tags like {block:Items}.

That single fact decides both placements. The loader belongs outside the blocks, where it ships with every page and costs nothing on the pages that have no widget on them. The div belongs inside one block, which is how a thread appears under your items and not on the cart. Open your theme source, search for the block tags it already uses, and the map draws itself.

What this adds to a BASE bill

BootSignal charges per registered domain, which for one shop is one line: $20 per month or $200 per year per registered domain. That covers all 38 widgets in the catalog and the ones added after you subscribe, and traffic does not enter into it. A second shop is a second domain in the dashboard, not a larger plan. The pricing page has the detail.

BASE's own side of the bill stays whatever your plan charges in payment and service fees. You will not find those rates quoted here: the help pages read for this guide describe the difference between the plans without publishing the numbers, and a fee rate copied from memory is worse than a link. Read them on your own plan page.

The rest of the catalog rides the same tag

Every other widget mounts through the loader you already pasted, so the second one is a div with a different data-bootsignal value in the same block. Ratings pair naturally with a shop, where a question under an item is worth less than a score on it.

When the shop page comes up blank

Work down this list rather than around it. BASE is upfront that it will not do this part with you: the template docs say technical support for template editing is not provided. Knowing which line failed turns that into a short message to us instead of a long evening.

1. Is the shop actually serving your custom theme? Saving in the editor is not applying; the second 保存する under デザイン, テーマ, カスタムテーマ is.
2. Is bootsignal.js in the Network tab of the live shop? If it is missing, the loader line went into a theme you did not apply.
3. Does the div exist in the page source? If it sits in another page's block tag, it renders on that page and nowhere else.
4. Any console warning mentioning missing data-site-id (loader) or data-thread-id (target)? Then the div mounted and one attribute did not arrive.
5. Does the hostname in the address bar match what you registered? A shop reached through .base.shop while only the custom domain is registered stays quiet by design.
6. Did you paste through the HTMLタグ管理 App? Then the script is in the head and there is no div anywhere, which looks identical to a broken install.