Как да персонализирате резултатите от търсенето си с 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 за подробности.
- Отидете в секцията 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);
}Разбиране на специфичните за Shoply CSS класове
Shoply предоставя специфични CSS класове, които можете да използвате, за да насочвате различни части от резултатите от търсенето си. Всеки клас съответства на конкретен елемент в резултата от търсенето.
Shoply също така е дефинирал определени стилове по подразбиране за тези класове. Можете да прегледате тези стилове чрез Chrome DevTools и да търсите всеки от класовете. Ако трябва да презапишете стиловете по подразбиране, добавете декларацията !important към своите CSS правила, както е обяснено в MDN CSS !important documentation .
Класове за продуктова карта
Стилове за контейнера:
.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 не се показват
- Проверете за правописни грешки: Уверете се, че имената на CSS класовете са изписани правилно (започват с
.shoply-) - Изчистете кеша на браузъра си: Понякога браузърите кешират стари стилове
- Проверете CSS синтаксиса: Уверете се, че всички ваши CSS правила са правилно затворени с
} - Използвайте
!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 персонализацията:
- Проверете визуалните примери в настройките на приложението (Product Card Preview и AI Summary Preview)
- Разгледайте ресурси с документация за CSS, като MDN Web Docs
- Свържете се с нашия екип за поддръжка за персонализирана помощ на customer-obsession@shoplyai.ai
Приятно персонализиране! 🎨
С тези CSS класове имате пълен контрол върху външния вид на резултатите от търсенето си. Експериментирайте, тествайте и създайте търсещо изживяване, което идеално съответства на вашата марка!