Shopify予約ページのカスタマイズ手順 5ステップ

Shopifyの予約ページのカスタマイズは、テーマエディタだけで完結します。予約アプリのアプリブロックを商品ページの上部へ移し、開催日・定員・キャンセル条件とCTAをその手前に並べる。この順序を直すのが最短で、コードを書く必要はありません。

この記事が扱うのは 「予約ページの見た目と入力項目をどう整えるか」だけ です。どの予約アプリを選ぶかは Shopify予約アプリ5本の比較 に、来店予約の受け方そのものは Shopifyで来店予約を受け付ける方法 にまとめてあるので、まだアプリが決まっていない方はそちらを先に読んでください。ここでは「アプリはもう入れた。あとは見た目を直したい」という状態から始めます。

わたし（SHIN）はShopifyアプリ開発者で、予約アプリ「まるっと予約」を作っています。自社アプリを例に挙げる立場なので、利益相反があります。弱点も書いておきます。まるっと予約はApp Storeのレビューが0件、Built for Shopify認定も未取得です（2026年9月17日にApp Storeで確認）。実績で選びたい方には、まだ物足りない段階です。EC自体の運営は独立前の前職時代の経験で、いまは作る側にいます。

出典：Shopify App Store — まるっと予約

Shopifyの予約ページはカスタマイズでどこまで変えられる？

先に範囲を確認しておきます。ここを勘違いしたまま作業を始めると、変えられない場所を何時間もいじることになります。

Shopifyのオンラインストアは、テンプレート → セクション → ブロックという入れ子で組み立てられています。テーマエディタで並べ替えたり設定を変えたりできるのは、このセクションとブロックです。上限も公式に決まっています。

出典：Shopifyヘルプセンター — セクションとブロック

予約カレンダーは、このうち「アプリブロック」として差し込まれます。

アプリブロック

インストールしたアプリがテーマに追加するブロックのこと。テーマのセクションの中に置けるので、商品ページのどの位置にカレンダーを出すかをマーチャント側で決められます。テーマコードを書き換えないため、テーマを変えても壊れにくいのが利点です。

開発者側の呼び方では、アプリブロックには2種類あります。ページの特定の位置に置く App block と、ページ全体に効かせる App embed block です。予約カレンダーは前者、ポップアップやチャットのような全ページ共通の要素は後者にあたります。テーマエディタのどこに出てくるかが違うので、探す場所を間違えないようにしてください。

出典：Shopify.dev — About theme app extensions

変えられる場所と変えられない場所を整理すると、こうなります。

つまり、カレンダーそのものの中身は「アプリの設定でできる範囲」、その周りは「テーマで自由」。この線引きを覚えておけば、作業が迷子になりません。

完成イメージ — このチュートリアルで仕上げる予約ページ

最終的に目指すのは、トップページから予約導線に入り、商品ページの上部で開催日・価格・キャンセル条件とカレンダーを続けて確認できる状態です。完成形を先に見てから手順に入ったほうが迷いません。

出典：Shopifyヘルプセンター — テーマのカスタマイズ

ゴールを3つに分解しておきます。

• ファーストビューに「予約カレンダー」または「申し込みボタン」が見えている
• カレンダー周辺の見出し・説明・CTAがストアのデザインとそろっている
• スマホで開催条件を確認してから日時選択へ進める

前提条件

手を動かす前に、以下がそろっているか確認してください。そろっていないとどこかでつまずきます。

• Shopifyストアが開設済み（ベーシックプラン以上、または無料トライアル中）
• 予約アプリがインストール済み（このチュートリアルでは「まるっと予約」を例に進めます）
• ブランドのメインカラーがHEXコードで決まっている（例：#010080）
• イベントの内容・日程・定員・価格がドラフトでまとまっている
• PCとスマホの両方でプレビュー確認できる環境

出典：Shopifyヘルプセンター — テーマのカスタマイズ

Shopify予約ページのカスタマイズはなぜ効く？

手順に入る前に、なぜここまで丁寧にやる価値があるのかを数字で押さえておきます。Baymard Instituteが50件の調査を集計した平均では、オンラインショッピングのカート放棄率は 70.22% です。予約フォームも構造的にはチェックアウトと同じで、入力項目とステップが増えるほど離脱します。

出典：Baymard Institute — Cart Abandonment Rate Statistics

さらに、ウェブ全体ではモバイル経由の閲覧が大きな比率を占めます。ただし自店の比率はShopifyの分析で確認し、PCとスマホの両方で予約導線をテストしてください。

出典：Statista — Mobile Share of Web Traffic Worldwide

これらは予約ページそのものの効果を保証する数字ではありません。ただし、スマホ表示とチェックアウトまでの手順を実機で確認する理由にはなります。

手順 — Shopify予約ページのカスタマイズ5ステップ

ここからが本編です。作業時間を決め打ちせず、Step 1から順にプレビューとテスト予約を進めます。

1. 1

   Step 1：商品としての「イベント枠」を作る

   Shopify管理画面で受注会・教室・飲み比べ会などを「予約商品」として登録する
2. 2

   Step 2：テーマエディタでカレンダー位置を決める

   予約ページのファーストビューにカレンダー、または申し込みCTAを配置
3. 3

   Step 3：カレンダー周辺をブランドにそろえる

   テーマ側の見出し・背景・説明・CTAを統一し、アプリUIは現行設定の範囲を確認
4. 4

   Step 4：CTAテキストとボタン形状を最適化する

   「行動の結果」を書いたコピーに差し替え、タップ領域を44pt以上に
5. 5

   Step 5：サイト全体の導線を設計する

   トップ・商品ページ・SNS・Googleビジネスから予約ページに合流させる

Step 1：商品としての「イベント枠」を作る

Shopifyでは予約も「商品」として扱うのが基本です。アパレル受注会なら「2026春夏受注会・5月10日14:00枠」のように、イベントの開催回ごとに商品を作るとカレンダー側の管理が楽になります。

商品を登録するときに、説明文の冒頭に「日時・所要時間・定員・キャンセルポリシー」を箇条書きで入れておくと、後でテーマ側のレイアウト調整が一気にラクになります。ここを空にしたまま進めると、Step 3でカレンダーの手前に置く材料がなくて手が止まります。

Step 2：テーマエディタでカレンダー位置を決める

Shopifyの テーマエディタ でセクションとブロックを並べ替えて、予約カレンダー（または申し込みCTA）をファーストビューに移動します。

操作はシンプルです。

1. 1

   テーマエディタを開く

   Shopify管理画面 → オンラインストア → テーマ → 「カスタマイズ」をクリック
2. 2

   対象テンプレートに切り替える

   画面上部のテンプレート切り替えプルダウンから、対象の予約商品ページを選択
3. 3

   アプリブロックを追加する

   商品情報セクションで「ブロックを追加」を開き、ブロックピッカーから予約アプリのブロックを選ぶ
4. 4

   ブロックを並べ替える

   追加した予約ブロックを上にドラッグして、価格・説明の直後に入れる
5. 5

   2デバイスでプレビュー

   PC表示・スマホ表示の両方を切り替えて、ファーストビューに収まっているか確認
6. 6

   保存して反映

   問題なければ右上の「保存」をクリックして公開

出典：Shopifyヘルプセンター — セクションとブロック

スマホ表示の確認は必ず行ってください。PCでは見やすくても、スマホだと「画像 → 商品名 → 価格 → スクロールしないとカレンダーが見えない」という配置になることがあります。

サロンの定期予約と違って、単発イベントは「日付が読めるかどうか」が一番大事です。カレンダーよりも「2026年5月10日（土）14:00開催」と日付テキストを大きく出して、その下に「この日程で予約する」ボタンを置く構成も有効です。

Step 3：カレンダー周辺をブランドにそろえる

予約カレンダー自体の変更範囲はアプリによって異なります。まずはShopifyテーマ側で、カレンダーの直前に置く見出し、開催条件、背景、余白、CTAをそろえます。

Shopify側で触る場所は次の4つです。

まるっと予約はアプリブロックとしてカレンダーを埋め込めます。2026年9月17日時点のShopify App Storeのリスティングでは、カスタマイズ項目として「予約ページ」「カレンダーウィジェット」「カスタム通知」が掲載されています。色やフォントの個別設定がどこまで効くかは、契約前に管理画面またはサポートで確認してください。

出典：Shopify App Store — まるっと予約

Step 4：CTAテキストとボタン形状を最適化する

「予約する」というボタン文言は、実は心理的ハードルが少し高いです。「予約する＝確定する」と読まれてしまうからです。料理教室や飲み比べ会のように初対面の参加者が多いイベントでは、確定の手前に「中身を見てから決めたい」という気持ちが残ります。

そこで、ボタンには 行動の結果 を書きます。

ボタンの物理サイズも重要です。AppleのヒューマンインターフェイスガイドラインはiOS・iPadOSのコントロールについて、既定サイズを 44×44pt、最小サイズを28×28ptとしています。テーマエディタでボタンの高さを直接指定できない場合は、上下のパディングを広めに取って44pt相当を確保します。

出典：Apple Human Interface Guidelines — Accessibility

Step 5：サイト全体の導線を設計する

予約ページ単体を仕上げても、そこに人がたどり着かなければ意味がありません。最後に、ストア全体のどこから予約ページに合流させるかを設計します。

1. 1

   トップページのファーストビューに「次回イベント」バナー

   「5/10 受注会・受付中」のような、いま動いている枠を最上段に
2. 2

   関連商品ページから予約ページへ

   受注会で扱う商品の説明欄末尾に「この商品を試着できる受注会はこちら」
3. 3

   ヘッダーナビに「イベント予約」を常設

   ストアのどのページにいても1タップで予約に飛べる状態
4. 4

   フッターとSNSプロフィールに予約URL

   XプロフィールやGoogleビジネスプロフィールにも掲載
5. 5

   予約完了サンクスページに次回案内

   予約後に「次回6月の飲み比べ会はこちら」を出してLTVにつなげる

うまくいかないときはどこを見る？

詰まりやすいポイントを、症状から確認場所を引ける形にしました。上から順に切り分ければ、だいたいどこかで当たります。

1. 01

   カレンダーが見当たらない

   ブロックピッカーに予約アプリが出てこない場合、そのセクションがアプリブロックを受け付けない作りになっています。別のセクションで試すか、テーマのドキュメントで対応状況を確認してください。
2. 02

   ブロックを追加できない

   1テンプレートのセクション上限は25個、ブロック上限は1,250個です。上限に近いテンプレートでは、不要なセクションを削ってから追加します。
3. 03

   保存したのに公開ページが変わらない

   公開していないテーマを編集している可能性が高いです。テーマ一覧で「現在のテーマ」を確認してください。
4. 04

   色だけが浮いている

   アプリブロックはテーマのカラー設定を自動で継承しないことがあります。アプリ側の設定で追いつかない部分は、周囲の背景と余白でなじませます。

Shopify予約ページのカスタマイズでよくある質問

出典：Shopifyヘルプセンター — ストア通知

応用 — 次にやること

5ステップが終わったら、次の改善に進みます。単発イベントの主催者がここから手をつけると効きやすい順に並べました。

• 早割・友達紹介クーポンを設定して受注率を底上げする
• 受注会の前日リマインドメールを自動化してドタキャンを減らす
• XプロフィールとGoogleビジネスプロフィールに予約URLを反映する
• 参加者限定の二次販売ページ（受注会で見せた商品の通販）を準備する

クーポン設計は別記事で詳しく書いています。受注会の集客効率を一段引き上げたい方は Shopify予約クーポンの設計ガイド を参照してください。アパレル受注会そのものの組み立て方は Shopifyでアパレル受注会を運営するガイド にまとめています。

そもそも予約枠で受けるべきか、チケットを発行して当日もぎるべきかを決めていない場合は、先に Shopifyでイベント予約を受け付ける方法 を読んでください。参加者1人あたりのコストが型によって大きく変わります。

まとめ

このチュートリアルでやったことを振り返ります。

単発イベントの予約ページは、サロンの定期予約と違って「日付が目に入る」ことと「条件を確認してから日時を選べる」ことが重要です。コードを書かなくても、Shopifyのテーマエディタでアプリブロックと周辺情報を整理できます。

まるっと予約は、Shopifyテーマへ予約カレンダーを埋め込み、日時・スタッフ・部屋・設備・定員を管理できます。受注会・ポップアップ・料理教室・レンタルなど、時間枠を扱う予約を7日間の無料体験で確認できます。レビュー0件・Built for Shopify未取得という段階なので、まずは無料プランで手触りを確かめるのが安全です。

→ まるっと予約を7日間無料で試す

→ Shopifyを無料で試してみる

→ Shopify予約アプリ5つを比較