よくあるご質問 >Re:lationの機能・設定 >メール以外の送受信設定 >Shopfiyにチャットウィジェットを設置するには
FAQ Shopfiyにチャットウィジェットを設置するには
-
ご注意
・設定するには、受信箱の[管理者]の権限が必要です。こちらのページでは設定したチャットウィジェットを、Shopfiyに設置する際の手順を記載しています。
・チャットウィジェットの基本設定については、以下のヘルプページを参照してください。
チャットウィジェットの設定をするには：https://faq.relationapp.jp/15249
・シナリオボットの設定方法については、以下のヘルプページを参照してください。
シナリオボットを設定するには：https://faq.relationapp.jp/15250
・チャットウィジェットでできることについては、以下のページを参照してください。
チャットウィジェットでできること：https://faq.relationapp.jp/15251
こちらのページでは以下項目を説明しています。
・設置方法について
・事前準備
・コードの編集から設置するには
・チャットウィジェットを非公開にするには
・カスタマイズから設置するには
・よくある質問設置方法についてShopfiyでは、大きく2つの方法でチャットウィジェットを設置をすることができます。
どちらもカンタンですが、コードの編集から設置する方法を推奨します。
・コードの編集から設置する
・カスタマイズから設置する事前準備あらかじめRe:lationで、スクリプトをコピーしておきます。
1. 画面左上の歯車アイコン＞サービス連携設定［チャットウィジェット］＞［設置］タブをクリックします。
2. ［スクリプト］にあるコピーボタンをクリックします。コードの編集から設置するには1. Shopfiyにて、左サイドメニューにある「オンラインストア」をクリックしてください。
2.［…］メニューをクリックしてください。
3. ［コードを編集］をクリックしてください。
4. テーマのコードが一覧で表示します。
layoutフォルダー配下にある「theme.liquid」をクリックしてください。
5. クリックしたファイルの中身が表示されます。
このようにテキストがたくさん並んでおり、2行目に <html と記載があれば問題ないです。
6. ファイルの下の方にある、</body> というテキストを探してください。
7. テキストの </body> の前に事前準備のスクリプトを貼り付けください。
8. ［保存］をクリックして、ファイルを保存してください。
9. ［ストアをプレビュー］をクリックしてください。
10.ストアの画面にチャットウィジェットが表示されていれば、設置は完了です。カスタマイズから設置するには1. Shopfiyにて、左サイドメニューにある「オンラインストア」をクリックしてください。
2.［カスタマイズ］をクリックしてください。
3. テーマの編集画面が表示されます。
4.フッターにある［セクションを追加］をクリックしてください。
5.［カスタムLiquid］をクリックしてください。
6. Liquidコードに事前準備のスクリプトを貼り付けます。
7. セクションの余白の上部と下部を0pxにしてください。
8. ［保存］をクリックして、テーマを保存してください。
9.画面の最上部にある［…］メニューをクリックしてください。
10.［表示］をクリックしてください。
11.ストアの画面にチャットウィジェットが表示されていれば、設置は完了です。よくある質問・設置のスクリプトを貼り付けたのに、チャットウィジェットが表示されないです。
⇒チャットウィジェットが公開になっているか確認ください。
・チャットウィジェットは表示するけど「エラーが発生しました」と表示されます。
⇒設置先URL制限で表示できない状態ではないか確認してください。
・テーマを変更するとチャットウィジェットが表示されなくなった
⇒テーマを変更する度に、設置のスクリプトを貼り付けする必要があります。
・キャンペーンバナーと被って表示されます
⇒デザイン設定からランチャーの位置をカスタマイズしてください。
管理番号：15262 / 作成日時：