如何自訂 Shoply AI Chat 的外觀

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

本節會帶你了解 AI 聊天機械人提供的各種自訂選項。你可以個人化其外觀、聊天視窗設計及訊息體驗，使其配合你的品牌。

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

選擇聊天圖示

選擇圖示

你可以從我們預設的 17 款不同圖示中選擇聊天圖示，或上載圖片作為自己的聊天圖示。

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

主要顏色

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

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

互補顏色

這是與主要顏色配合使用的互補顏色，會為聊天圖示及聊天視窗標題建立漸變效果（兩種顏色之間的平滑過渡），令聊天圖示更具吸引力，並與你的品牌保持一致。

圖示線條顏色

這是聊天圖示的輪廓顏色。

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

如果你上載圖片作為聊天圖示，並希望移除聊天圖示的背景顏色（主要顏色），這項設定通常會很有用。

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

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

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

在流動裝置上，你可能希望將聊天圖示設為較小尺寸，以免遮擋客戶查看流動裝置螢幕的視線。

設定聊天圖示的位置

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

聊天圖示的 Z-index：

如果你希望圖示保持在其他使用者介面元素前方，請使用較高的數值。

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

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

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

自訂聊天視窗

當你按下 Shoply AI 的聊天圖示時，聊天視窗便會彈出。客戶可以透過該聊天視窗與 Shoply AI 互動。

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

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

如果你選擇深色模式，聊天視窗的背景會是黑色，字體顏色則會是白色。如果你的商店主題同樣採用深色模式，我們建議你選擇深色模式選項。

桌面版聊天視窗的寬度

此選項只適用於桌面版。在流動裝置上，聊天視窗會一直佔用整個螢幕。

選擇品牌圖片和背景圖片

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

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

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

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

是否移除輸入列中的 Shoply AI 標誌

此選項可讓你移除聊天輸入列中的 Shoply AI 標誌，營造更簡潔、更具品牌特色的體驗。如果你希望整間商店維持一致的品牌形象，不顯示第三方標誌，或偏好更簡約的聊天介面設計，這項設定尤其有用。

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

AI Chat 的預設訊息

你也可以設定或編輯預設訊息，在客戶首次與你的聊天機械人互動時提供引導。此外，你可以設定這些訊息的翻譯選項（詳情請參閱這個FAQ 頁面）。

彈出式歡迎訊息（如不留空，則會顯示在聊天圖示上方）

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

聊天視窗中的預設訊息

你可以在聊天視窗中設定最多 3 類預設訊息：

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

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

3. 輸入框提示訊息 - 這是在客戶開始輸入前顯示於聊天輸入欄位中的提示文字，為客戶提供可提問內容的指引，例如「隨便問我任何問題 🤗」或「今天我可以怎樣幫你？」

請參閱以下各類預設訊息的示例：