如何自訂 AI Search 外觀

你可以用兩種方式自訂 Shoply AI 搜尋結果：

內建選項： 先從 Shoply AI Admin Console 中的控制項開始，不需要撰寫程式碼，就能調整摘要、篩選器、按鈕、色彩與商品版面配置。查看內建選項與預覽。
自訂 CSS： 如果這些控制項仍無法達到你想要的設計，可使用 CSS（網頁的樣式語言）進一步微調字型、間距、邊框與其他視覺細節。你也可以搭配內建設定一起使用。前往 CSS 指南。

Customize AI Search includes built-in summary controls and a preview before you use custom CSS. Click the screenshot to view it at full size.

你可能根本不需要 CSS

大多數搜尋版面與外觀變更，都已經可在 Shoply AI Admin Console 的 Customize AI Search 中完成，不論你使用 Shopify 或其他網站平台皆然。請先試試這些內建選項，然後在後台點擊 Save 套用你的設定。只有在這些控制項未涵蓋的樣式需求時，再使用 CSS。

下方的互動式範例使用與後台相同的預覽。你可以在這裡試用作為示意；它們不會變更你的商店。

AI Summary： 可開啟或關閉摘要，並選擇顯示在商品結果上方或下方。

AI Summary

AI Summary preview

AI Summary

AI Summary appears automatically above the products and grows as the text is generated. Illustrative summary; actual text depends on the search.

搜尋篩選器： 顯示或隱藏篩選列，並將篩選器放在上方、左側或浮動面板中。左側版面在較小螢幕上會移到結果上方。關於對聊天結果的共同影響，請參閱搜尋篩選器可見性設定。

Filter layout

Layout preview

Filters appear in a row above the products.

商品操作按鈕與色彩： 可選擇 Add to Cart、View Product 或 No Button。你也可以設定按鈕背景色與文字色，並調整評分星星的顏色，使其與商店風格一致。

Action buttonButton background Button text Rating stars

Action Button preview

Everyday winter jacket

$129.00

Customers can add products to their cart directly from search results. Try the example button.

Illustrative product. Preview clicks do not change a real cart or leave this page.

每列商品數： 可在桌面版選擇三欄或四欄，在手機版選擇一欄或兩欄。欄數較少時，每張商品圖片可獲得更多顯示空間。

Products per row on desktop

Product

Products per row on mobile

Product

顯示的商品總數： 可分別為小型手機螢幕、較大型手機螢幕與桌面版設定不同的商品數量。後台提供 3、4、6、8、9、12、15、16、18 或 20 個商品可選。這控制的是結果數量，而不是欄數。

如果你仍需要自訂設計，請繼續閱讀下方的 CSS 指南。

開始使用

如果內建選項無法提供你想要的外觀，可以使用自訂 CSS 進一步微調搜尋結果。

由於 Shoply AI Chat 與 AI Search 都可以顯示搜尋結果，因此你新增的 CSS 自訂樣式會同時套用到兩者。注意：AI Summary 功能僅在 Shoply AI Search 中提供。

首先，請先啟用 AI Search 再進行樣式調整，這樣你才能在真實搜尋結果上預覽變更。

在哪裡加入 CSS

如果你要隱藏整個篩選列，請使用內建控制項：前往 Customize AI Search → Search filters，關閉 Show filters in search results，然後點擊 Save。不需要使用 CSS。詳情請參閱 Hide Search Filters 。

前往 Shoply app 管理後台中的 Customize AI Search 區段。
找到 CSS styles for search elements 文字輸入區
在文字輸入區中輸入你的自訂 CSS 程式碼
點擊 Save 套用你的變更

CSS 基礎

CSS 可讓你變更色彩、字型、間距、邊框等。基本語法如下：

css


.class-name {
    property: value;
}

例如，若要將文字顏色改成深紅色：

css


.shoply-product-name {
    color:rgb(82, 2, 2);
}

了解 Shoply 專用的 CSS 類別

Shoply 提供了特定的 CSS 類別，讓你可精準指定搜尋結果中的不同部分。每個類別都對應搜尋結果中的特定元素。

Shoply 也已為這些類別定義某些預設樣式。你可以使用 Chrome DevTools 檢查這些樣式，並搜尋各個類別。如果你需要覆寫預設樣式，請依照 MDN CSS !important 文件的說明，在 CSS 規則中加入 !important 宣告。

商品卡片類別

Customizing Product Cards in Search Results with CSS

容器樣式：

.shoply-product-image - 設定商品圖片樣式
.shoply-product-card - 設定商品卡片容器樣式

文字資訊樣式：

.shoply-product-brand - 設定顯示在商品標題上方的商品品牌／供應商名稱樣式
.shoply-product-name - 設定商品標題／名稱樣式

價格樣式：

.shoply-product-price - 設定商品價格樣式（套用折扣後）
.shoply-product-original-price-before-discount - 設定折扣前原價樣式（預設帶有刪除線）
.shoply-product-discount-percent - 設定折扣百分比文字樣式（預設為粗體紅字）

操作按鈕樣式：

.shoply-product-action-button - 設定主要操作按鈕樣式（Add to Cart、View Product 等）
.shoply-product-action-button-sold-out - 設定商品售完時的操作按鈕樣式（停用狀態）

注意：在 Shoply app 管理後台的 Customize AI Search 區段中，你可以設定顧客點擊操作按鈕後的行為——可將商品加入購物車、重新導向至商品頁面，或選擇完全隱藏操作按鈕。

AI Summary 類別

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - 設定 AI 產生摘要的容器方塊樣式。
.shoply-ai-summary-button - 設定觸發 AI 摘要產生按鈕的樣式。

使用 CSS 自訂搜尋結果中商品卡片的範例

變更商品品牌樣式

商品品牌會顯示在商品標題上方。以下是一些常見的自訂方式：

css


/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

自訂商品標題

商品名稱是最重要的元素之一。你可以自訂它，使其符合你的品牌風格：

css


/* Make product title bold and larger */
.shoply-product-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 8px;
}
 
/* Add hover effect */
.shoply-product-name:hover {
    color: #0066cc;
    text-decoration: underline;
}

商品價格樣式範例

透過自訂樣式讓價格更醒目：

css


/* Style the current price (after discount) */
.shoply-product-price {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    margin-top: 10px;
}
 
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
    text-decoration: line-through;
}

自訂操作按鈕

你的操作按鈕（Add to Cart、View Product）也可以調整成符合商店設計的樣式：

css


/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
}
 
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
 
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

商品圖片樣式設定

你可以透過邊框、陰影或滑鼠懸停效果，提升商品圖片的呈現：

css


/* Add border and shadow to product images */
.shoply-product-image {
    border-radius: 8px;
    border: 2px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
 
/* Add hover effect of the product image*/
.shoply-product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

自訂 AI Summary 區塊的範例

對於已啟用 AI Search 的商店，AI Summary 會顯示在搜尋結果頂部，並根據搜尋結果立即說明該買什麼與原因——顧客甚至還沒開始捲動瀏覽商品之前就能看到。

你可以在 app 管理後台的 Customize AI Search 頁面中停用 AI Summary。你也可以如以下所示，使用 CSS 自訂它的外觀。

AI Summary 方塊樣式設定

css


    /* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
 
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

自訂 AI Summary 按鈕

預設情況下，AI Summary 會保持簡短精要，以節省螢幕空間。顧客可以點擊「AI Summary Button」展開並查看完整細節。想讓它更符合你的品牌風格嗎？你也可以自訂這個按鈕！請參考以下範例。

css


/* Customize the summary button */
.shoply-ai-summary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
 
/* Add hover effect */
.shoply-ai-summary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

疑難排解

我的 CSS 變更沒有顯示

檢查是否有拼字錯誤：確認你的 CSS 類別名稱拼寫正確（它們都以 .shoply- 開頭）
清除瀏覽器快取：有時瀏覽器會快取舊樣式
檢查 CSS 語法：確認所有 CSS 規則都有正確以 } 結尾
使用 !important：如果樣式沒有套用，你可能需要加入 !important 來覆寫預設樣式：
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

手機版上的樣式看起來不同

有些樣式可能需要針對手機版另外調整。請使用 media queries：

css


@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

需要重設為預設樣式

只要清空 CSS 文字輸入區並儲存即可。app 會恢復為預設樣式。

需要更多協助？

如果你需要更多 CSS 自訂方面的協助：

查看 app 設定中的視覺範例（Product Card Preview 與 AI Summary Preview）
參考 CSS 文件資源，例如 MDN Web Docs
透過 customer-obsession@shoplyai.ai 聯絡我們的支援團隊，以獲得個人化協助

祝你自訂順利！ 🎨

有了這些 CSS 類別，你就能完整掌控搜尋結果的外觀。盡情實驗、測試，打造與你品牌完美契合的搜尋體驗！