4. ストアに予約カレンダーを置く
このページでやること: テーマエディタで、商品ページに「予約カレンダー」ブロックを追加します。ホームで設置できたかを確かめ、お客様が予約する流れとマイページを確認します。
置く前に確認すること
- 公開中のテーマが、アプリのブロックに対応していること。Online Store 2.0 に対応したテーマ（Dawn・Horizon など）なら置けます
- 予約メニューに紐づいた商品があり、そのメニューが「公開中」であること（2. 予約メニューと予約対象）
- その商品のステータスが「アクティブ」であること。下書きのままだと、予約ボタンを押しても「売り切れ」と表示されます
予約カレンダーが表示されるのは、公開中の予約メニューに紐づいた商品のページだけです。テーマエディタで1回追加すれば、同じ商品テンプレートを使う予約商品のページすべてに表示されます。
予約カレンダーブロックを追加する
- ホームの「ストアの状態」にある［テーマエディタを開く］をクリックします。はじめの設定の完了画面からは［テーマエディタで設定する］で開きます。予約メニューの商品が分かる場合は、その商品のプレビューでテーマエディタが開きます
- 左のメニューで、商品情報のセクションにある［ブロックを追加］をクリックします
- アプリのブロックから「予約カレンダー」を選びます
- ブロックが商品情報のセクションの中にあることを確かめて、右上の［保存］をクリックします
ブロックは商品フォームの中に置きます
商品フォームの外に置くと、「このブロックは商品フォーム内に追加してください。」と表示されます。商品ページの「商品情報」セクションの中が目安です。
予約メニューに紐づいていない商品をテーマエディタでプレビューしているときは、予約カレンダーの見本が表示されます。見本はテーマエディタの中だけで表示されます。ストアでは、予約メニューに紐づいた商品のページに実際の空き状況が表示されます。
予約カレンダーを表示している商品ページでは、テーマの「カートに追加」「今すぐ購入」のボタンを隠します。お客様は予約カレンダーの［予約する］から購入します。
ブロックの設定
テーマエディタでブロックを選ぶと、右側に設定が表示されます。
| まとまり | 設定できること |
|---|---|
| 用途テンプレート | 受注会・試着・POPUP向け、受注会、試着予約、POPUP来店予約、イベント予約、サロン・サービス予約、無料相談、カスタム予約から選びます。見出しと予約ボタンの文言の初期値が変わります |
| 文言 | ［タイトル］［予約ボタン文言］［予約対象選択のラベル］。予約ボタン文言を空欄にすると、用途テンプレートに合わせた文言を表示します |
| 「指名なし」を選べるようにする | 予約対象が2つ以上あるときに、先頭に「指名なし」を出します。予約時に、空いている担当者を自動で割り当てます |
| お客様メモ | ［メモ入力欄を表示する］をオンにすると、お客様が予約時にメモを入力できます（500文字まで）。内容は予約一覧に表示されます。決まった質問を聞きたいときは、アプリの設定の予約時の質問を使います |
| 空き待ち | ［満員の時間枠で空き待ちを受け付ける］をオンにすると、満員の枠に空き待ちを登録できます。自動の通知は送りません |
| 外観 | テーマ（テーマに合わせる・ライト・ダーク・カスタム）、アクセントカラー、ボタン・選択中の文字色、余白、外枠、角丸、フォント |
| 幅と配置 | コンテナ幅いっぱいにするか、最大幅を指定するか。配置（左・中央・右） |
| 日付と時間枠 | 日付の選び方（月カレンダー・日付の横スクロール）、時間枠の列数、時間枠の表示（開始〜終了・開始時刻のみ） |
「テーマに合わせる」を選ぶと、ストアのフォント・文字色・背景色をそのまま使います。日付の横スクロールは日付を1列に並べるので、スマートフォンでも予約カレンダーが縦に長くなりません。
設置できたかを確かめる
ホームの「ストアの状態」で、「予約カレンダー」の状態を確認できます。
| 表示 | 状態 |
|---|---|
| 設置済み | 公開中のテーマに予約カレンダーが設置されています |
| 表示を確認済み | ストアで予約カレンダーが表示されたことを確認しました |
| 未設置 | 公開中のテーマに予約カレンダーがありません。商品ページにブロックを追加してください |
| テーマが未対応 | 公開中のテーマがアプリのブロックに対応していません。Online Store 2.0 に対応したテーマに切り替えると設置できます |
| 確認中 | 公開中のテーマの設置状況を確認しています |
お客様が予約する流れ
- 複数の店舗で予約を受け付けている場合は、店舗を選びます
- 予約対象（担当者・部屋・機材）が2つ以上ある場合は、予約対象を選びます
- 日付を選び、空いている時間を選びます
- メモ入力欄を表示している場合は、ご要望などを入力します（任意）
- 「予約内容」で店舗・予約対象・日時を確かめて、［予約する］を押します。選び直すときは［選択をやり直す］を押します
- 選んだ枠を仮押さえして商品をカートに入れ、チェックアウトの画面に進みます
- お客様が注文を確定すると予約が確定し、アプリの予約一覧に表示されます
注文の明細には「予約日時」が付きます。注文確認のメールは Shopify から届きます。メールに予約日時を出す手順は7. お客様への通知で説明します。
予約が埋まっている時間の表示
| 予約対象の設定 | 埋まった時間の表示 |
|---|---|
| 定員数が1で、空き待ちを受け付けない | 時間の一覧に表示しません |
| 定員数が2以上 | 「満員」と表示します。空いている時間には「空き枠：3」のように残りの数を表示します |
| 空き待ちを受け付ける | 「満員（空き待ち）」と表示します。押すと空き待ちの登録欄が開きます |
空き待ちの登録欄では、お名前・メールアドレス・電話番号（任意）・メモ（任意）を入力して［空き待ちに登録する］を押します。登録した空き待ちは、予約一覧の「空き待ち」に表示されます（5. 予約を確認・管理する）。
テスト予約をする
設置が終わったら、ストアで1件予約してみてください。予約カレンダーの［予約する］からチェックアウトまで進み、注文を確定します。アプリの［予約一覧］に予約が表示されれば、受付の準備は完了です。
Free でテストした予約の数え方
Free の累計10件は、予約一覧で予約をキャンセルしても戻りません。テストの注文を Shopify でキャンセルすると、その予約は累計の数から外れます。
マイページ
お客様は、マイページで自分の予約を確認できます。マイページの URL は次のとおりです。
https://（ストアのドメイン）/apps/booking/mypageストアのメニューや、お客様へのメールにリンクを置いて案内してください。
| お客様の状態 | 表示される内容 |
|---|---|
| ストアにログインしている | 「今後の予約」と「過去・キャンセルした予約」 |
| ログインしていない | ログインページへのリンクと、注文番号で予約を確認する欄。注文時のメールアドレスと注文番号（例: #1001）を入力すると、その注文の予約を表示します |
マイページでは、お客様が次の操作をできます。
| 操作 | 条件 |
|---|---|
| ［キャンセル］ | 予約メニューのキャンセル期限まで |
| ［日時を変更］ | キャンセル期限まで。同じメニュー・同じ担当・同じ店舗の空いている日時に変更できます。複数のメニューを含む予約は変更できません |
| Googleカレンダーに追加・ICSをダウンロード | Pro のストアで、確定した予約に表示されます |
キャンセル期限を過ぎると、「キャンセル期限を過ぎています。変更はお店へお問い合わせください。」と表示されます。メニューや担当を変えたいお客様には、キャンセルしてから予約し直すよう案内が表示されます。
マイページでキャンセルしても返金はされません
マイページには「お支払い済みの場合の返金については、お店へお問い合わせください。」と表示されます。返金が必要な場合は、Shopify の注文の画面から返金してください。
次にやること
- 入ってきた予約を確認する：5. 予約を確認・管理する
- 注文確認メールに予約日時を出す：7. お客様への通知