APIANT

Shopify 스토어에 Mindbody 예약 위젯을 추가하는 방법

고객이 Shopify 스토어에서 강의를 구매하고 몇 분 안에 예약할 수 있도록 하려면 어떻게 해야 할까요? 코드를 한 줄도 작성하지 않고 두 기능을 연결하는 방법을 알려드리겠습니다.

Shopify 로고가 빛나는 예약 달력을 통해 Mindbody 로고와 연결되어 있습니다.

고객이 온라인에서 스튜디오를 찾아 쇼피파이 스토어에 접속해 10회 수업 패키지를 구매했습니다. 좋습니다. 그런데 이제 어떻게 해야 할까요? 많은 경우, 바로 이 지점에서 고객 경험이 정체됩니다. 고객은 결제를 완료했지만, 실제로 수업을 예약할 수 있는 명확한 방법이 보이지 않고, 몇 분 후에는 "마인드바디(Mindbody)"라는 처음 들어보는 회사에서 보낸 복잡한 비밀번호 입력 이메일을 받게 됩니다.

이 가이드는 두 가지 문제를 모두 해결합니다. 먼저, 고객이 몇 번의 클릭만으로 예약할 수 있도록 Mindbody 예약 위젯을 Shopify 스토어에 직접 추가하는 방법을 안내합니다. 그런 다음 Mindbody의 결제 시스템을 사용할 수 없는 경우에도 Shopify에서 판매하는 방법과 ShopConnect가 두 시스템을 백그라운드에서 어떻게 연결하는지 설명합니다.

개발자가 아니어도 괜찮습니다. 쇼피파이에서 페이지를 편집할 수 있다면 이 모든 것도 할 수 있습니다.


파트 1: 쇼피파이 스토어에 마인드바디 예약 위젯 추가하기

목표는 간단합니다. 고객이 사이트를 떠나지 않고도 예약할 수 있도록 Shopify 스토어에 Mindbody 실시간 일정을 보여주는 "지금 예약" 페이지를 만드는 것입니다.

먼저 필요한 것

  • 당신의 마음과 몸 브랜드 웹 위젯 코드 조각 (Mindbody 계정에서 확인할 수 있습니다)
  • 온라인 스토어가 포함된 Shopify 플랜(Basic, Grow, Advanced 또는 Plus)
  • Shopify 스토어에 대한 관리자 액세스 권한
  • 온라인 스토어 2.0 테마 (Dawn과 같은)

이 모든 것을 갖추셨다면 준비 완료입니다.

1단계: 페이지 생성

Shopify 관리자 페이지에서 다음으로 이동하세요. 온라인 스토어 → 페이지 → 페이지 추가.

"지금 예약하기"와 같은 제목을 지정하세요. 이 제목은 페이지의 웹 주소가 됩니다. 원한다면 콘텐츠 상자에 간단한 소개를 추가할 수 있습니다. 그런 다음 클릭하세요. 구하다.

Shopify 페이지 화면에서 '페이지 추가' 버튼이 강조 표시되어 있습니다.

2단계: 사용자 지정 템플릿 만들기

페이지를 편집하는 동안 오른쪽에서 다음을 확인하세요. 주형 드롭다운 메뉴를 클릭하고 선택하세요. 템플릿 생성.

템플릿 이름을 페이지 이름으로 지정하고(예: "book-now") 사용하세요. 기본 페이지 기본으로 사용하세요. 클릭하세요. 구하다.

이렇게 하면 예약 페이지에 자체 템플릿이 제공되므로 스토어의 다른 부분에 영향을 주지 않고 위젯을 추가할 수 있습니다.

3단계: 사용자 지정 Liquid 섹션을 사용하여 위젯 코드를 추가합니다.

이제 가세요 온라인 스토어 → 테마 클릭하고 클릭하세요 맞춤 설정 현재 테마에서.

상단의 페이지 드롭다운 메뉴를 사용하여 방금 생성한 새 페이지와 템플릿을 선택하세요. 왼쪽 패널에서 클릭하세요. 섹션 추가 → 사용자 지정 Liquid.

마인드바디 예약 위젯 코드를 이 상자에 붙여넣으세요. 코드는 다음과 같습니다.

<div class="mindbody-widget" data-widget-type="Schedules" data-widget-id="XXXXXXXXXXX"></div>
<script async src="https://brandedweb.mindbodyonline.com/embed/widget.js"></script>

교체하세요 XXXXXXXXXXX Mindbody에서 발급받은 고유 위젯 ID를 사용하세요. 클릭하세요. 구하다그러면 예약 위젯 미리보기가 바로 나타납니다.

Dawn 테마 편집기: Mindbody 위젯 코드가 포함된 사용자 지정 Liquid 섹션으로, 수업 일정이 페이지 미리보기에서 실시간으로 표시됩니다.

4단계: 페이지를 표시합니다.

돌아가기 온라인 스토어 → 페이지 그리고 페이지를 여세요.

세트 가시성 → 표시됨그런 다음 클릭하세요 구하다해당 웹페이지 주소를 방문하여 위젯이 제대로 로드되고 일정이 표시되는지 확인하세요.

Shopify "지금 예약하기" 랜딩 페이지로, 예약 방법 설명, 서비스 링크, 그리고 Mindbody Schedules 예약 위젯이 포함되어 있습니다.

5단계: 페이지를 스토어 메뉴에 추가하세요

마지막 단계: 페이지를 쉽게 찾을 수 있도록 만드세요. 다음으로 이동하세요. 온라인 스토어 → 탐색 그리고 열어보세요 메인 메뉴.

딸깍 하는 소리 메뉴 항목 추가이름을 "지금 예약하기"로 지정하고, 생성한 페이지에 연결하세요. 클릭하세요. 추가하다, 그 다음에 구하다.

Shopify 탐색 화면으로, 새 '지금 예약하기' 항목이 추가된 메인 메뉴를 보여줍니다.

이게 전부입니다. 이제 고객은 매장에서 바로 예약할 수 있습니다.

(선택 사항: 회원가입 페이지도 추가할 수 있습니다.)

회원가입 페이지도 필요한 경우, 다음 회원가입 위젯 코드를 사용하여 1단계부터 4단계까지를 반복하세요.

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>
<healcode-widget data-type="registrations" data-widget-partner="object" data-widget-id="XXXXXXXXXXX" data-widget-version="0"></healcode-widget>

그런 다음 두 페이지를 상호 연결하여 고객이 예약과 등록 페이지를 쉽게 오갈 수 있도록 하세요.


파트 2: Mindbody 결제 처리 시스템 없이 Shopify에서 판매하기

일부 지역에서는 Mindbody의 결제 처리 시스템을 이용할 수 없어 Mindbody를 통해 직접 결제를 받을 수 없습니다. 하지만 다행히 Shopify에서 서비스, 패키지, 멤버십을 판매하고 모든 결제 내역을 Mindbody에 정상적으로 연동할 수 있습니다. 다만, 결제 과정이 "먼저 구매하고 나중에 예약"하는 방식으로 약간 변경됩니다.

흐름이 작동하는 방식

  1. 고객이 Shopify 스토어에서 서비스, 패키지 또는 멤버십을 구매합니다.
  2. 샵커넥트 Mindbody 고객 기록을 생성하거나 일치시키고 구매 내역을 기록하므로 Mindbody에 이미 크레딧이 등록되어 있습니다.
  3. 고객은 마인드바디에 로그인하여 실제 예약이나 수업을 예약합니다.

ShopConnect는 두 시스템을 연결하는 역할을 합니다. 고객이 Shopify에서 결제하면 ShopConnect가 자동으로 Mindbody에서 해당 구매 내역이 정확한 고객에게 표시되도록 해주므로, 별도의 입력 작업이 필요하지 않습니다.

하나의 거친 부분, 그리고 그것을 매끄럽게 하는 방법

만약 고객이 쇼피파이 스토어에서 결제를 완료하면 마인드바디(Mindbody)에서 비밀번호 입력 이메일을 보내는데, 이 이메일을 처음 보는 고객은 스팸 메일처럼 생각하고 무시할 수 있습니다. 그리고는 수업이 어디 있는지 궁금해하게 되죠.

해결책은 소통입니다. 문서에서는 단일 소통을 권장합니다. 마스터 메시지 구매 후 고객이 받는 이메일 전체에서 재사용하는 내용:

저희 온라인 스토어에서 구매해주셔서 감사합니다! 온라인 예약 시스템에서 보내드리는 비밀번호 이메일을 확인해 주세요. 마인드바디 온라인비밀번호를 설정하신 후 클릭하세요. 여기 진료 예약이나 수업 예약을 하시려면 여기를 클릭하세요.

"여기"라는 단어는 예약 페이지(1부에서 만든 Shopify "지금 예약하기" 페이지 또는 다른 웹사이트의 동일한 페이지)로 연결됩니다.

메시지를 보낼 위치: 이메일 세 통

구매 후 고객이 받는 세 번의 이메일에는 공통된 핵심 메시지가 반영됩니다.

이메일 1: 쇼피파이 주문 확인 이메일. Shopify에서 다음으로 이동하세요. 설정 → 알림 → 주문 확인이메일 상단, 주문 요약 바로 위에 핵심 메시지를 추가하세요. 이렇게 하면 고객이 결제 단계에 있을 때, 즉 아직 집중하고 있을 때 기대감을 조성할 수 있습니다.

이메일 2: Mindbody의 "로그인 정보 찾기" 이메일. 이것은 공유되는 자동 이메일이므로 완전히 교체할 수는 없습니다. 대신 기존 콘텐츠 뒤에 조건부 블록을 추가하세요.

저희 온라인 스토어에서 방금 구매하셨나요? 위 정보를 사용하여 로그인한 후 클릭하세요. 여기 예약 또는 수업 예약은 이미 구매 내역이 등록되어 있는 상태에서 진행하시면 됩니다.

이 기능은 Mindbody Business 자동 이메일 설정에서 찾을 수 있습니다. 고객에게 로그인 정보를 제공하는 동시에 방금 구매한 내역과 연결해 줍니다.

이메일 3: 마인드바디 환영 이메일. ShopConnect는 비즈니스 모드로 클라이언트를 생성하므로 비즈니스 모드 버전을 수정하세요. 동일한 유형의 블록을 추가합니다.

저희 온라인 스토어에서 방금 구매하셨나요? 계정에 로그인한 다음 클릭하세요. 여기 예약 또는 수업 예약은 이미 구매 내역이 등록되어 있는 상태에서 진행하시면 됩니다.

이 내용은 마인드바디 비즈니스 자동 이메일에도 포함되어 있습니다. 온보딩 과정에서 예약 단계를 다시 한번 강조하는 역할을 합니다.

각 "여기" 링크는 고객을 Mindbody 브랜드 웹 예약 위젯이 포함된 페이지로 연결해야 합니다. 두 가지 옵션이 있습니다.

  • 쇼피파이 페이지 (기본 플랜 이상 필요, 스타터 플랜에서는 이용 불가). 이 페이지는 파트 1의 "지금 예약하기" 페이지와 동일합니다.
  • 외부 웹사이트입니다. 예약 페이지가 Squarespace, Wix, WordPress 또는 다른 플랫폼에 있는 경우, 위젯을 해당 플랫폼에 삽입하고 링크를 위젯으로 연결하세요.

어느 쪽이든, 파트 1의 마지막에 나왔던 페이지와 동일합니다. 위쪽에는 설명 텍스트가 있고, 아래쪽에는 예약 위젯이 있습니다.

알아둘 가치가 있는 장소

ShopConnect에는 다음이 포함됩니다. Send_mbo_password_reset_email ShopConnect가 Mindbody 비밀번호 재설정 이메일을 자동으로 발송할지 여부를 제어하는 설정입니다. 이 설정이 있다는 것을 알아두면 실제로 발송되는 이메일 내용에 맞춰 이메일 메시지를 조정할 수 있습니다.


이것이 중요한 이유

예약 위젯과 수정된 이메일 세 통, 별것 아닌 것처럼 들릴지 모르지만, 이 두 가지를 합치면 온라인 피트니스 및 웰니스 서비스 판매에서 가장 흔히 발생하는 공백, 즉 "결제 완료"와 "예약 완료" 사이의 간극을 메울 수 있습니다. 고객은 바로 이 공백에서 혼란스러워하거나, 예약을 포기하거나, 수업이 어떻게 됐는지 묻는 이메일을 보내게 됩니다.

Shopify 스토어에 예약 위젯을 직접 추가하면 중간 단계를 없앨 수 있습니다. 구매 후 이메일을 미리 준비하면 예상치 못한 상황을 방지할 수 있습니다. 또한 ShopConnect를 사용하면 구매 내역을 Mindbody 고객과 자동으로 연결하여 두 시스템을 수동으로 대조하는 번거로움을 없앨 수 있습니다.

핵심 요약

  • 예약 위젯은 Shopify에서 5단계로 구현할 수 있는 작업입니다. 페이지를 만들고 템플릿을 지정한 다음, Custom Liquid를 통해 Mindbody 위젯 코드를 삽입하고, 위젯을 표시하도록 설정한 후 메뉴에 추가하세요.
  • Mindbody 결제 처리 시스템 없이도 Shopify에서 상품을 판매할 수 있습니다. 구매 순서는 "먼저 구매하고 나중에 예약"하는 방식이 되며, ShopConnect는 각 구매 내역을 해당 Mindbody 고객 정보에 자동으로 기록합니다.
  • 결제 처리 과정이 없는 상황에서는 소통이 핵심입니다. 세 개의 이메일에 걸쳐 전달되는 하나의 핵심 메시지는 "Mindbody 비밀번호 이메일이 뭐지?"라는 혼란을 방지합니다.
  • "여기" 링크와 예약 위젯은 동일한 페이지에 있어야 합니다. 한 번 구축하면 어디든 링크할 수 있습니다.

ShopConnect를 사용 중이신데 Shopify 스토어와 Mindbody를 연동하는 데 도움이 필요하신가요? APIANT 팀에 문의해 주세요. 저희가 기꺼이 도와드리겠습니다.