如何使用 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 应用管理控制台中的 Customize AI Search 部分。
- 找到 CSS styles for search elements 文本区域
- 在文本区域中输入您的自定义 CSS 代码
- 点击 Save 以应用您的更改
CSS 基础
CSS 可让您更改颜色、字体、间距、边框等。基本语法如下：
.class-name {
property: value;
}例如，要将文本颜色改为深红色：
.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 摘要类
.shoply-ai-summary-box- 设置 AI 生成摘要的容器框样式。.shoply-ai-summary-button- 设置触发 AI 摘要生成的按钮样式。
使用 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;
}自定义商品标题
商品名称是最重要的元素之一。可对其进行自定义，使其与您的品牌保持一致：
/* 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;
}商品价格样式示例
通过自定义样式让您的价格更醒目：
/* 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）可以设置为与店铺设计相匹配的样式：
/* 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;
}设置商品图片样式
您可以通过边框、阴影或悬停效果来增强商品图片的展示效果：
/* 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 摘要区域示例
对于启用 AI Search 的商店，AI Summary 将显示在搜索结果顶部，并会基于搜索结果即时说明该买什么以及为什么买——在客户浏览商品之前就提供说明。
您可以在应用管理控制台的 Customize AI Search 页面中禁用 AI Summary。您也可以像下面所示那样使用 CSS 自定义它的外观。
设置 AI 摘要框样式
/* 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 摘要按钮
默认情况下，AI Summary 会保持简短精炼，以节省屏幕空间。客户可以点击 “AI Summary Button” 来展开并查看完整详情。想让它更符合您的品牌风格吗？您也可以自定义这个按钮！请查看下面的示例。
/* 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 (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}需要恢复为默认样式
只需清空 CSS 文本区域并保存。应用将恢复为默认样式。
需要更多帮助？
如果您在 CSS 自定义方面需要更多帮助：
- 查看应用设置中的可视化示例（Product Card Preview 和 AI Summary Preview）
- 参考 CSS 文档资源，例如 MDN Web Docs
- 如需个性化帮助，请通过 customer-obsession@shoplyai.ai 联系我们的支持团队
祝您自定义愉快！ 🎨
借助这些 CSS 类，您可以完全控制搜索结果的外观。尽情尝试、测试，并打造与您的品牌完美匹配的搜索体验！