如何使用 CSS 自訂搜尋結果

How to Customize Your Search Results with CSS

準備好令你的搜尋結果更吸睛嗎？本指南會教你如何使用 CSS 為產品搜尋結果和 AI 摘要區塊設計樣式。即使你是 CSS 新手也不用擔心——我們已經為你準備好！如果你已經熟悉 CSS，這裡亦有不少技巧，幫你將自訂效果提升到另一個層次。

開始之前

Shoply AI Chat 和 AI Search 都可以顯示搜尋結果，因此你加入的 CSS 自訂選項會同時套用到兩者。注意：AI Summary 功能只適用於 Shoply 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 documentation 的說明，在你的 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 類別，你就可以完全掌控搜尋結果的外觀。盡情嘗試、測試，打造一個與品牌完美配合的搜尋體驗！