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

Shoply AI Chat と AI Search には、アプリの外観をカスタマイズするための 40 を超えるオプションが用意されています。

このセクションでは、AI Chatbot で利用できるさまざまなカスタマイズオプションをご紹介します。ブランドに合わせて、外観、チャットウィンドウのデザイン、メッセージ体験をパーソナライズできます。

始める準備はできましたか？チャット体験のカスタマイズを開始するには、アプリの管理コンソールにある Customize AI Chat ページにアクセスしてください。Shopify の Theme Editor で Shoply AI Chat を有効にすると、ストアのウェブページ右下にチャットアイコンが表示されます。

チャットアイコンの選択

Select an icon

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

Choose different icons for the AI Chat button

チャットアイコンの色とサイズ

Primary Color

これはメインのテーマカラーで、チャットウィンドウ内では強調テキストの色としても使用されます。

ウェブサイトでライトモードを使用している場合は、テーマカラーに白以外の色を選択してください。これは、明るい背景でも強調テキストの可読性を保つためです。ウェブサイトでダークモードを使用している場合は、テーマカラーに黒以外の色を選択してください。

Complementary Color

これは補完色で、プライマリカラーと組み合わせることで、チャットアイコンやチャットウィンドウのヘッダーにグラデーション（2 色間の滑らかな色の移り変わり）を作成し、チャットアイコンをより魅力的にしつつ、ブランドとの一貫性を高めます。

Icon’s Line Color

これはチャットアイコンの枠線の色です。

Whether to remove the background color of the chat icon.

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

Whether to remove the shadow of the chat icon.

このオプションでは、チャットアイコンからドロップシャドウ効果を削除し、よりフラットでミニマルなデザインにできます。これは、ストアがクリーンでモダンな美観を持っている場合や、アップロードしたカスタムアイコンにすでに独自の影や奥行き効果が含まれている場合に特に便利です。

Floating Icon Size for desktop and mobile.

モバイルでは、チャットアイコンが画面上の顧客の視界を妨げないように、より小さいサイズに設定するとよい場合があります。

チャットアイコンの配置

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

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

Auto-hide chat icon on mobile

モバイルデバイスで、指定した秒数が経過した後にチャットアイコンを非表示にします。

このオプションはモバイルデバイスでのみ利用できます。チャットアイコンがモバイル画面上の顧客の視界を妨げるのを防ぐのに役立ちます。

チャットウィンドウのカスタマイズ

Shoply AI のチャットアイコンをクリックすると、チャットウィンドウがポップアップ表示されます。顧客はそのチャットウィンドウを通じて Shoply AI とやり取りできます。

このセクションでは、チャットウィンドウをカスタマイズするためのさまざまなオプションをご紹介します。

Color Theme (dark mode or light mode) of the chat window

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

Width of the chat window on desktop

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

Select the branding image and background image

チャットウィンドウ用に独自のブランディング画像や背景画像をアップロードすることも、Shoply AI にそれらの画像を生成させることもできます。

AI 生成画像を使用することを選択した場合、Shoply AI はストアの説明に基づいてブランディング画像と背景画像を生成します。

Adjust the transparency and aspect ratios of the background image for the chat window.

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

Whether to remove Shoply AI’s Logo in Input Bar

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

このオプションは有料プランでのみ利用できます。

AI Chat の事前定義メッセージ

顧客が初めて chatbot とやり取りするときの案内となるデフォルトメッセージを設定または編集することもできます。さらに、それらのメッセージの翻訳オプションも設定できます（詳細はこの FAQ ページをご覧ください）。

Popup Welcome message (shows above chat icon if not empty)

ウェルカムメッセージを空欄のままにすると、チャットアイコンの上にはウェルカムメッセージは表示されません。

Pre-defined messages in chat window

チャットウィンドウには、最大 3 種類の事前定義メッセージを設定できます。

チャットウィンドウの最初のメッセージ - これは、顧客が最初にチャットウィンドウを開いたときに自動的に表示される最初の挨拶メッセージです。顧客を歓迎し、会話の雰囲気を決めるために使用します。
最大 4 つの開始用質問 - これは、チャットの開始時に表示されるクリック可能な質問候補です。顧客がクリックして会話を始められる一般的な質問を提示することで案内し、会話を始めやすくします。
入力プレースホルダーメッセージ - これは、顧客が入力を始める前にチャット入力欄に表示されるヒントテキストです。たとえば “Ask me anything 🤗” や “How can I help you today?” のように、何を質問できるかの案内を提供します。

これらの設定は、通常のチャット開始時の表示を制御します。一方で、購入者が “Question About This Product?” リンクからチャットを開いた場合、Shoply は代わりに商品名、商品の短いハイライト、その商品に関する自動生成された質問を表示します。商品ごとに開始用質問を作成する必要はありません。AI-powered product questions work の仕組みを確認するか、add a product-question button の手順に従ってください。

事前定義メッセージの各タイプの例については、以下をご覧ください。