設定完了後に表示できない場合等の対処法についてご案内します。
「CRM PLUS on LINE」が提供している「Shopify Flow」のテンプレート（購入完了通知・発送通知）を元にボタン色やテキスト文字などを編集したい場合、Flex Messageのコードを編集いただく必要があります。
Flex Messageのコードをプレビューしながら編集できる「LINE Flex Message Simulator」上で確認しながら編集を行いますが、「CRM PLUS on LINE」が提供しているテンプレートの内容をそのままLINE Flex Message Simulator にコピー&ペーストすると、下記のようにエラーが表示され、プレビューを確認できません。
▼LINE Flex Message Simulator上でのエラー表示画面例
本記事ではプレビュー画面でのエラーを解消して、「購入・発送完了通知」のメッセージ内容のカスタマイズをプレビューできるようにする方法についてご紹介します。
▼まだ「購入完了通知」や「発送完了通知」のテンプレートをダウンロードしていない場合は、下記手順をご参照ください。
Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る
▼Flex Messageのカスタマイズ方法については、下記記事をご参照ください。
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法
今回はワークフロー例として、「CRM PLUS on LINE」が「Shopify Flow」に提供しているテンプレート「購入完了通知をLINE配信（Send a notification when a purchase is completed）」を使用し、下記2パターンのエラー解消方法を解説していきます。
Shopify Flowのテンプレート内のアクション「LINEでFlexメッセージを送る」を選択し、「Flex Messageのコンテナ」を全文コピーします。
弊社提供のShopify Flowテンプレート（Flex Message）では、リンク・画像リンクなどに変数を用いている場合があります。
今回の場合、ボタンリンクに変数（{{shop.primaryDomain.url}}/account/?openExternalBrowser=1 ）が使用されています。このままShopify Flowでワークフローを実行すると適宜変数が代入されるのですが（例：{{shop.primaryDomain.url}} → https://example.com ）、Flex Message Simulator上では汎用的なURLと認識されないため、エラーになってしまいます。
上記画像でも”invalid uri”とエラー表示が出ていますが、これはいわゆるURLの体裁の文字列（http://、https:// で始まるものです）が入力されていないことにより表示されます。
赤字でエラーになっているボタン箇所の「uri」を選択して、任意の標準URLに置き換えます。たとえばストアのドメインURLなど、任意のURLを入力するとエラーが解消されます。
▼編集前：元々記載されていた変数は後ほど（Shopify Flowへの本番反映時に）使用するので、どこかにメモしておくことをおすすめします。
▼編集後：URL記載例）https://socialplus-demo.shopify.com/
一般的な形式のURLが入力されたことでエラーが解消され、画面内の左にプレビュー画像も表示されました。
この状態から、ボタンカラーを別色に変更するなどカスタマイズが可能です。
▼Flex Messageのカスタマイズ方法については、下記記事をご参照ください。
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法
ボタンカラーを別色にするなどのカスタマイズが完了したら、ページ右上の「View as JSON」を押してコードをコピーします。
コピーしたコードを、手順1で開いた「Shopify Flow」のアクション内の【Flex Messageのコンテナ】に上書きします。
LINE Flex Message Simulator上でプレビュー表示するために置き換えたURLの箇所を、変更前に元々入っていた変数に戻します。変数に戻し忘れてしまうと、どのお客様にも指定したURLでLINE配信されてしまいますので、必ず変数へとご変更ください。
▼編集前：汎用的なURLの箇所を探します。
▼編集後：手順3でメモしておいた変数へ書き換えます。
これで編集は完了です。ワークフローをオンにして、実際にイメージしたLINE配信ができているかお手元のスマホで確認してみてください。
▼テスト配信の方法は、下記記事内の「テスト配信の方法（2パターン）」章をご覧ください。
Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る
Case1はURLの変数がプレビューエラーの原因でした。
Case2では、画像URLの変数が原因の場合の解決策をご紹介します。
▼編集前：元々記載されていた変数は後ほど（Shopify Flowへの本番反映時に）使用するので、どこかにメモしておくことをおすすめします。
▼編集後：Case1と同じく、任意の画像リンクを準備して置き換えます。※画像リンクの取得方法は：Shopify管理画面の「コンテンツ」→「ファイル」より画像リンクをコピー
エラーが解消されたので、左側に画像付きでプレビュー画像が表示されました。
あとはプレビューを確認しながら、ボタン色・テキストなどの編集を行なってください。
▼Flex Messageのカスタマイズ方法
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法
編集が完了したら、ワークフローをオンにして、実際にイメージしたLINE配信ができているかお手元のスマホで確認してみてください。
▼テスト配信の方法は、下記記事内の「テスト配信の方法（2パターン）」章をご覧ください。
Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る
CRM PLUS on LINEに関するお問い合わせやご相談など、お気軽にお問い合わせください。
