チャット外観
ストアに合うチャットへ仕上げる設定です。チャットの色・キャラクター・アイコン画像・大きさ・背景・表示位置は、Shopifyのテーマエディターで管理します。ストアのプレビューを見ながら変更し、最後に保存してください。
Shopify 管理画面の アプリ → SUGOI Chat → チャット外観 で開きます。
01 ストアに合うチャットへ
Section titled “01 ストアに合うチャットへ”埋め込みアプリをオンにして、チャットをストアに表示します。画面の 「テーマエディターを開く」(または 「外観を編集」)ボタンからテーマエディターを開き、次の3ステップで埋め込みをオンにします。
1. 埋め込みアプリを開く
Section titled “1. 埋め込みアプリを開く”テーマエディター左側のサイドバーで 「埋め込みアプリ」 のアイコンを開きます。
2. SUGOI Chat をオンにする
Section titled “2. SUGOI Chat をオンにする”SUGOI Chat のトグルをオンにし、外観を調整します。
3. 保存する
Section titled “3. 保存する”「保存」 を押し、ストアを開いてチャットを確認します。画面の 「ストアで表示を確認」 ボタンでストアを新しいタブで開けます。
埋め込みの状態は、画面のバナーに「埋め込みは有効です」「埋め込みは無効です」「埋め込み状態を確認しています」「埋め込み状態は未確認です」のいずれかで表示されます。
公開するテーマを切り替えたときは、新しいテーマでは埋め込みが自動でオンになりません。新しいテーマでもオンにし直してください。オフのままだと「埋め込みは無効です」と表示されます。
チャットの設定(テーマエディター)
Section titled “チャットの設定(テーマエディター)”テーマエディターの 埋め込みアプリ → SUGOI Chat で設定できる項目は次の8つです。変更後は 「保存」 を押してください。
| 項目 | 設定する内容 |
|---|---|
| アクセントカラー | チャットのアクセントに使われる色です。既定は濃紺(#1a1a2e)です |
| チャットのキャラクター | 「通常アイコン（標準）」「スゴシェルジュ（静止）」「スゴシェルジュ サンプル」から選びます |
| チャット入口の大きさ | チャットを開くボタンのアイコンを40〜112pxで調整します。既定は56pxです |
| 回答横のキャラクターの大きさ | スゴシェルジュ サンプルを選んだとき、回答の左に表示するキャラクターを24〜64pxで調整します。既定は32pxです |
| チャットのアイコン画像 | 通常アイコンで使う画像です。未選択の場合は吹き出しアイコンを表示します。透過PNGなどの好きな画像も使えます |
| アイコンの丸背景を表示 | 通常アイコンの丸い背景をオン/オフにします。既定はオンです。オフにすると背景・影・円形の切り抜きがなくなり、画像全体を表示します |
| チャットの背景 | チャットの枠の透け具合を「不透明」「少し透ける」(既定)「透ける」から選びます |
| 表示位置 | チャットボタンを「右下」(既定)または「左下」に置きます |
アイコンの丸背景はチャットを開くボタン、チャットの背景は開いたパネルの設定です。「透ける」は後ろのページが見えるぶん、写真の多いページでは文字が読みにくくなることがあります。文字を読みやすくしたい場合は「不透明」を選んでください。
スマホの商品ページなどで「カートに追加」ボタンと重なる位置にくると、チャットボタンは自動でその上に移動し、重ならなくなると元の位置に戻ります。
02 スゴシェルジュを使う
Section titled “02 スゴシェルジュを使う”スゴシェルジュは、キャラクターを使ったチャットの見せ方のサンプルです。そのままストアのチャットにも使えます。
| 選択肢 | お客様への見え方 |
|---|---|
| 通常アイコン（標準） | 吹き出し、または「チャットのアイコン画像」で選んだ画像を入口に表示します |
| スゴシェルジュ（静止） | 動かないスゴシェルジュを入口に表示します。回答横の表示は通常のままです |
| スゴシェルジュ サンプル | 入口ではたまに小さく瞬きや耳・頭のしぐさをし、回答の左では会話に合わせて表情と動きが変わります |
- テーマエディターの 埋め込みアプリ → SUGOI Chat → チャットのキャラクター で、使うスゴシェルジュを選びます
- 「チャット入口の大きさ」 を調整します。サンプルを選んだ場合は 「回答横のキャラクターの大きさ」 も別に調整できます
- 「保存」 を押し、ストアを開いてチャットを確認します
スゴシェルジュには丸い背景や円形の切り抜きが付きません。「チャットのアイコン画像」と「アイコンの丸背景を表示」は、通常アイコンを選んだときに使う設定です。
サンプルは最新の回答と回答を待っている間だけ動き、過去の回答はそのときの表情で止まります。チャットを開いている間は入口の動きが止まり、パネルを閉じると回答横の動きも止まります。端末で「動きを減らす」設定を使っている場合は、キャラクターの動きを止めて表示します。
アプリの チャット外観 では5つの表情(通常・考え中・確認・笑顔・注意)を試せます。このサンプル操作だけではストアの設定は変わりません。実際に使う場合は、上の手順でテーマエディターから選んで保存してください。
03 自分のアイコンを切り抜きで使う
Section titled “03 自分のアイコンを切り抜きで使う”丸い枠に収めず、キャラクターやロゴの形をそのまま表示したいときは、背景が透明な画像を使います。
- 「チャットのキャラクター」 で 「通常アイコン（標準）」 を選びます
- 「チャットのアイコン画像」 で、背景が透明なPNGなどを選びます
- 「アイコンの丸背景を表示」 をオフにします
- 入口の大きさを調整して 「保存」 を押します
丸背景がオンのときは画像を中央で円形に切り抜くため、中心に見せたい部分がある正方形の画像がおすすめです。オフのときは円形に切り抜かず、縦横比を保って画像全体を表示します。画像自体の背景を自動で消す機能ではありません。 背景がある画像は、その背景も表示されます。
スゴシェルジュの静止画像で他のアイコンも揃えたい場合は、アプリの チャット外観 → スゴシェルジュ（静止） から 透過PNG または SVG をダウンロードできます。チャットのアイコン画像として使う場合は、透過PNGを選んでください。画像としてアップロードしたものは静止表示になり、会話に合わせて表情が変わるのは 「スゴシェルジュ サンプル」 を選んだ場合です。
04 表示されないとき
Section titled “04 表示されないとき”公開中のテーマで埋め込みがオンになっているか、変更を保存したかを確認してください。利用上限に達した場合もチャットは非表示になります。
詳しい切り分けは トラブル対応 を参照してください。