FastComments.com
Menu Icon

언어 🇰🇷 한국어
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Shopify 설치

FastComments 앱 설치
블로그 게시물 및 상품에 댓글 추가
댓글 수 배지 추가
최근 댓글 피드 추가
최근 토론 피드 추가
상위 페이지 목록 추가
리뷰 요약 추가
Shopify 고객 자동 로그인
기존 댓글 가져오기
맞춤 설정
도메인 오류
수동 설치(고급)

Shopify 사이트에 댓글 추가

FastComments는 Shopify App Store에서 이용할 수 있습니다. 앱을 설치한 다음 Shopify 테마 편집기에서 블로그 게시물, 상품 페이지 또는 사용자 지정 페이지에 FastComments 블록을 드롭하세요. 코드 편집은 필요하지 않습니다.

앱을 설치하면 Shopify가 FastComments 계정을 프로비저닝하고, 매장 도메인을 연결하며, 청구를 자동으로 연동합니다. fastcomments.com에서 별도로 가입할 필요가 없습니다.

이 가이드의 페이지들은 앱이 제공하는 각 FastComments 블록, Shopify 고객을 위한 싱글 사인온(SSO) 동작 방식, 전환하기 전에 기존 Shopify 댓글을 가져오는 방법을 다룹니다.

FastComments 앱 설치 Internal Link

Shopify 앱 스토어에서 설치

  1. Shopify 앱 스토어의 FastComments 목록을 엽니다.
  2. 앱 추가를 클릭하고 설치 과정에서 원하는 요금제를 선택합니다.
  3. 설치가 완료되면 Shopify가 FastComments 관리 페이지로 리디렉션합니다.

설치는 이것으로 완료됩니다. 테마 파일에 붙여넣을 것은 없습니다.

설치 시 설정되는 항목

설치는 수동으로 하게 될 모든 작업을 자동으로 수행합니다:

  • 귀하의 상점용 FastComments 테넌트가 생성되어 상점 도메인에 연결됩니다.
  • 귀하 상점의 URL이 테넌트의 승인 도메인에 추가되어 도메인 오류 없이 댓글이 로드됩니다.
  • 모든 블록이 어떤 테넌트에 렌더링해야 하는지 알 수 있도록 fastcomments.tenant_id 샵 메타필드가 기록됩니다.
  • Shopify 고객을 위한 싱글 사인온(SSO)이 기본으로 활성화됩니다.
  • 청구는 Shopify 관리형 가격 정책을 통해 처리됩니다. 요금은 일반 Shopify 청구서에 표시됩니다. 업그레이드, 다운그레이드 또는 취소는 Shopify 관리자에서 설정 > 앱 및 판매 채널 > FastComments에서 가능합니다.

설치 전에 이미 귀하의 상점이 FastComments 고객이었다면, 설치는 새 테넌트를 생성하지 않고 기존 테넌트를 재사용합니다.

내장 관리자

Shopify 관리자에서 FastComments 앱을 열면 FastComments 백엔드로 원클릭 이동 가능한 타일이 있는 대시보드로 이동합니다:

  • 대시보드: 계정 설정, 사용량 및 구독 세부정보.
  • 검토 대기열: 상점 전반의 댓글을 승인, 거부 및 답글 작성.
  • 사용자 지정: 위젯 색상, 글꼴, 검토 규칙 및 구성 조정.
  • 평점 및 리뷰 도구: 리뷰 요약 블록을 사용하려면 별점 및 리뷰 질문을 설정.

각 타일은 일회용 로그인 링크로 FastComments를 열므로 별도의 로그인 정보가 필요 없습니다.

다음: 상점에 블록 추가

Shopify 테마 편집기(온라인 스토어 > 테마 > 맞춤설정)를 열고 댓글이나 리뷰를 추가하려는 템플릿을 연 다음 블록 추가를 클릭합니다. FastComments 블록은 앱 아래에 나타납니다. 이 가이드의 나머지 부분은 각 블록을 다룹니다.

블로그 게시물 및 상품에 댓글 추가 Internal Link

The FastComments 블록은 주요 댓글 위젯입니다. 블로그 게시물 템플릿, 제품 템플릿 또는 토론 스레드나 실시간 채팅이 필요한 다른 페이지에 추가하세요.

Add the block

  1. Shopify 테마 편집기(Online Store > Themes > Customize)를 엽니다.
  2. 댓글을 달고 싶은 템플릿을 선택합니다: Blog post, Product, 또는 다른 페이지나 섹션 템플릿.
  3. 댓글을 표시할 섹션에서 Add block을 클릭합니다.
  4. Apps 아래에서 FastComments를 선택합니다.
  5. Save를 클릭합니다.

블록은 즉시 나타납니다. 입력해야 할 Tenant ID가 없습니다; 앱을 설치하면 스토어의 tenant가 자동으로 연결됩니다.

Settings

SettingWhat it doesDefault
Tenant ID (optional)블록이 렌더링할 FastComments tenant를 재정의합니다. 비워 두면 스토어에 자동 구성된 tenant를 사용합니다. 수동 tenant ID는 fastcomments.com/auth/my-account/api-secret에서 찾을 수 있습니다.(빈값)
SSO댓글 작성 전에 방문자를 해당 Shopify 고객 계정으로 자동 로그인시킵니다. 자세한 내용은 Shopify 고객 자동 로그인을 참조하세요.On
Commenting Style중첩된 답글과 투표를 지원하는 Threaded 또는 실시간 채팅 피드를 위한 Streaming을 선택합니다.Threaded
Custom URL ID자동으로 감지된 페이지 식별자를 재정의합니다. 두 개의 URL이 동일한 댓글 스레드를 공유하게 하려면 이 설정을 사용하세요.(auto-detected)

How the page identifier is chosen

각 댓글 스레드는 URL ID로 키가 지정됩니다. 블록이 하나를 자동으로 선택합니다:

  • Blog post template: shopify-article-{article.id}, 이는 슬러그나 제목 변경에도 안정적입니다.
  • Product template: shopify-product-{product.id}, 이는 슬러그나 제목 변경에도 안정적입니다.
  • Other templates: 요청 경로(request path).

Custom URL ID를 설정하면 해당 값이 대신 사용됩니다. 동일한 Custom URL ID를 여러 블록에서 사용하면(예: 제품 페이지의 지역화된 버전에서) 하나의 댓글 스레드를 공유할 수 있습니다.

Threaded vs Streaming

Threaded는 기본값입니다. 방문자들이 서로에게 답글을 달고, 투표하며, 관리자 도구가 예상대로 작동합니다. 블로그 게시물 및 제품 리뷰에 적합합니다.

Streaming은 스레딩을 제거하고 새 댓글을 게시되는 즉시 실시간으로 표시합니다. 채팅 피드와 유사합니다. 제품 출시, 라이브 이벤트 및 커뮤니티 페이지에 적합합니다.

Multiple blocks on the same page

동일한 템플릿에 블록을 여러 번 추가할 수 있습니다. 예를 들어, 제품 페이지 상단에 리뷰 요약을, 하단에 FastComments 블록을 둘 수 있습니다. 블록들은 URL ID를 공유하므로 요약은 아래의 댓글을 반영합니다.

Tips

  • 블록은 tenant를 찾을 수 없을 때 테마 편집기 미리보기에서 노란색 알림과 함께 숨겨집니다. 라이브 스토어에서 이 알림이 나타나면 FastComments 앱을 재설치하세요.
  • 제품 페이지의 경우 FastComments 블록은 제품 리뷰 위젯 역할도 합니다. 페이지 상단에 별점 요약을 추가하려면 FastComments - Reviews Summary와 함께 사용하세요.

댓글 수 배지 추가 Internal Link

The FastComments - Comment Count block renders a small comment count for a single page. Use it in blog post lists, product cards, or any template that links to a page with comments, so visitors can see how active each thread is before clicking through.

Add the block

  1. Open the Shopify theme editor.
  2. Open the template where you want the count to appear. For example, the Blog template (the post list) or a product listing section.
  3. Click Add block in the section that renders each item.
  4. Under Apps, select FastComments - Comment Count.
  5. Click Save.

Settings

SettingWhat it doesDefault
Tenant ID (optional)카운트가 읽어올 FastComments 테넌트를 재정의합니다. 상점의 자동 구성된 테넌트를 사용하려면 비워두세요.(비어 있음)
Custom URL ID카운트가 찾는 페이지 식별자를 재정의합니다. 카운트가 추적하려는 FastComments 블록과 다른 페이지에 있는 경우에 사용하세요.(자동 감지됨)

How the count matches the comment thread

The Comment Count block uses the same auto-detection logic as the FastComments block:

  • Blog post template: shopify-article-{article.id}
  • Product template: shopify-product-{product.id}
  • Other templates: the request path

If you set a Custom URL ID on the FastComments block on a page, set the same Custom URL ID on the Comment Count block so they point at the same thread.

Tips

  • Counts for every item on the page are fetched in one request, so adding the block to every item in a long list has no extra round-trip cost.
  • One Comment Count block per article or product in a listing is the expected usage; the block can be added as many times as you need.

최근 댓글 피드 추가 Internal Link

The FastComments - Recent Comments 블록은 스토어 전체에서 최근 댓글을 보여줍니다. 사이드바, 푸터 또는 홈페이지 섹션에 최신 활동을 표시하는 데 사용하세요.

블록 추가

  1. Shopify 테마 편집기를 엽니다.
  2. 피드를 표시할 템플릿을 엽니다. 사이드바 섹션, 홈페이지 또는 블로그 인덱스가 적합합니다.
  3. 해당 섹션에서 Add block을 클릭합니다.
  4. Apps 아래에서 FastComments - Recent Comments를 선택합니다.
  5. Save를 클릭합니다.

설정

SettingWhat it doesDefault
Tenant ID (optional)피드가 읽을 FastComments 테넌트를 재정의합니다. 비워두면 스토어에 자동으로 구성된 테넌트를 사용합니다.(비어 있음)
Number of comments표시할 최신 댓글 수입니다. 범위 1~50.5

팁

  • 각 댓글은 작성된 페이지로 링크되므로, 이 블록은 "사람들이 지금 무엇에 대해 이야기하고 있는지"를 안내해 주는 내비게이션 힌트 역할도 합니다.
  • 피드는 스토어 전체에 적용됩니다. 단일 페이지의 최근 댓글만 표시하려면 해당 페이지에서 FastComments 블록을 사용하세요.

최근 토론 피드 추가 Internal Link

The FastComments - 최근 토론 블록은 스토어에서 최근 댓글 활동이 가장 활발한 페이지들을 페이지당 한 항목씩 나열합니다. 개별 댓글보다 활성 스레드를 방문자에게 노출하고 싶을 때 사용하세요.

블록 추가

  1. Shopify 테마 편집기를 엽니다.
  2. 피드가 들어갈 템플릿을 엽니다(예: 사이드바, 푸터, 블로그 인덱스 또는 홈페이지 섹션).
  3. 해당 섹션에서 블록 추가를 클릭합니다.
  4. 앱에서 FastComments - 최근 토론을 선택합니다.
  5. 저장을 클릭합니다.

설정

SettingWhat it doesDefault
Tenant ID (optional)피드가 읽어올 FastComments 테넌트를 재정의합니다. 스토어의 자동 구성된 테넌트를 사용하려면 비워 두세요.(빈 값)
Number of comments표시할 최근 토론 수입니다. 범위 1~50.20

최근 토론 vs 최근 댓글

두 블록은 동일한 데이터를 가져오지만 서로 다른 뷰를 표시합니다:

  • 최근 댓글: 최신 개별 댓글들의 평면 목록입니다. "방금 무슨 말이 있었나"를 보여주기에 적합합니다.
  • 최근 토론: 페이지당 한 항목씩, 가장 최근 활동 순으로 정렬됩니다. "지금 어떤 스레드가 활발한가"를 보여주기에 적합합니다.

동일한 스토어에서 둘 다 사용할 수 있습니다. 예를 들어 블로그 사이드바에 최근 댓글을, 홈페이지에는 최근 토론을 배치할 수 있습니다.

상위 페이지 목록 추가 Internal Link

The FastComments - Top Pages 블록은 상점에서 전체적으로 댓글 활동이 가장 많은 페이지들을 나열합니다. 가장 많이 논의된 게시물 또는 상품을 노출하는 데 사용하세요.

블록 추가

  1. Shopify 테마 편집기를 엽니다.
  2. 사이드바, 푸터 또는 블로그 인덱스 섹션 등 목록을 표시할 템플릿을 엽니다.
  3. 해당 섹션에서 Add block을 클릭합니다.
  4. Apps 아래에서 FastComments - Top Pages를 선택합니다.
  5. Save를 클릭합니다.

설정

설정기능기본값
Tenant ID (선택 사항)목록이 읽어올 FastComments 테넌트를 재정의합니다. 상점에 자동으로 구성된 테넌트를 사용하려면 비워 두세요.(비어 있음)

Top Pages vs Recent Discussions

  • Top Pages는 총 참여도를 기준으로 순위를 매깁니다. 따라서 동일한 게시물들이 한동안 상단에 머무르는 경향이 있습니다. "popular posts" 사이드바에 적합합니다.
  • Recent Discussions는 최신 활동을 기준으로 순위를 매겨 목록이 자주 교체됩니다. "what's hot right now" 패널에 적합합니다.

리뷰 요약 추가 Internal Link

The FastComments - Reviews Summary block shows an aggregated star rating and review breakdown for a page. Pair it with the FastComments block on product templates for the standard reviews layout: summary up top, review form and reviews below.

Prerequisite: set up Ratings & Reviews

The Reviews Summary block displays the rating questions you configured for your store. Set those up first:

  1. Open the FastComments app in your Shopify admin.
  2. Click the Ratings & Reviews Helper tile (or open Ratings & Reviews Helper directly).
  3. Add the questions you want each reviewer to answer (overall star rating, "how was the fit", etc.).

Without questions configured, the summary block has nothing to aggregate.

Add the block

  1. Open the Shopify theme editor.
  2. Open the Product template (or the page template where you want the summary).
  3. Click Add block near the top of the page section, above where the FastComments block will be.
  4. Under Apps, select FastComments - Reviews Summary.
  5. Add a FastComments block lower on the same page if you haven't already, so visitors can leave reviews.
  6. Click Save.

Settings

SettingWhat it doesDefault
Tenant ID (optional)Override which FastComments tenant the summary reads from. Leave blank to use the store's automatically-configured tenant.(blank)
Custom URL IDOverride the page identifier the summary aggregates against. Use this when the summary lives on a different page from the FastComments block it reflects.(auto-detected)

How the summary matches the reviews

The Reviews Summary block uses the same auto-detection logic as the FastComments block:

  • Product template: shopify-product-{product.id}
  • Blog post template: shopify-article-{article.id}
  • Other templates: the request path

For a normal product page, the summary and the comment thread share a URL ID automatically, with no configuration needed.

Tips

  • The summary is read-only. To collect reviews, you need a FastComments block on the same page.
  • If you change rating questions in Ratings & Reviews Helper after collecting reviews, the summary recalculates against the new question set.

Shopify 고객 자동 로그인 Internal Link

The FastComments 블록은 싱글 사인온을 지원하여 Shopify 고객이 별도의 FastComments 계정을 만들지 않고도 자신의 신원으로 댓글을 작성할 수 있게 합니다.

작동 방식

상점에 로그인한 방문자가 FastComments 블록이 있는 페이지를 열면:

  1. 블록이 Shopify customer 객체를 감지합니다.
  2. 서명된 앱 프록시 요청을 통해 고객의 이름과 이메일을 FastComments로 전송합니다.
  3. FastComments는 shopify-{customerId} 키로 사용자 계정을 생성하거나 매칭하므로, 동일한 고객은 세션이나 재설치에 관계없이 항상 동일한 FastComments 사용자에 매핑됩니다.
  4. 방문자의 이름이 댓글에 표시됩니다. 다시 로그인하라는 요청을 받지 않습니다.

방문자가 상점에 로그인하지 않은 경우, 블록은 익명 댓글 작성으로 대체됩니다(또는 위젯 구성에 따라 FastComments 로그인 흐름이 나타납니다).

SSO 끄기

SSO는 모든 FastComments 블록에서 기본적으로 활성화되어 있습니다. 특정 블록에서 비활성화하려면:

  1. Shopify 테마 편집기를 엽니다.
  2. 블록을 포함한 템플릿을 열고 블록을 클릭하여 선택합니다.
  3. SSO의 선택을 해제합니다.
  4. 저장을 클릭합니다.

댓글 작성자가 대화에서 별도의 정체성을 선택하도록 하려면 SSO를 끄십시오. 예: 직원들이 다른 표시 이름으로 댓글을 다는 내부 커뮤니티 페이지.

FastComments가 수신하는 정보

각 고객에게 전송되는 SSO 페이로드에는 다음이 포함됩니다:

  • Shopify 고객 ID에서 파생된 사용자 ID (shopify-{customerId}).
  • 고객의 이메일(사용자 식별에 사용되며 공개적으로 표시되지 않음).
  • 고객의 표시 이름(댓글 작성자 이름으로 사용됨).

주문 내역, 결제 정보 또는 주소 데이터는 전송되지 않습니다. 페이로드는 서버 측에서 서명되며, 고객의 브라우저는 자격 증명을 절대 보지 않습니다.

로그인 및 로그아웃 링크

SSO가 활성화되면 댓글 위젯의 로그인 및 로그아웃 링크는 표준 Shopify 고객 계정 경로인 /account/login 및 /account/logout을 가리킵니다. 별도로 구성할 것은 없습니다. 이 링크들은 고객 계정이 활성화된 모든 상점에서 작동합니다.

기존 댓글 가져오기 Internal Link

이미 Shopify 블로그 게시물에 댓글이 있고 이를 유지하려면 Shopify의 기본 댓글 기능을 비활성화하기 전에 FastComments로 가져오세요.

가져오기는 Shopify의 기본 댓글 기능이 활성화되어 있고 표시되는 동안에 실행되어야 합니다. 일단 비활성화하면 FastComments가 더 이상 해당 댓글을 읽을 수 없습니다.

가져오기 시작 방법

  1. 스토어에 FastComments 앱이 설치되어 있는지 확인하세요.
  2. 지금은 Shopify의 기본 댓글 기능을 활성화된 상태로 유지하세요.
  3. 지원 티켓을 열어 가져올 블로그를 알려주세요.

가져오기는 하루 이내에 완료됩니다.

기존 댓글이 FastComments로 가져와지면, 블로그 게시물 템플릿에 FastComments 블록을 추가하고 Shopify의 기본 댓글을 제거하거나 비활성화하세요. 자세한 내용은 블로그 게시물 및 제품에 댓글 추가를 참조하세요.

만약 기존 댓글을 유지할 필요가 없다면 이 페이지는 건너뛸 수 있습니다.

맞춤 설정 Internal Link

색상, 글꼴, 중재 규칙, 허용되는 HTML, 익명 댓글 작성 기능은 모두 스토어의 브랜딩에 맞게 구성할 수 있습니다.

Shopify 관리자에서 FastComments 앱을 열고 Customize 타일을 클릭하여 위젯 커스터마이즈 화면을 엽니다. 이 화면은 일회용 로그인 링크를 사용하므로 별도의 로그인은 필요하지 않습니다.

맞춤 설정 옵션 전체 목록은 맞춤 설정 및 구성 가이드를 참조하세요.

도메인 오류 Internal Link

Shopify App Store에서 FastComments를 설치한 경우, 상점 도메인이 테넌트의 승인된 도메인에 자동으로 추가되므로 도메인 오류가 표시되지 않아야 합니다. 이 페이지는 수동 설치 경로를 통해 설치했거나, 앱 설치 시점에 Shopify에 등록되지 않은 커스텀 도메인에서 스토어프론트가 제공되는 경우에 적용됩니다.

다음과 같은 권한 오류가 발생할 수 있습니다:

도메인 구성 누락
도메인 구성 누락

이는 FastComments가 위젯이 로드되는 도메인을 귀하의 테넌트에 대해 승인된 도메인으로 인식하지 못함을 의미합니다.

해결하려면 FastComments 계정에 도메인을 추가하세요: 도메인 구성.

수동 설치(고급) Internal Link

If you can't install the Shopify App Store app, you can still add FastComments by editing your theme. This path is useful when you want to wire up a FastComments tenant you already own, or when you're embedding on a Shopify storefront where the app isn't an option.

앱 기반 설치가 대부분의 스토어에 권장되는 방법입니다. 앱이 적합하지 않을 때만 이 방법을 사용하세요.

1단계: Shopify의 기본 댓글 비활성화

Shopify 관리자에서 Blog posts > Manage blogs로 이동하고 각 블로그를 열어 오른쪽 패널에서 Comments are disabled로 설정하세요. 저장.

이렇게 하면 Shopify의 기본 댓글이 FastComments와 함께 표시되는 것을 중지합니다.

2단계: 블로그 테마 템플릿 열기

Shopify 관리자에서:

  1. Online Store > Themes로 이동합니다.
  2. 현재 테마 아래에서 Actions > Edit code를 클릭합니다.
  3. 왼쪽 파일 브라우저에서 Sections를 열고 main-article.liquid를 클릭합니다.

이 템플릿은 Shopify가 단일 블로그 게시물을 렌더링할 때 사용하는 템플릿입니다.

3단계: FastComments 스니펫 붙여넣기

main-article.liquid의 대략 100번째 줄, 게시물 본문의 닫는 </div> 바로 다음으로 스크롤하세요. 다음 스니펫을 붙여넣으세요:

Shopify FastComments 스니펫
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget" class="page-width page-width--narrow"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: "demo",
8 urlId: window.location.pathname
9 }];
10</script>
11

Replace "demo" with your own Tenant ID from fastcomments.com/auth/my-account/api-secret. 저장을 클릭하세요.

4단계: 상점 도메인 승인

라이브 스토어에서 블로그 게시물을 엽니다. 댓글 위젯 대신 권한 오류가 표시되면 FastComments가 해당 테넌트를 이 스토어에서 사용할 수 있도록 허용해야 합니다. 자세한 내용은 도메인 오류를 참조하세요.

다른 페이지에 FastComments 추가하기

동일한 스니펫은 제품 페이지, 커스텀 페이지, 홈 페이지를 포함한 모든 Liquid 템플릿에서 작동합니다. 댓글을 표시하려는 위치에 붙여넣고, 페이지별로 안정적인 식별자가 필요하면 urlId를 조정하세요(예: 제품 템플릿에서 urlId: "{{ product.id }}").

이 가이드에 기여하기