如何使用 CSS 自訂搜尋結果

準備好讓搜尋結果變得更吸睛了嗎？本指南將說明如何使用 CSS 設定商品搜尋結果和 AI 摘要區塊的樣式。即使你不熟悉 CSS，也不用擔心——我們會為你詳細說明！如果你已經熟悉 CSS，也能在這裡找到許多將自訂效果提升到下一個層次的技巧。

開始使用

Shoply AI Chat 和 AI Search 都能顯示搜尋結果，因此你新增的 CSS 自訂選項會同時套用到兩者。請注意：AI Summary 功能僅在 Shoply AI Search 中提供。

在哪裡新增 CSS

前往 Shoply 應用程式管理主控台中的 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 宣告。

商品卡片類別

容器樣式：

.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 應用程式管理主控台的 Customize AI Search 區段中，你可以設定顧客點選操作按鈕時的行為——可以將商品加入購物車、重新導向至商品頁面，或選擇完全隱藏操作按鈕。

AI Summary 類別

.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);
}

使用 CSS 自訂 AI Summary 區塊範例

對於啟用 AI Search 的商店，AI Summary 會顯示在搜尋結果頂端，根據搜尋結果立即說明該買什麼以及原因——顧客甚至還沒向下捲動瀏覽商品前，就能看到這些資訊。

你可以在應用程式管理主控台的 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;
}
```

樣式在行動裝置上看起來不同

部分樣式可能需要針對行動裝置調整。請使用媒體查詢：

css


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

需要重設為預設樣式

只要清空 CSS 文字區域並儲存即可。應用程式會恢復為預設樣式。

需要更多協助嗎？

如果你需要 CSS 自訂方面的進一步協助：

查看應用程式設定中的視覺範例（Product Card Preview 和 AI Summary Preview）
參考 MDN Web Docs 等 CSS 文件資源
如需個人化協助，請透過 customer-obsession@shoplyai.ai 聯絡我們的支援團隊

祝你自訂順利！ 🎨

透過這些 CSS 類別，你可以完全掌控搜尋結果的外觀。盡情嘗試與測試，打造出與品牌風格完美契合的搜尋體驗！