Shopifyアプリ【Checkout Blocks】について解説

　今回は、Shopify Edition Summer'24からShopify Plusストア限定で完全無料でチェックアウトの編集が可能となり、Shopify Edition Summer'25からすべてのストアでサンクスページと注文状況ページのカスタマイズが可能となった、Shopify公式のチェックアウト画面カスタマイズアプリ「Checkout Blocks」をご紹介します。

Checkout Blocksとは

　「Checkout Blocks」とはチェックアウトプロセスをノーコードで自由にカスタマイズできるShopify公式アプリです。ドラッグ＆ドロップで簡単にセクションを追加・編集でき、ブランドに合わせたデザインやレイアウトを実現可能です。
　顧客の購買状況に応じた柔軟な制御ができ、地域別の配送オプションや特典の表示も簡単に設定できます。さらに、条件に応じた柔軟な制御で、特別なプロモーションや割引コードを効果的に統合し、顧客体験を最大化します。売上向上と顧客の再購入を促すために「Checkout Blocks」アプリを活用しましょう。

機能

２-１．機能一覧
　Checkout Blocksは、管理画面から直感的に操作できる強力なカスタマイズ機能を提供しています。以下の表は、実際の管理画面に基づいて整理したShopify Checkout Blocksの主要な機能を示しています。
　Shopify Plusストアでは全機能利用することができますが、Shopify Plus以外のストアではサンクスページと注文状況ページにのみカスタマイズが可能となっております。

２-２．活用方法
前述した機能を活用したサイトの一例をご紹介いたします。
　
・Dynamic content
　特定商品をカートに追加している顧客に向けて関連商品やプロモーションを表示できます。
　例）商品Bをカートに追加した人に対し、「商品Aを購入すると商品Bを10%オフで購入できます」といったプロモーションメッセージを表示する。
　
・Custom field
　チェックアウト画面に顧客が自由に入力可能なフォームを設置できます。
　例）プレゼント用の商品に同封するメッセージカードのメッセージ入力欄を設置する。
　
・Address autofill
　住所入力チェック、住所自動入力を行うことができます。
　例）郵便番号や都道府県に基づいて自動でフォームを入力する。
　　　特殊文字や絵文字、文字数などの入力制限を行う。
　
・Customization
　購入商品、配送先住所に応じた配送方法を表示することができます。
　例）カートに冷凍食品が追加されている場合のみ、冷凍便を表示する。
　　　配送先に応じて国内向けの配送と海外向けの配送の表示の切り替えを行う。
　
・Discount
　自動で割引を適用することができます。
　例）10,000円以上購入すると10%割引といった条件を設定し、自動的に割引が適用されるようにする。
　
　これらの機能をフル活用し、顧客が利用しやすいチェックアウトフローを作成することでコンバージョン率、顧客満足度の向上が期待できます。また、ターゲット別のプロモーションを実施して配送や注文の割引を行うことで顧客の購買意欲を刺激し、売り上げを増加させることが可能です。

使用方法

３-１．Blocksの作成と配置

　Dynamic Contentを例にBlocksの作成の方法をご紹介いたします。Checkout Blocksの管理画面へアクセスし、Blocksを選択後、「Create Block」ボタンを押下します。その後、作成したいblockを選択します。
今回はDynamic Contentを選択します。

次の画面ではテンプレートの選択を行います。まずはBlank templateを選択します。次にAdd content itemボタンをクリックし、表示したいコンテンツを選択し、コンテンツの内容を入力します。Add Display ruleボタンからはコンテンツを画面へ表示する条件を設定できます。
今回はコンテンツに画像を設定し、カートが10,000円以上の場合表示するように設定しています。

設定が完了したら一度保存してBlockをアクティブ化し、「Add to editor」を押下します。その後、「Open editor」を押下してチェックアウトの編集画面に遷移し、同画面で作成したコンテンツを追加します。 　

画面左のメニューから「Dynamic content」を押下します。

「App block ID」で作成したブロックのIDを選択し、コンテンツを表示させます。

実際に今回作成したBlockはチェックアウト画面からこのように見ることができます。

注文金額が10,000円以上の場合

注文金額が10,000円以下の場合

このようにしてブランドに合わせたコンテンツを条件に応じて表示することができます。
　
３-２．自動ディスカウント

　条件に応じた「自動ディスカウント」を設定することも可能です。
Checkout Blocksの管理画面へアクセスし、Discountを選択後、「Add discount」ボタンを押下します。その後、注文の割引（Amount off order）か配送の割引（Amount off shipping）かを選択します。
今回は日本国内のお客様に対して全商品20%割引を設定します。注文の割引（Amount off order）を選択し、割引の内容や条件、期限などを設定します。

設定した内容を保存すると、設定した期限内の場合、割引が自動で公開され、対象のユーザに割引が反映されます。

まとめ

　Checkout Blocksアプリは日本語でサポートされていない、Shopify Plusストア以外は利用できない機能があるというデメリットこそありますが、管理画面から直感的な操作でチェックアウト画面の設定が可能なアプリとなっております。
　また、ブランドに合わせたレイアウトであったり、条件に応じた柔軟な制御であったりが可能になっているため、それぞれのストアに合わせた施策を行い、顧客体験の向上やコンバージョン率の向上を図ることができます。
　チェックアウトプロセスをパーソナライズし、よりスムーズで効果的な顧客体験を提供するための最適なツールとなっておりますので、【Checkout Blocks】アプリをインストールして利用してみてはいかがでしょうか。

ShopifyでのECサイト構築や機能に関するご質問・ご相談は、お気軽にこちらまでご連絡ください。