Как настроить внешний вид AI Search

Есть два способа настроить результаты поиска Shoply AI:

• Встроенные параметры: Начните с элементов управления в вашей Shoply AI Admin Console, чтобы изменить сводки, фильтры, кнопки, цвета и макет товаров без написания кода. Изучите встроенные параметры и предварительные просмотры.
• Пользовательский CSS: Если эти элементы управления не дают нужный вам дизайн, используйте CSS — язык стилизации веб-страниц — чтобы тонко настроить шрифты, отступы, границы и другие визуальные детали. Его можно использовать вместе со встроенными настройками. Перейти к руководству по CSS.

CSS вам, вероятно, вообще не нужен

Большинство изменений макета и внешнего вида поиска уже доступны в разделе Customize AI Search в вашей Shoply AI Admin Console, независимо от того, используете ли вы Shopify или другую платформу сайта. Сначала попробуйте эти встроенные параметры, затем нажмите Save в админке, чтобы применить выбранные настройки. Используйте CSS для стилизации, которую эти элементы управления не покрывают.

Интерактивные примеры ниже используют те же предварительные просмотры, что и в админке. Это демонстрации, которые можно попробовать здесь; они не изменяют ваш магазин.

• AI Summary: Включайте или выключайте сводку и выбирайте, будет ли она отображаться над результатами товаров или под ними.

• Фильтры поиска: Показывайте или скрывайте панель фильтров, а также размещайте фильтры сверху, слева или во всплывающей панели. В макете с размещением слева на меньших экранах фильтры перемещаются над результатами. См. настройки видимости фильтров поиска, чтобы узнать об общем эффекте для результатов чата.

• Кнопки действий товара и цвета: Выберите Add to Cart, View Product или No Button. Выберите цвет фона и текста кнопки, а также измените цвет звёзд рейтинга в соответствии с вашим магазином.

• Товаров в строке: Выберите три или четыре колонки на десктопе и одну или две колонки на мобильных устройствах. Меньшее количество колонок даёт больше места для изображения каждого товара.

• Общее количество отображаемых товаров: Установите отдельное количество товаров для маленьких мобильных экранов, больших мобильных экранов и десктопа. В админке доступны 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 .

1. Перейдите в раздел Customize AI Search в админ-консоли приложения Shoply.
2. Найдите текстовое поле CSS styles for search elements
3. Введите свой пользовательский CSS-код в текстовое поле
4. Нажмите 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 не отображаются

1. Проверьте опечатки: Убедитесь, что имена ваших CSS-классов написаны правильно (они начинаются с .shoply-)
2. Очистите кэш браузера: Иногда браузеры кэшируют старые стили
3. Проверьте синтаксис CSS: Убедитесь, что все ваши CSS-правила корректно закрыты с помощью }
4. Используйте !important: Если стили не применяются, возможно, вам нужно добавить !important, чтобы переопределить стили по умолчанию:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

На мобильных устройствах стили выглядят иначе

Некоторым стилям могут потребоваться отдельные настройки для мобильных устройств. Используйте media queries:

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

Нужно сбросить стили к значениям по умолчанию

Просто очистите текстовое поле CSS и сохраните изменения. Приложение вернётся к стилизации по умолчанию.

Нужна дополнительная помощь?

Если вам нужна дополнительная помощь с настройкой CSS:

1. Посмотрите визуальные примеры в настройках приложения (Product Card Preview и AI Summary Preview)
2. Обратитесь к ресурсам по документации CSS, таким как MDN Web Docs 
3. Свяжитесь с нашей службой поддержки для персональной помощи по адресу customer-obsession@shoplyai.ai

Удачной настройки! 🎨

С этими CSS-классами у вас есть полный контроль над внешним видом результатов поиска. Экспериментируйте, тестируйте и создайте поисковый опыт, который идеально соответствует вашему бренду!