Shopify용 FlowHunt AI 챗봇 만들기

Shopify용 FlowHunt AI 챗봇 만들기

Shopify Chatbot Integrations Guide

이 가이드는 FlowHunt를 Shopify 스토어에 연결하고, 미리 만들어진 Shopify 챗봇 플로우를 추가한 뒤, 플로우를 배포하고 챗봇을 스토어프런트에 임베드하는 과정을 안내합니다.


사전 준비 사항

  • 관리자 권한이 있는 Shopify 스토어
  • 워크스페이스 접근 권한이 있는 FlowHunt 계정: https://app.flowhunt.io/
  • 중요: FlowHunt 계정과 Shopify 관리자 계정에 동일한 이메일을 사용하세요.

1) Shopify와 FlowHunt 연동하기 (Shopify 앱스토어 이용)

  1. Shopify 앱스토어를 열고 “FlowHunt”를 검색합니다.
  2. 설치를 클릭하고, 필요하다면 올바른 스토어를 선택합니다.
  3. 요청된 권한을 확인한 후 앱 설치 / 인증을 클릭합니다.

설치 후에는 Shopify 또는 FlowHunt로 리디렉션됩니다. 마켓플레이스 설치 플로우를 통해 연결이 완료됩니다.

Shopify OAuth installation screen

2) FlowHunt 앱을 Shopify 스토어에 설치하기

  1. Shopify 인증 화면에서 요청 권한을 확인하세요.
  2. 앱 설치를 클릭하여 설치를 완료합니다.

3) Shopify 연동 활성화 여부 확인

설치가 완료되면 FlowHunt → 통합(Integtrations)으로 돌아갑니다. Shopify가 연결됨/활성화됨으로 표시되어야 합니다.

활성화되지 않은 경우, 다시 연결(Connect)을 클릭하고 인증 과정을 따라 진행하세요.

FlowHunt integrations page showing Shopify connected

4) Flow 라이브러리에서 Shopify 챗봇 추가

  1. FlowHunt에서 Flow 라이브러리로 이동합니다.
  2. “Shopify Chatbot”을 검색합니다.
  3. 템플릿을 열고 워크스페이스에 추가(Add to Workspace)를 클릭합니다.

이렇게 하면 바로 사용할 수 있는 Shopify 챗봇 플로우가 워크스페이스에 추가됩니다.

FlowHunt Flow Library showing Shopify chatbot template

5) 챗봇을 브랜드에 맞게 커스터마이즈하기

방금 추가한 플로우를 열고 다음을 조정하세요:

  • 시스템 프롬프트 및 톤: 브랜드 보이스와 가이드라인을 설정합니다.
  • 지식 소스: 상품 카탈로그, FAQ, 정책, 기타 문서를 연결합니다.
  • 도구 및 액션: 플랜과 설정에 따라 주문 조회, 상태 확인, CRM 업데이트 등을 옵션으로 활성화할 수 있습니다.
  • UI/브랜딩: 챗봇 이름, 인사말, 기타 라벨 등은 추후 Chatbots 섹션에서 설정할 수 있습니다.

작업이 끝나면 저장(Save)하세요.

FlowHunt Shopify chatbot flow customization interface

6) 플로우 배포하기

플로우에서 배포(Publish)를 클릭하면 웹사이트/스토어프런트에서 챗봇이 사용할 수 있게 됩니다.

FlowHunt publish flow interface

7) 새로운 통합 코드(챗봇) 만들기

  1. FlowHunt의 Chatbots로 이동합니다.
  2. 새 통합 코드(New Integration Code)를 클릭합니다.
  3. 위에서 만든 배포된 플로우를 선택합니다.
  4. 위젯 옵션(테마, 위치, 오픈 방식, 언어, 도메인 허용 목록 등)을 설정합니다.
  5. 저장(Save)합니다. FlowHunt가 스크립트 스니펫(통합 코드)을 생성합니다.

이 스니펫을 잘 보관하세요. 다음 단계에서 Shopify 테마에 붙여넣게 됩니다.

FlowHunt chatbot integration code generation

8) Shopify 스토어프런트에 챗봇 임베드하기

통합 코드를 추가하는 방법은 두 가지가 있습니다. 상황에 맞는 방법을 선택하세요.

옵션 A — theme.liquid에 추가 (사이트 전체 적용)

이 방법은 스토어의 모든 페이지에 챗봇을 표시합니다. 다음 단계를 따라하세요:

1단계: Shopify 관리자에서 온라인 스토어 > 테마로 이동

Shopify Online Store Themes section

2단계: 활성 테마 옆의 사용자 지정(Customize) 버튼 클릭
3단계: 왼쪽 상단의 3점(⋯) 클릭 후 코드 편집(Edit Code) 선택

Shopify Edit Code option

4단계: Layout 폴더에서 theme.liquid 파일을 찾기(/layout/theme.liquid)

Shopify theme.liquid file location

5단계: </body> 태그 바로 앞에 통합 코드를 붙여넣기
6단계: Ctrl + S (Mac은 Cmd + S)로 변경사항 저장

저장 후 스토어프런트에 방문해 새로고침하면 모든 페이지에서 챗봇이 보입니다.

Shopify storefront with FlowHunt chatbot visible

중요 참고사항:

  • </body> 바로 앞에 붙여넣어야 모든 페이지에 위젯이 로드됩니다.
  • FlowHunt 스니펫은 그대로 수정 없이 붙여넣으세요.
  • 챗봇은 스토어 모든 페이지에 표시됩니다.

옵션 B — Custom Liquid 섹션으로 추가 (특정 페이지만)

이 방법은 챗봇을 특정 페이지나 템플릿에만 표시하도록 할 수 있습니다. 예를 들어 상품 페이지나 랜딩 페이지에만 챗봇을 추가할 때 적합합니다.

1단계: 온라인 스토어 > 테마로 이동 후, 활성 테마 옆의 사용자 지정(Customize) 클릭

Shopify Customize theme for specific pages

2단계: 챗봇을 추가할 특정 템플릿(예: 상품, 컬렉션 또는 특정 페이지)으로 이동

Selecting specific template in Shopify theme customizer

3단계: 섹션 추가(Add section) 또는 블록 추가(Add block) 클릭(테마에 따라 다름)
4단계: 목록에서 Custom Liquid 선택
5단계: Custom Liquid 내용 영역에 FlowHunt 통합 코드를 붙여넣기

Pasting integration code in Custom Liquid section

6단계: 저장(Save)미리보기(Preview) 클릭하여 해당 템플릿에서 챗봇을 테스트

Saving and previewing changes in Shopify

중요 참고사항:

  • 이 방법은 챗봇이 표시되는 위치를 세밀하게 제어할 수 있습니다.
  • 챗봇을 원하는 각 템플릿마다 이 과정을 반복해야 합니다.
  • 전체 적용 전, 특정 페이지만 테스트하기에 유용합니다.
  • 챗봇은 설정한 템플릿에만 표시됩니다.

검증 및 테스트

  • 인코그니토/시크릿 창에서 스토어프런트를 열어 캐시된 자산이 없는지 확인합니다.
  • 배송, 반품, 상품 재고 등 자주 묻는 질문을 입력하여 플로우를 점검합니다.
  • FlowHunt 대화 기록(필요시 Verbose 활성화)을 검토해 어떤 문서나 도구가 사용됐는지 확인하세요.

문제 해결

  • 챗봇이 보이지 않을 때: 통합 코드가 페이지에 포함됐는지, 테마가 게시됐는지, Chatbots 설정에서 도메인이 허용됐는지 확인하세요.
  • 위젯이 중복될 때: 중복된 스니펫을 제거하고, 활성 통합 코드 하나만 남기세요.
  • 답변이 누락될 때: 플로우의 지식 소스와 문서 검색기 설정을 확인하고, 다시 배포하세요.
  • Shopify 권한 오류: FlowHunt → 통합에서 Shopify를 다시 연결하고, 필요하다면 재설치하세요.

자주 묻는 질문

더 알아보기

쇼피파이
쇼피파이

쇼피파이

FlowHunt를 Shopify와 연동하여 제품 탐색, 주문 추적을 자동화하고 AI로 이커머스 워크플로우를 간소화하세요.

1 분 읽기
AI Shopify +3
Gemini 1.5 Flash를 Slack에 추가하기: 간단 가이드
Gemini 1.5 Flash를 Slack에 추가하기: 간단 가이드

Gemini 1.5 Flash를 Slack에 추가하기: 간단 가이드

Flowhunt를 사용해 Gemini 1.5 Flash와 Slack을 통합하여 쿼리에 답변하고, 작업을 자동화하며, 팀 협업을 강화하는 강력한 Slackbot을 만들어보세요. 통합 설정 방법, AI 기반 플로우 구축, 그리고 업무 공간에서 생산성 향상법을 알아보세요....

2 분 읽기
Gemini 1.5 Flash Slack +6
팀을 위한 Slack에 Claude 2 추가하기
팀을 위한 Slack에 Claude 2 추가하기

팀을 위한 Slack에 Claude 2 추가하기

Flowhunt를 활용해 Claude 2를 Slack에 통합하여 쿼리에 응답하고, 작업을 자동화하며, 팀 협업을 강화하는 강력한 Slackbot을 만들어보세요. 통합 설정 방법, AI 기반 플로우 구축, 워크스페이스 생산성 향상 방법을 알아보세요....

3 분 읽기
Slack AI +5