如何自訂 Shoply AI Chat 的外觀

Shoply AI Chat 和 AI Search 提供超過 40 種自訂應用程式外觀的選項。

本節將帶你了解 AI Chatbot 提供的各種自訂選項。你可以個人化其外觀、聊天視窗設計和訊息體驗，使其符合你的品牌形象。

準備開始了嗎？請前往應用程式管理主控台中的 Customize AI Chat 頁面，開始自訂聊天體驗。在 Shopify 的 Theme Editor 中啟用 Shoply AI Chat 後，聊天圖示就會出現在商店網頁的右下角。

選擇聊天圖示

選擇圖示

你可以從我們預先定義的 17 種不同圖示中選擇聊天圖示，也可以上傳圖片作為自己的聊天圖示

調整聊天圖示的色彩和大小

主要色彩

這是主要的主題色彩，也會在聊天視窗中用作醒目文字的色彩。

如果你的網站使用淺色模式，請選擇白色以外的色彩作為主題色彩，確保醒目文字在淺色背景上仍然清晰可讀。 如果你的網站使用深色模式，請選擇黑色以外的色彩作為主題色彩。

互補色彩

這是與主要色彩搭配使用的互補色彩，會在聊天圖示和聊天視窗標頭產生漸層（兩種色彩之間的平滑轉換），讓聊天圖示更醒目，也與你的品牌形象一致。

圖示線條色彩

這是聊天圖示的外框色彩。

是否移除聊天圖示的背景色彩。

如果你上傳圖片作為聊天圖示，並希望移除聊天圖示的背景色彩（主要色彩），這個選項通常會很有幫助。

是否移除聊天圖示的陰影。

這個選項可讓你移除聊天圖示的陰影效果，打造更扁平、更簡約的設計。如果你的商店採用簡潔、現代的美學風格，或你上傳的自訂圖示本身已包含陰影或立體效果，這個選項尤其實用。

桌面版和行動版的浮動圖示大小。

在行動裝置上，你可能會想將聊天圖示設為較小的尺寸，避免遮擋顧客查看行動裝置螢幕的視線。

設定聊天圖示的位置

桌面版和行動版上的聊天圖示位置。

聊天圖示的 Z-index：

如果你希望圖示顯示在其他 UI 元素前方，請使用較高的數值。

在行動裝置上自動隱藏聊天圖示

在行動裝置上經過指定秒數後隱藏聊天圖示。

此選項僅適用於行動裝置，有助於避免聊天圖示遮擋顧客查看行動裝置螢幕的視線。

自訂聊天視窗

當你點選 Shoply AI 的聊天圖示時，聊天視窗就會彈出。顧客可以透過該聊天視窗與 Shoply AI 互動。

本節將帶你了解可用來自訂聊天視窗的各種選項。

聊天視窗的色彩主題（深色模式或淺色模式）

如果你選擇深色模式，聊天視窗的背景會是黑色，字型色彩會是白色。如果你的商店主題也採用深色模式，我們建議使用深色模式選項。

桌面版聊天視窗的寬度

此選項僅適用於桌面版。在行動裝置上，聊天視窗一律會佔滿整個螢幕。

選擇品牌圖片和背景圖片

你可以選擇上傳自己的品牌圖片和背景圖片到聊天視窗，或直接讓 Shoply AI 為你產生這些圖片。

如果你選擇使用 AI 產生的圖片，Shoply AI 會根據你的商店描述產生品牌圖片和背景圖片。

調整聊天視窗背景圖片的透明度和長寬比。

聊天視窗中的背景圖片可能會讓其上方的文字難以閱讀。因此，我們預設會在背景圖片上方加上一層半透明圖層。

是否移除輸入列中的 Shoply AI Logo

這個選項可讓你從聊天輸入列移除 Shoply AI Logo，打造更簡潔、更符合品牌形象的體驗。如果你希望在整個商店中維持一致的品牌識別、不顯示第三方 Logo，或偏好更簡約的聊天介面設計，這個選項尤其實用。

此選項僅適用於付費方案。

AI Chat 的預先定義訊息

你也可以設定或編輯顧客首次與聊天機器人互動時引導顧客的預設訊息。此外，你還可以設定這些訊息的翻譯選項（詳情請參閱此常見問題頁面）。

彈出式歡迎訊息（不為空時顯示在聊天圖示上方）

如果你將歡迎訊息留白，我們就不會在聊天圖示上方顯示歡迎訊息。

聊天視窗中的預先定義訊息

你可以在聊天視窗中設定最多 3 種預先定義的訊息：

1. 聊天視窗中的第一則訊息 - 這是顧客首次開啟聊天視窗時自動顯示的初始問候訊息。使用這則訊息歡迎顧客，並為對話定調。

2. 最多 4 個開始提問 - 這些是聊天開始時顯示、可點選的問題建議。它們提供顧客可以點選以開始對話的常見問題，協助引導顧客，讓顧客更容易開始對話。

3. 輸入框預留位置訊息 - 這是顧客開始輸入前顯示在聊天輸入欄位中的提示文字，用來引導顧客了解可以詢問什麼，例如「你可以問我任何事 🤗」或「今天有什麼我可以幫你的嗎？」

以下是每種預先定義訊息的範例：