チェックアウトにポイント利用フォームを表示する

💡

このページのゴールはチェックアウト画面にVIPのポイント利用フォームを表示できるようになることです。

Shopify Plusを契約しているマーチャントはVIPのポイント利用フォームをチェックアウト画面に表示することが可能です。

image

🎯 合わせてこの記事も読む

ポイントの利用を有効にする

VIPの管理画面サイドメニューから プログラムポイント を選択してポイントページを開きます。右上の設定を開くボタンをクリックして設定画面を開き、ポイント利用のセクションから以下のように選択してください。

image

ポイント利用に必要なトークンを設定する

ポイント利用を有効にした際に必要なトークンが設定されていない場合、以下のようなアラートがポイントページに表示されます。

image

以下のページを参考にポイント利用を実現するために必要なShopifyのカスタムアプリを発行してトークンを管理画面より設定してください。

チェックアウトにフォームを追加する

1. コードをダウンロードしてテーマ内にコピーする

ソースコードをダウンロードしてフォルダー内のディレクトリ名と同じ場所にコピーします。assetssnippets 内に保存されている全てのファイルをテーマ内の同じディレクトリ名の箇所ににコピー(もしくは新規作成)してください。

image

⚠️

すでに他のUIを表示するためにフォルダー内に存在するファイルがテーマの中にある場合はそのファイルをコピーする必要はありません

こちらからソースコードをダウンロードしてください

2. checkout.liquid にコードを追加する

Shopifyの管理画面から販売チャネルのオンラインストアをクリックして、テーマセクションからコードを編集を選択してください。ファイル検索を使ってLayoutディレクトリの中にある checkout.liquid を開いてください。このファイルに書かれている実装がチェックアウトの画面に表示されます。

image

htmlの末尾のbodyのすぐ上に以下と同じコードを追加してください。この一行を追加するだけでチェックアウト画面にポイント入力フォームを表示する対応は終了です。

image