Guide
まるっと予約 — 使い方ガイド
かんたん4ステップで予約受付を開始できます。
初期設定から便利な使い方まで、画像付きでわかりやすく解説します。
Basic Setup
基本セットアップ
店舗情報を読み込む
Shopifyに登録されているお店の情報をアプリに取り込みます。入力の手間はありません。
- 左メニューの「ホーム」をクリック
- 右上の「ロケーションを読み込む」ボタンをクリック（上の画像の赤枠部分）
- お店の名前が表示されたら成功です
※ Shopify管理画面の「設定」→「ロケーション」に店舗が登録されている必要があります
確認方法
ホーム画面にお店の名前（ロケーション名）が表示されていれば完了です。
予約を受けるスタッフや部屋を登録
予約を受け付けるスタッフや部屋・スペースを登録します。
- 左メニューの「スタッフ・部屋」をクリック
- 「＋ 新しく追加」ボタンを押す
- 名前と種類（スタッフ / 部屋 / 機材）を選択
- 登録したら「シフトを設定」で出勤日と時間を設定
⚠ 重要
シフトを設定しないと、予約カレンダーに空き枠が表示されません。必ずスタッフ登録後にシフトを設定してください。
💡 お客様にわかりやすい名前で登録してください。例:「山田」「会議室A」「スタジオ1」
💡 1人のスタッフが複数店舗で働く場合も、店舗を切り替えてそれぞれシフトを設定できます
確認方法
「スタッフ・部屋」画面に登録したリソースが一覧表示され、シフトが設定済みになっていれば完了です。
予約メニュー・ポリシーを設定する
スタッフごとに提供するメニュー（サービス）を設定し、予約ルールをカスタマイズできます。
⚠ 重要
予約メニュー（サービス）をリソースに設定しないと、そのShopify商品ページに予約カレンダーが表示されません。必ずメニューをリソースに紐付けてください。
予約メニュー
各スタッフの詳細画面から「メニューを追加」でShopify商品と紐付けます。メニュー名・所要時間・バッファ時間・キャンセル期限を個別に設定できます。
予約ルール（共通設定）
- 予約枠の間隔: 15分刻み、30分刻みなど
- バッファタイム: 予約と予約の間の余裕時間
- キャンセル期限: 何時間前までキャンセルOKか
- リードタイム: 直前予約の制限（何分後から予約可能か）
📍 設定場所: サイドメニュー「スタッフ・部屋」
確認方法
「スタッフ・部屋」→ 対象リソースの詳細画面でメニューが紐付けられていれば完了です。
予約カレンダーをストアに設置
Shopifyのテーマエディタから、予約カレンダーを商品ページに追加します。
- Shopify管理画面で「オンラインストア」→「テーマ」を開く
- 「カスタマイズ」をクリック
- 商品ページ（商品テンプレート）へ移動 ※トップやコレクションページには設置できません
- 「ブロックを追加」から「Booking Calendar（予約カレンダー）」を選ぶ
- 「保存」を押して完了！
⚠ プレビューでは表示されません
テーマエディタ内のプレビューでは予約カレンダーは表示されない仕様です。保存後に画面右上の「ストアを表示」ボタン、または公開URLの商品ページを開いて確認してください。
設置後の実際の表示例。お客様はカレンダーから日付・時間・担当者を選んで予約できます。
確認方法
ストアのプレビューまたは公開ページを開き、予約カレンダーが表示されていれば完了です。
セットアップ完了！
お疲れさまでした！これで基本設定は完了です。
お客様がカレンダーから予約を入れると、管理画面の「予約一覧」にリアルタイムで表示されます。
次にテスト予約をしてみましょう
開いた商品ページからテスト予約を入れて、管理画面の「予約一覧」に反映されるか確認してください。実際の流れを体験できます。
ここからは、もっと便利に使うための機能をご紹介します。
Troubleshooting
予約カレンダーが表示されないときは
設定は終わったのに商品ページにカレンダーが出てこない、というお問い合わせで多い原因を上から順にまとめました。まずは A から順に確認してください。ほとんどのケースは A〜D のどれかで解決します。
テーマエディタ内のプレビューでは、予約カレンダーは表示されない仕様です。 お客様が実際に見る公開ページで動作するよう設計されているためです。
- テーマエディタで「保存」をクリック
- 画面右上の「ストアを表示」ボタンをクリック
- 公開ページで、予約カレンダーを設置した商品ページを開く
ここが一番多い誤解ポイント
「プレビューに出ないから設置できていない」と思われがちですが、 プレビューで非表示でも公開ページでは正しく表示されます。
予約カレンダーは「商品ごとに担当リソースが登録されているか」を内部的にチェックしています。 紐付けが無い商品では、テーマにブロックを追加していても非表示のままになります。
- サイドメニューの「スタッフ・部屋」を開く
- 対象のスタッフ（または部屋）の詳細画面へ進む
- 「メニューを追加」から、予約を受け付けたい Shopify 商品を選択
- 所要時間などを設定して保存
予約カレンダーのブロックは、テーマアプリ拡張の仕様上「商品テンプレート」専用として登録されています。 トップページ・コレクションページ・固定ページなどには追加できません。
見分け方
テーマエディタ左上でページ切替時に「商品ページ（または商品テンプレート）」を選択してから 「ブロックを追加」を行ってください。それ以外のテンプレートではそもそも選択肢に出てきません。
予約カレンダーは、商品ページの「カートに追加」フォーム（/cart/add）に紐付いて動作します。このフォームが無いと、カレンダー自体が起動できません。
⚠ 利用できないケース
- カートボタンを削除・非表示にする大幅カスタマイズを施したテーマ
- カート機能自体を無効化した商品（ボタンを出さない設定）
Shopify 標準テーマ（Dawn、Horizon 等）であればそのまま動作します。 独自テーマを利用中の場合は、商品ページに「カートに追加」ボタンが表示されているかご確認ください。
上記 A〜D をすべて確認しても表示されない場合、ブラウザの開発者ツールで詳細を確認できます。
- 予約カレンダーが表示されないはずの商品ページを開く
- ページ内で右クリック →「検証」を選ぶ（または Windows は
F12、Mac はOption + Command + I） - 開いたパネルで「Console」タブに赤いエラー、または「Network」タブに赤字（失敗）の通信が無いかを確認
うまく切り分けできない場合は、商品ページの URL・利用テーマ名・開発者ツールのスクリーンショットを添えて support@pepin.studio までご連絡ください。原因調査のうえ、最短でご返信します。
Advanced
もっと便利に使う
前払い（デポジット）を受け取る
予約時に全額ではなく一部だけ先にお支払いいただく仕組みです。無断キャンセルの防止に効果的です。
設定方法
- サイドメニュー「店舗管理・前払い設定」を開く
- 「＋ 新しく追加」でプランを作成
- 割合（例: 20%）または固定金額（例: 3,000円）を設定
- 適用する商品を選択
例
10,000円のサービスで20%前払い → 予約時に2,000円、当日に8,000円
顧客マイページ — お客様自身で予約を管理
お客様が自分の予約を確認・キャンセルできる専用ページです。
できること
- 予約一覧の確認（確定・処理中・キャンセル済み）
- 予約のキャンセル（キャンセル期限内であれば）
- Shopifyアカウントでログインして利用
前提条件
顧客マイページを利用するには、Shopify管理画面の「設定」→「顧客アカウント」で顧客アカウントを有効にする必要があります。
マイページURL
https://あなたのストア.myshopify.com/apps/booking/mypage
お客様がストアにログインすると自動的に利用できます。問い合わせ対応の負荷軽減にも繋がります。
よくある質問
まるっと予約をはじめる
まずは無料プランでお試しください。
Shopify App Storeからインストールできます。
ご不明な点は support@pepin.studio までお気軽にお問い合わせください。