Как да персонализирате външния вид на 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);
}

Разбиране на специфичните за Shoply CSS класове

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 обобщение.

Примери за персонализиране на продуктови карти в резултатите от търсенето с 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;
}

Стилизиране на изображенията на продуктите

Подобрете изображенията на продуктите с рамки, сенки или hover ефекти:

/* 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 класове имате пълен контрол върху външния вид на резултатите от търсенето. Експериментирайте, тествайте и създайте търсене, което идеално съответства на вашия бранд!