用聊天的方式加上 FAQ 區塊

客人常常一再問同樣的幾個問題：有燕麥奶嗎？可以帶狗狗進去嗎？車要停哪裡？在網站上放一個簡短的 FAQ，就能在客人打電話或傳訊息給你之前先回答這些問題。在 WordPress 裡，你得為每個問題加上一個 details 或手風琴區塊，再調整樣式配合你的佈景主題。在 ShipPress 裡，你只要在聊天中描述這個區塊，AI 就會幫你做好。在這篇教學中，我會為 Pier 7 Coffee 的首頁加上一個「Good to know」FAQ。

選好位置與問題

在 ShipPress 中開啟你的網站，並捲動預覽畫面到你想放 FAQ 的位置。放在地址和營業時間附近效果很好，因為訪客通常會在那裡找實用的資訊。在 Pier 7 Coffee 上，我選的位置是在到店資訊（地址、吧檯營業時間、烘豆日和聯絡方式）之後、頁尾之前。接著，把客人真正會問你的四到六個問題寫下來。

修改前：到店資訊後面直接接著頁尾。
用一則訊息描述 FAQ

點選 + New Worker 開啟新的聊天，然後輸入你想要的內容：區塊標題、放置的位置、要有哪些問題、答案要多長，以及要怎麼展開。也請它配合網站其他部分的風格，並且不要動到其他地方。我送出的訊息是：
在首頁的到店資訊（地址和吧檯營業時間）之後、頁尾之前，加上一個簡短的 FAQ 區塊，標題為「Good to know」。加入咖啡吧常見的五個問題：燕麥奶、筆電與 Wi-Fi、狗狗、購買咖啡豆帶回家，以及停車。每個答案寫一到兩句話，點一下問題就會展開，預設是收合的。字型和顏色請與網站其他部分一致。其他地方都不要動。

說明要放在哪裡、有哪些問題，以及答案要怎麼展開。
讓 AI 來製作

按下 Enter。AI 會先讀取首頁的結構，再加上新的區塊。你可以在聊天中看到每個步驟。我這次大約花了兩分半鐘。

AI 會先讀取頁面，再加上區塊。
看看它做了什麼，並檢查答案

完成後，AI 會說明它加了什麼：五個一開始是收合的問題，點一下就會展開，標籤的樣式與其他區塊一致。它也會明確告訴你答案是它自己編的，並把這些答案列出來，讓你對照自己店裡實際的做法逐一確認。這一步很重要：答案錯誤的 FAQ，比沒有 FAQ 還糟糕。

AI 會列出它的範例答案，方便你檢查。
在預覽中試試看

把預覽畫面捲動到新的區塊，點一下某個問題。答案會直接在下方展開；再點一次就會收合。這些都是真正可以點擊的問題，所以在你的正式網站上也會以同樣的方式運作。

點一下問題就會展開答案。
用簡短的後續訊息微調

第一版在每個問題前面用的是小三角形，而且區塊上方留了一大片空白。一則訊息就能同時解決這兩個問題。我送出的訊息是：
把小三角形換成每個問題右邊的加號，展開時變成減號，並且移除 Good to know 區塊上方多餘的空白。
大約一分鐘後，每個問題的右邊都有了加號，展開的那題則顯示減號，空白也不見了。

小小的設計調整，一句話就能搞定。

上方是第一版，下方是後續調整後的樣子。
用 Phone 檢查

點選預覽畫面右上角的 Phone，然後捲動到這個區塊。問題會佔滿整個螢幕寬度，點擊範圍很大，加號和減號也維持在右邊，所以用拇指操作很輕鬆。

在小螢幕上也很好點。
填入你真正的答案

在 Go live 之前，把任何不符合你實際情況的答案改掉。直接用平常的說法告訴 AI 就可以，例如：「燕麥奶要加 50 分錢」或「把狗狗的答案改成：店內也歡迎狗狗進入。」你也可以新增或刪除問題，例如答案下方建議的 Add a sixth question。

完成的區塊，等你填入真正的答案。
隨時用 History 回到先前的版本

ShipPress 會在 AI 每一輪回應之後儲存一個還原點。點選右上角的 History，就能看到新增 FAQ 的還原點，以及改成加號的還原點。點選任一個旁邊的 Restore，就能回到網站在那個時間點的確切樣子。

每一次修改都是一個還原點。
小提醒
- 使用客人實際上透過電話、訊息或在櫃檯問你的問題。
- 答案要簡短：一到兩句話，並且把最重要的資訊放在最前面。
- 首頁放五到六個問題就很夠了。如果想放更多，可以請 AI 另外做一個 FAQ 頁面，再加上選單連結。
- 當價格或營業時間等內容有變動時，記得更新 FAQ。
- 在按下 Go live 之前，先用 Phone 檢查這個區塊。