Shopifyのチェックアウトページをカスタマイズできるアプリ「Checkout Blocks」が、2024年にShopifyにより買収され、Plusプランのストアに対して無料で提供されることになりました。本記事では、Checkout Blocksの特徴や機能を解説するとともに、実際の活用例として「年末年始の配送遅延案内」「予約商品の注意事項表示」「よくある質問の表示」という3つの具体的な実装方法をご紹介します。
Checkout Blocks（チェックアウト ブロックス）とは
Checkout Blocks（チェックアウト ブロックス）は、Shopify純正のページ拡張アプリです。アプリを利用することで全てのプランのストアがサンキューページと注文追跡ページをカスタマイズすることができます。さらに、Plusプランのストアは、チェックアウトページも拡張することが可能です。
Checkout Blocksは、2024年にShopifyにより買収され、もともと月額99ドルだったスタータープランが、Plusプランのストアを対象に無料で提供されることになりました。
それから、Shopify Editions 25年冬（2024年12月11日）にて全プランのストアを対象にサンキューページと注文追跡ページのカスタマイズが無料で利用できるようになりました。
Checkout Blocksの料金プラン
無料
Checkout Blocksの機能・特徴
無料で利用できる
一番嬉しい特徴は、全機能を無料で利用できる点です。サンキューページや注文追跡ページ、チェックアウトページのカスタマイズを検討していたストアにとってコスト負担なく利用することができます。
ノーコードで利用できる
Checkout Blocksはプログラミング知識不要で、アプリの管理画面と各ページのエディタ画面を利用して、簡単にページをカスタマイズすることができます。
ブロック（パーツ）が豊富
Checkout Blocksは、たくさんのブロック（パーツ）を利用できるのも特徴です。テキストの表示はもちろんのこと、アコーディオンや画像、ボタンなど様々なコンテンツブロックを利用して、各種ページに表示することができます。
Checkout Blocksで利用できるブロック（パーツ）の例
- アコーディオン
- バナー
- 利点
- ボタン
- 仕切り
- 見出し
- 画像
- スペーサー
- テキスト
ブロック（パーツ）を動的に出し分け可能
Checkout Blocksは、条件に応じてブロック（パーツ）を動的に出し分けることができます。
たとえば、定期商品や予約商品を購入した方に注意事項を表示したり、特定の商品を購入した方だけにおすすめ商品を表示したり、購入金額が高い方だけに特別なクーポンコードを表示したりも出来ます。
Checkout Blocksの注意点
チェックアウトページのカスタマイズはPlusストアのみ
チェックアウトページはPlusストアのみカスタマイズ可能です。
Checkout Blocksだけでなく他のShopifyアプリを利用する場合も同様で、チェックアウトページ自体をカスタマイズするには、Plusプランへの契約が必要になります。
Shopify Plusとは？料金や手数料、できること、メリットをご紹介
アプリの管理画面が日本語に対応していない
Checkout Blocksの管理画面は日本語対応していません。英語が苦手な方にとっては、Checkout Blocksに慣れるまで少し大変かもしれません。しかし、ヘルプページは日本語対応していますので、何かわからないことがあれば、ヘルプページを確認しましょう。
Checkout Blocksアプリ｜Shopify ヘルプセンター
Checkout Blocksの使い方
Checkout Blocksでサンキューページをカスタマイズ
今回は「年末年始営業による配送遅延の案内」をサンキューページに表示するカスタマイズを紹介します。
(1)Checkout Blocksをインストールする
(2)Shopify管理画面より「設定 > チェックアウト」の順にアクセス
(3)設定セクションの「カスタマイズ」をクリック
(4)画面上部真ん中のセレクトボックスより「ありがとうございます」を選択
(5)「アプリブロックを追加」をクリック
(6)Checkout Blocksの「Static content」を選択
(7)Content typeより表示させたいコンテンツを選ぶ
今回は少し目立たせたいため、warning bannerを選択しました。
(8)TitleやDescriptionに任意のテキストを入力
今回は以下の内容を入力しました
【Title】
年末年始の配送について
【Description】
当店は、以下の期間において休業させていただきます。
休業日: 2024年12月30日から2025年1月5日まで
この期間中、出荷業務およびお問い合わせ対応は行っておりませんので、ご了承ください。
年内の最終発送日は2024年12月29日正午までとし、12月29日以降のご注文は、休業明けの2025年1月6日以降に順次発送手続きを行います。
(9)「保存」をクリック
Checkout Blocksで注文状況ページをカスタマイズ
今回は「予約商品購入時に予約商品に関する注意事項」を注文状況ページに表示するカスタマイズを紹介します。
※ ここでの予約商品は、日本のマーチャントに人気のShopifyアプリ「RuffRuff 予約販売」を利用してる想定です。
ステップ1. ブロックを作成する
(1)Checkout Blocksをインストールする
(2)Checkout Blocksのアプリを開き、左メニューの「Blocks」をクリック
(3)「Create block」をクリック
(4)「Dynamic content」をクリック
今回は、注文が予約商品を含むかどうかでコンテンツを動的に出し分けたいため、「Dynamic content」を利用します。
(5)template一覧から、「Blank template」を選択
(6)Block nameに任意の名称を入力
Checkout Blocks内での管理用の名称となりますので、お客様に表示されることはありません。
(7)予約注文の場合に表示したいコンテンツを設定
今回は、Bannerコンテンツを利用して、「予約注文に関する注意事項」のコンテンツを作成しています。
(8)Display rulesに(7)で設定したバナーコンテンツの表示条件を設定
今回は、注文内にRuffRuff 予約販売アプリの「予約商品」が含まれているかを条件にしたかっため、「Line item propertiesの key に _PreOrderRuleIdが1つでも存在する」場合に表示する条件を設定しました。
(9)「Save」をクリック
(10)保存後は、Statusを「Active」に変更
(11)作成されたBlockのApp block IDを変更し、IDを覚えておく
今回は、App block IDは「0」となります。
ステップ2. 作成したブロックを注文状況ページに追加する
(12)Shopify管理画面より「設定 > チェックアウト」の順にアクセス
(13)設定セクションの「カスタマイズ」をクリック
(14)画面上部真ん中のセレクトボックスより「注文状況」を選択
(15)「アプリブロックを追加」をクリック
(16)Checkout Blocksの「Dynamic content」を選択
(17) (11)の手順で覚えたApp block IDを選択
(18)「保存」をクリック
以上で設定は完了です。
予約注文の注文状況ページを確認すると上記のような注意書きが表示されます。
（Plus向け）Checkout Blocksでチェックアウトページをカスタマイズ
今回は「注文に関するよくある質問」をチェックアウトページに表示するカスタマイズを紹介します。
ステップ1. ブロックを作成する
(1)Checkout Blocksをインストールする
(2)Checkout Blocksのアプリを開き、左メニューの「Blocks」をクリック
(3)「Create block」をクリック
(4)「Dynamic content」をクリック
(5)template一覧から、「FAQ Accordion」を選択
(6)Block nameに任意の名称を入力
(7)Accordionコンテンツによくある質問と回答を入力
(8)「Save」をクリック
今回は、全お客様に対してよくある質問を表示するため、Display ruleは設定しません。
(9)保存後は、Statusを「Active」に変更
(10)作成されたBlockのApp block IDを変更し、IDを覚えておく
今回は、App block IDは「1」となります。
ステップ2. 作成したブロックを注文状況ページに追加する
(11)Shopify管理画面より「設定 > チェックアウト」の順にアクセス
(12)設定セクションの「カスタマイズ」をクリック
(13)画面上部真ん中のセレクトボックスより「チェックアウト」を選択
(14)「アプリブロックを追加」をクリック
(15)Checkout Blocksの「Dynamic content」を選択
(17) (10)の手順で覚えたApp block IDを選択
(18)「保存」をクリック
以上で設定は完了です。
チェックアウトページにアクセスすると上記のように「よくある質問」が表示されます。
最後に
ShopifyのCheckout Blocksを活用することで、チェックアウトページや注文状況ページに柔軟なカスタマイズが可能となり、店舗運営における顧客対応力を向上させることができます。
本記事で紹介した手順を参考に、静的コンテンツや動的コンテンツを適切に設定し、顧客にとって分かりやすく魅力的なショッピング体験を提供しましょう。特に、休業期間や予約注文に関する注意事項、よくある質問の表示など、顧客に必要な情報を的確に伝えることで、信頼性の高い店舗運営を実現できます。
最後に、下記のブログ記事ではCheckout Blocks以外にもチェックアウトページをカスタマイズできるShopifyアプリを紹介しています。ご参考にしてください。
