Home›Guides›How to Add a Comment Widget to a Cafe24 Store

How to Add a Comment Widget to a Cafe24 Store

Nothing to upgrade, nothing sandboxed. The only real decision is which of the two injection points holds which half.

Mr. Latte
Updated

A hosted comment thread runs on a Cafe24 storefront without an app, without a plan change, and without the iframe problem that kills this install on some other builders. Cafe24 hands you two ways to put a <script> of your own on the page: a site wide field under the SEO settings, and the SmartDesign editor, where the layout file is literally the document your pages are rendered into. The loader goes in the field, the mount element goes in the file, and both of them have a mobile twin you have to remember. Register the addresses your mall answers on first, because the widget checks them before it draws anything.

The unusual part is that there is no gate

Most of these guides open by working out which tier unlocks custom code. Cafe24 does not have that paragraph. Its own pricing page says building and hosting a mall costs 가입비, 월비용, 연간 호스팅 비용 모두 평생 무료, which is signup fee, monthly fee and yearly hosting fee all free forever. What you pay for sits beside the mall rather than inside it: a domain at 22,000 won a year, payment processing, marketing add-ons.

Neither injection point below carried a tier restriction in any Cafe24 document read for this page. That is worth stating precisely, because silence is weaker evidence than a written promise: what was verified is that no plan limit is documented, not that Cafe24 has written down a guarantee that none exists. In practice the panels are in every admin, and merchants have been pasting tracking pixels into them for years. Cafe24 assumes as much in its own help pages, which discuss removing a pixel that was installed 스마트디자인 등을 통해, through SmartDesign and the like.

Two doors in, and a third that belongs to app developers

Door one is a settings field. Under 쇼핑몰 설정, the shop settings, you open 기본 설정 and then 쇼핑몰 정보 > 검색 엔진 최적화(SEO), the search engine optimization block. At the bottom of it is 고급 설정, advanced settings, and inside that is 코드 직접 입력, which means entering code directly. Cafe24 describes what it does in one line: 쇼핑몰의 모든 HTML 페이지에 직접 입력한 코드를 추가할 수 있어요, you can add the code you enter to every HTML page of the mall.

Door two is the design editor. SmartDesign is not a wrapper around your pages, it is the pages: the layout file opens with <!DOCTYPE>, carries <html>, <head> and <body>, and drops the screen you are on into a <!--@contents--> marker, while each screen calls its layout with a <!--@layout(/layout.html)--> line at the top. Editing that file means editing the real document, which is why a mount element placed there lands exactly where you typed it. Cafe24 documents external scripts there too, telling designers that a script file is loaded by using a plain <script> tag with a path, in contrast to CSS which goes through <link>.

Door three exists and is not yours. The Scripttags admin API lets an installed app push a script onto chosen screens without touching the design, with a src and a display_location parameter. It needs an app registration and OAuth, so it is the right tool for someone shipping a Cafe24 app and the wrong tool for pasting one widget onto one mall.

QuestionSEO code field (코드 직접 입력)SmartDesign layout or page HTML
Where your code ends upBottom of <head>, or bottom of <body>, on every HTML pageExactly where you typed it in the file
Best used forThe loader tagThe mount element
Can you choose the spot in the layoutNoYes
Does it cover phonesOnly once you paste on the mobile side tooOnly once you edit the mobile design too
Is your code inside an iframeNoNo
Documented plan requirementNone foundNone found
What it can breakNothing structural, it is a settings fieldYour storefront markup, so take a backup first
Survives a theme changeYes, it is a setting rather than a designNo, a different design is a different file
The split is the point: one door carries the script, the other decides where the thread sits.

This is a friendlier arrangement than some builders manage. Wix wraps pasted HTML in a cross-origin sandbox, which breaks the domain check and the sign-in flow outright, and the workaround is a script that builds its own mount node: that story is in the Wix guide. Nothing here needs that trick. Your code is on your storefront, on your hostname, in the open.

Read a thread before you open the admin

This is the widget itself, live on this page. Leave a line if you want to watch the round trip. On a Cafe24 product page it looks the same, because by then it is one div on your storefront.

Preview

2 comments

Add a comment…
Commenting as AlexPost
  • M
    Maya2h ago

    One line and done, did not expect setup to be this easy!

  • J
    JordanYesterday

    Shared sign-in means nothing else to wire up. 👍

A thread filled with sample replies for the preview. Google sign-in and dashboard moderation arrive with the install, not with this demo.

Door one: the loader, once for PC and once for mobile

  1. Collect the addresses your mall answers on, then get a site id

    Cafe24 gives every mall a built-in id.cafe24.com address at signup, and a domain you buy or connect becomes the 대표 도메인, the representative domain, of which Cafe24 allows exactly one per mall. Both addresses keep working, so both belong in the BootSignal dashboard. Enter the built-in one in full, myshop.cafe24.com and not cafe24.com, because the check accepts a registered domain and its subdomains, and the short form would hand your site id to every mall on the platform. Your own domain is different: register example.com once and the mobile storefront at m.example.com is covered by the same entry. The dashboard returns the site id the loader needs.

  2. Walk to 코드 직접 입력 through the SEO settings

    From the admin, open 쇼핑몰 설정 > 기본 설정, then 쇼핑몰 정보 > 검색 엔진 최적화(SEO). Scroll to the bottom of that screen and click 고급 설정. The 코드 직접 입력 item is inside, with a Head 영역 box and a Body 영역 box.

  3. Put the loader in the Head box, and read the warning that sits next to it

    Paste one tag with your site id in it. Cafe24 states where the code lands: 입력된 코드는 <Head> 태그 내에서 하단에 추가되지만, 다른 모든 SEO의 메타 태그보다는 상단에 위치하여 우선 적용되므로 신중하게 입력해야 해요. Your code is appended near the end of the head, but it still sits above every SEO meta tag Cafe24 generates, so it takes priority and deserves care. In plain terms: a malformed tag here is a malformed tag on every page of the mall, so paste the whole line and nothing else.

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

  4. Do the mobile storefront as well, or phones get nothing

    Cafe24 documents the PC path as 코드 직접입력 > PC쇼핑몰 > Head 영역, which is a route that names a storefront. Whether the mobile storefront gets its own tab in this same field is not something the help centre spells out, so save, then open the shop on a phone before assuming one paste covered both.

  5. Open the storefront and confirm the file was requested

    Load any page of the live mall, open the browser network panel, and look for bootsignal.js. If it is there, door one is done and nothing is visible yet, which is correct: the loader draws nothing until it finds a mount element.

Door two: putting the thread where a customer will find it

The mount element is a div with two attributes, and its position is the whole reason to open the design editor. The thread id is yours to choose, and it is what separates one conversation from another: two pages with the same id share one thread, which is occasionally what you want and usually not.

  1. Get into the editor from 디자인 관리

    In the admin, go to 디자인 > 디자인 관리 and click the 디자인 편집 button on that screen. SmartDesign opens in a new window with a file tree on the left and the HTML on the right.

  2. Choose the screen, and know what choosing the layout means

    Pick the page you want to edit. The two files Cafe24 names explicitly are the shared layout, 공통 레이아웃 at layout > basic > layout.html, and the main layout, 메인 레이아웃 at layout > basic > main.html. A mount placed in the shared layout appears on every screen that calls it, which means every screen shares one thread id unless you edit them separately. For a per-product conversation, edit that product screen instead and give it its own id.

  3. Type the mount element into the spot you want and save

    Put the div under the block the conversation belongs to, set data-thread-id to something short and permanent, and click 저장. Keep the id stable: rename it later and the old thread stays attached to the old id.

    Snippet
    <div data-bootsignal="comments"
     data-thread-id="product-hazelnut-blend"></div>

  4. Repeat on the mobile design, which is a separate one

    The mobile storefront is not a responsive view of the PC design, it is its own design with its own files. Open 디자인 > 디자인 보관함, switch to the 모바일 tab, and click 편집 on the design you use. The same div goes into the matching screen there.

  5. Reload the storefront and watch it draw

    Open the real page on your connected domain. The loader is already in the head from door one, so the thread appears as soon as the div is on the page. If the page draws but the thread does not, the checklist at the end of this guide sorts it in about a minute.

Mount a Thread on a Cafe24 Product Screen

One tag in the SEO field, one div in the design, and the same pair works for every widget in the catalog.

If you are on SmartDesign Easy, read this before clicking

Cafe24 ships a simplified editor called SmartDesign Easy, and hand-editing HTML is not something it survives cleanly. The help center is blunt about both halves of it. Moving to the full editor closes the simple one: 스마트디자인으로 이동 시 스마트디자인Easy는 종료되어요. And coming back is not guaranteed to be uneventful: 스마트디자인에서 임의로 HTML을 추가/수정/삭제 한 이후 다시 스마트디자인Easy로 돌아왔을 때 오류가 발생할 수 있어요, meaning errors can occur when you return to Easy after adding, changing or deleting HTML by hand.

So the decision splits cleanly. If Easy is how you maintain the storefront and you would rather not leave it, use door one for both halves and accept a shop-wide thread pinned to the bottom of the page. If you want the thread under the product, you are leaving Easy, and it is worth knowing that before the window opens rather than after.

Why the widget stays quiet on the built-in address

Cafe24 lists the built-in domain and any domain you connect in the same place, under 쇼핑몰 설정 > 기본 설정 > 쇼핑몰 정보 > 도메인 설정 > 도메인 관리 > 쇼핑몰 연결 도메인. Two of its sentences shape this install. If you have not bought or connected a domain, only the built-in one is listed: 도메인을 신규로 구매하거나 보유 도메인을 연결하지 않았다면 카페24에서 기본으로 제공하는 도메인만 목록에 표시되어요. And there is only ever one representative domain: 대표 도메인은 쇼핑몰당 1개만 지정할 수 있어요.

A representative domain does not switch the other address off. The mall still answers on id.cafe24.com, which is why the dashboard entry list is not a list of one. If you test your work on the built-in address while only your own domain is registered, the thread stays blank and nothing is broken: that is the allowlist doing the job you registered a domain for. Register both, or test on the address customers actually use.

What this adds to a storefront that costs nothing to host

Cafe24 charges nothing for the mall itself, so this is the whole added line item: $20 per month or $200 per year per registered domain. Traffic does not move it, a launch day does not move it, and a mall that gets picked up by a deal community pays the same as one that gets nine visitors. The catalog is 38 paid widgets plus 33 free browser tools, and widgets added after you subscribe are included (full pricing).

A second Cafe24 mall is a second registered domain rather than a bigger plan, which is the same unit Cafe24 itself bills in. Priced comparisons against other comment services are kept in the alternatives section, with the date each vendor page was read, because a stale price in a guide is worse than no price at all.

Ratings belong on the product screen too

The loader you pasted carries every widget in the catalog, so the second one costs you a div with a different data-bootsignal value in the same design file. On a storefront the obvious neighbour is star ratings, which answer a different question than a comment thread: a thread is where someone asks whether the roast is dark, a rating is what forty people thought after it arrived.

Preview
★★★★★ 4.2 , 36 reviews
★★★★★

Five-minute setup and it looks clean.

Sam

Sample stars and a sample average, shown so you can see the layout. Details on the Ratings page.

Give ratings their own thread id per product, the same way the comment thread works, and the average follows the id rather than the URL. Shopify merchants land in a similar spot with a different obstacle, the JSON template: the Shopify install covers that one.

A blank spot on the storefront, in order of likelihood

  1. Is bootsignal.js in the network panel? If not, the SEO field entry did not save, or you are on the storefront whose tab you skipped.
  2. Are you on a phone looking at a PC-only install, or the reverse? The two storefronts are configured separately at both doors.
  3. Does the address bar match a registered entry exactly? myshop.cafe24.com and example.com are two entries, and neither covers the other.
  4. Is the div in the design you are actually serving? Editing one design and publishing another is the quiet version of this failure.
  5. Did you save in SmartDesign with the 저장 button, and reload the storefront rather than the editor preview?
  6. Is data-thread-id present and spelled the same on the PC and the mobile design? A typo there gives you two threads that each look empty.
  7. Did a design restore run recently? The 디자인복구 tab puts back the design as it was saved, mount element included or excluded.

Questions people ask

Does any of this require a paid Cafe24 plan?
No plan requirement for the SEO code field or the design editor appears in any Cafe24 document consulted for this page, and Cafe24 advertises mall building and hosting as free for life. Be precise about what that means: no documented gate was found, which is not the same as a written promise that none exists. The paid items sit around the mall, such as a domain at 22,000 won a year.
Do I really have to paste the same code twice?
Yes, once per storefront. Cafe24 keeps the PC mall and the mobile mall as separate configurations at both injection points: the code field has a tab per storefront, and the mobile design is edited from its own tab in 디자인 보관함. Skipping the mobile half is the single most common way this install ends up half working.
Where exactly does the thread appear if I use the Body field instead of the design editor?
At the very bottom of the page, under everything else, on every screen of the mall. Cafe24 appends that field to the end of the body tag and gives you no way to choose a spot. It is a reasonable home for a single shop-wide conversation and a poor one for a per-product thread.
I use SmartDesign Easy. Will editing HTML break it?
Cafe24 warns about exactly this. Opening the full editor shuts Easy down for that design, and its help center states that errors can occur when you return to Easy after adding, changing or deleting HTML by hand. If you want to stay on Easy, install only through the SEO code field and accept a bottom-of-page thread.
Do I need to build a Cafe24 app to install a script?
Not for this. The Scripttags admin API is how an installed app pushes a script onto storefront screens without touching the design, and it needs app registration and OAuth behind it. For one widget on one mall, the settings field and the design editor reach the same page with none of that machinery.
The thread shows on my domain but not on the id.cafe24.com address. Is something broken?
Nothing is broken. The widget answers only on hostnames registered to your site id, and the built-in Cafe24 address is a separate hostname from your own domain even though both open the same mall. Add it as its own entry in the dashboard if you test there, or do your checking on the address customers use.
Get a Site ID for Your Cafe24 Mall

Register the built-in address and your own domain, then paste one tag into the SEO field.

Where these numbers come from