2022.12.12[Mon]
[シリーズ連載] Shopify Post-Purchase Checkout Extension

Shopify Post-Purchase Extensionでレジ前販売を実装する 概要編

  • Shopify

目次

  • - 機能の概要
  • - 実際の画像
  • - 終わりに

Webエンジニアの茄子です。

2021年にリリースされた Post-Purchase Checkout Extensionを解説します。

この機能は既に実用可能ではありますが、執筆時点の2022年12月現在も「ベータ版」という位置付けであり、今後仕様が変更になる可能性があります。また、公式ドキュメントも随時更新されており、一部の表現やコードの内容が一致しない可能性があります。

機能の概要

公式ドキュメント:https://shopify.dev/apps/checkout/post-purchase

Post-Purchase Checkout Extensionは、Shopifyストアの決済情報入力画面とThank youページの間にページを追加することができる機能です。Shopifyアプリの拡張機能として提供されています。
「Post-Purchase」という言葉は英単語の直訳では、購入後ページという意味になります。しかし「購入後ページ」というと元々あるThank youページをイメージする方も多いと思います。ここでの「Purchase」というのは「決済」という意味合いで、購入フロー全体ではありません。ユーザーにとっての購入フローから見てThank youページを「購入完了」とするならば、この機能は "Post-" という名前とは裏腹に購入完了ページにあたります。

Thank youページにもおすすめ商品やメッセージを出すことができますが、このページの最大の利点は決済情報を引き継げる点です。
Thank youページでおすすめなどを出しても、改めてカートからの決済フローを通る必要がありますが、この機能ではその必要無しに決済内容に商品を追加できます。

最大の利点は上述の決済に関してですが、単に挟み込むページとして使うこともできます。公式ドキュメントではこれらの用途が挙げられています。

  • 追加購入
  • アンケート
  • ストアについてなどのフィードバックの投稿
  •  寄付のお願い
  • クーポンの提示
  • 重要な告知
  • プレミア会員などへの勧誘

ストアでの購入の流れは以下のようになります

カート投入 、チェックアウトフローへ

購入者情報入力画面

配送方法選択画面

決済情報入力画面(ここで Post-Purchaseページを出すかどうかの判定がされます)

決済完了

Post-Purchase画面(上記の判定で出さない条件だった場合は出ずに、そのままThank youへ)

Thank youページ

実際の画像

実際のチェックアウト画面の見た目を交えて紹介していきます。

購入者情報入力画面・配送方法選択までは通常と変わりません。

ここの支払画面へ遷移するタイミングで、Post-Purchase用のフックが呼ばれます。
購入した商品の情報がとれるので、それに基づいてPost-Purchase画面を出すかスキップするかを判定するなどが可能です。

Post-Purchase画面がこちら
用意されたコンポーネントを使って目的に合わせた画面を作る事ができます。
続編の記事で解説しますが、自由なHTML/CSSで組むことはできません。

今回の典型的な例では購入ボタンですが、決済確定やページ遷移のトリガーはボタン以外のアクションでも可能です。

購入ボタンを押すとThank youページに進みます。
右の購入情報に商品が追加されています。

終わりに

次回は公式の用意しているサンプルを使いながら、開発方法を解説します。

Share

  1. 01 Shopify Post-Purchase Extensionでレジ前販売を実装する 概要編
  2. 02 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ① >
  3. 03 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ② >
  4. 04 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ① 〜見た目・入力〜 >
  5. 05 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ② 〜レイアウト〜 >
React Cosmos チュートリアルNext.js 13 next/imageでサイズ指定せずにアスペクト比を保って表示する