Shoply AI Chatの外観をカスタマイズする方法

Shoply AI ChatとAI Searchには、アプリの外観をカスタマイズする40以上のオプションがあります。このページでは、ブランドに合わせてAI Chatbotの外観、チャットウィンドウのデザイン、メッセージ体験を調整する方法を説明します。

まず、アプリの管理コンソールにあるCustomize AI Chatページを開きます。ShopifyのTheme EditorでShoply AI Chatを有効にすると、ストアのWebページ右下にチャットアイコンが表示されます。

アイコンを選択する

17種類の定義済みアイコンからチャットアイコンを選ぶか、独自の画像をチャットアイコンとしてアップロードできます。

Primary Color

これはメインのテーマカラーで、チャットウィンドウでは強調テキストの色としても使われます。明るいテーマのサイトでは、強調テキストを読みやすくするため、白以外のテーマカラーを選んでください。暗いテーマのサイトでは、黒以外のテーマカラーを選んでください。

Complementary Color

Primary Colorと組み合わせて、チャットアイコンとチャットウィンドウのヘッダーにグラデーションを作る補色です。アイコンをより魅力的にし、ブランドに合わせることができます。

Icon’s Line Color

チャットアイコンの輪郭色です。

チャットアイコンの背景色を削除するかどうか

チャットアイコンとして画像をアップロードし、アイコンの背景色（Primary Color）を削除したい場合に便利です。

チャットアイコンの影を削除するかどうか

アイコンからドロップシャドウを削除し、よりフラットでミニマルなデザインにできます。ストアがクリーンでモダンな見た目の場合や、独自の影・奥行き効果をすでに持つカスタムアイコンをアップロードした場合に特に便利です。

デスクトップとモバイルのフローティングアイコンサイズ

モバイルでは、顧客の画面表示を遮らないように、チャットアイコンを小さく設定するとよい場合があります。

デスクトップおよびモバイルでのチャットアイコンの配置

チャットアイコンのZ-index：

アイコンを他のUI要素より前面に表示したい場合は、より大きい値を使います。

モバイルでチャットアイコンを自動非表示にする

モバイルデバイスでは、指定した秒数の後にチャットアイコンを非表示にします。このオプションはモバイル専用で、アイコンが顧客のモバイル画面表示を遮るのを防ぎます。

Shoply AIのチャットアイコンをクリックするとチャットウィンドウが開き、顧客はそのウィンドウでShoply AIとやり取りできます。

チャットウィンドウのカラーテーマ（ダークモードまたはライトモード）

ダークモードを選ぶと、チャットウィンドウの背景は黒、文字色は白になります。ストアのテーマもダークモードなら、このオプションをおすすめします。

デスクトップでのチャットウィンドウの幅

このオプションはデスクトップにだけ適用されます。モバイルでは、チャットウィンドウは常に画面全体を占めます。

ブランド画像と背景画像を選択する

チャットウィンドウ用に独自のブランド画像と背景画像をアップロードするか、Shoply AIに生成させることができます。AI生成画像を使う場合、Shoply AIはストアの説明に基づいてこれらの画像を生成します。

チャットウィンドウの背景画像の透明度とアスペクト比を調整する

チャットウィンドウの背景画像によって、その上のテキストが読みにくくなる場合があります。そのため既定では、背景画像の上に半透明のレイヤーを追加します。

入力バーからShoply AIのロゴを削除するかどうか

入力バーからShoply AIロゴを削除し、よりすっきりとしたブランド体験を作れます。ストア全体で一貫したブランドアイデンティティを維持したい場合や、よりミニマルなチャットインターフェースを好む場合に便利です。このオプションは有料プランでのみ利用できます。

顧客がチャットボットを初めて使う際に案内する既定メッセージを設定・編集できます。これらのメッセージの翻訳オプションも設定できます。詳細はこのFAQページをご覧ください。

ポップアップ歓迎メッセージ（空でない場合、チャットアイコンの上に表示）

歓迎メッセージを空にすると、チャットアイコンの上には表示されません。

チャットウィンドウ内の定型メッセージ

チャットウィンドウには、次の3種類の定型メッセージを設定できます。

チャットウィンドウの最初のメッセージ — 顧客がチャットウィンドウを初めて開いたときに自動表示される最初の挨拶です。顧客を歓迎し、会話の雰囲気を作るために使います。
最大4つの開始質問 — チャット開始時に表示される、クリック可能な質問候補です。よくある質問を提示して顧客を案内し、会話を始めやすくします。
入力欄のプレースホルダーメッセージ — 顧客が入力を始める前に、チャットの入力欄に表示されるヒントです。たとえば「何でも聞いてください 🤗」や「今日はどのようにお手伝いできますか？」のように、質問できる内容を案内します。

各種類の定型メッセージの例をご覧ください。