Как настроить результаты поиска с помощью CSS
Хотите сделать результаты поиска привлекательными? В этом руководстве мы покажем, как с помощью CSS оформить результаты поиска товаров и разделы AI Summary. Не беспокойтесь, если вы впервые работаете с CSS: мы всё подробно объясним! А если вы уже уверенно пользуетесь CSS, здесь вы найдёте множество советов, которые помогут вывести настройку на новый уровень.
Начало работы
И Shoply AI Chat, и AI Search могут отображать результаты поиска, поэтому добавленные вами параметры настройки CSS будут применяться к обоим. Обратите внимание: функция AI Summary доступна только в Shoply AI Search.
Где добавить CSS
- Перейдите в раздел Customize AI Search в панели администратора приложения Shoply.
- Найдите текстовое поле CSS styles for search elements
- Введите собственный код CSS в текстовое поле
- Нажмите Save, чтобы применить изменения
Основы CSS
CSS позволяет изменять цвета, шрифты, интервалы, границы и многое другое. Базовый синтаксис выглядит так:
.class-name {
property: value;
}Например, чтобы изменить цвет текста на тёмно-красный:
.shoply-product-name {
color:rgb(82, 2, 2);
}Знакомство со специальными классами CSS Shoply
Shoply предоставляет специальные классы CSS, с помощью которых можно выбирать разные части результатов поиска. Каждый класс соответствует определённому элементу результата поиска.
Shoply также определил некоторые стили по умолчанию для этих классов. Вы можете просмотреть их с помощью Chrome DevTools и найти каждый из классов. Если нужно переопределить стили по умолчанию, добавьте объявление !important в правила CSS, как описано в документации MDN по 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- задаёт стили кнопки действия, когда товар распродан (отключённое состояние)
Примечание: в разделе Customize AI Search панели администратора приложения Shoply можно настроить действие при нажатии покупателем кнопки действия: добавить товар в корзину, перенаправить на страницу товара или полностью скрыть кнопку действия.
Классы AI Summary
.shoply-ai-summary-box- задаёт стили контейнера для сводок, созданных с помощью AI..shoply-ai-summary-button- задаёт стили кнопки, запускающей создание AI Summary.
Примеры настройки карточек товаров в результатах поиска с помощью 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 Summary
В магазинах, где включён AI Search, AI Summary отображается в верхней части результатов поиска и сразу объясняет, что и почему стоит купить, основываясь на результатах поиска, — ещё до того, как покупатели прокрутят страницу до товаров.
Вы можете отключить AI Summary на странице Customize AI Search в панели администратора приложения. Также можно настроить его внешний вид с помощью CSS, как показано ниже.
Оформление блока AI Summary
/* 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”, чтобы развернуть сводку и увидеть подробности. Хотите привести её в соответствие с вашим брендом? Эту кнопку тоже можно настроить! Ниже приведены примеры.
/* 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 вы получаете полный контроль над внешним видом результатов поиска. Экспериментируйте, тестируйте и создавайте интерфейс поиска, который идеально соответствует вашему бренду!