Cómo personalizar la apariencia de AI Search
Hay dos formas de personalizar los resultados de búsqueda de Shoply AI:
- Opciones integradas: Comienza con los controles en tu Shoply AI Admin Console para cambiar resúmenes, filtros, botones, colores y el diseño de productos sin escribir código. Explora las opciones integradas y las vistas previas.
- CSS personalizado: Si esos controles no te dan el diseño que quieres, usa CSS —el lenguaje de estilos para páginas web— para ajustar fuentes, espaciado, bordes y otros detalles visuales. Puedes usarlo junto con la configuración integrada. Ir a la guía de CSS.
Probablemente no necesitas CSS en absoluto
La mayoría de los cambios de diseño y apariencia de la búsqueda ya están disponibles en Customize AI Search dentro de tu Shoply AI Admin Console, ya sea que uses Shopify u otra plataforma de sitio web. Prueba primero estas opciones integradas y luego haz clic en Save en el panel de administración para aplicar tus elecciones. Usa CSS para los estilos que estos controles no cubren.
Los ejemplos interactivos de abajo usan las mismas vistas previas que el panel de administración. Son ilustraciones que puedes probar aquí; no cambian tu tienda.
- AI Summary: Activa o desactiva el resumen y elige si aparece arriba o abajo de los resultados de productos.
- Search filters: Muestra u oculta la barra de filtros y coloca los filtros en la parte superior, a la izquierda o en un panel flotante. El diseño de la izquierda se mueve por encima de los resultados en pantallas más pequeñas. Consulta la configuración de visibilidad de filtros de búsqueda para conocer el efecto compartido en los resultados del chat.
- Product action buttons and colors: Elige Add to Cart, View Product o No Button. Selecciona los colores de fondo y de texto del botón, y cambia el color de las estrellas de valoración para que coincida con tu tienda.
- Products per row: Elige tres o cuatro columnas en escritorio y una o dos columnas en móvil. Menos columnas dan más espacio a la imagen de cada producto.
- Total products displayed: Configura cantidades de productos separadas para pantallas móviles pequeñas, pantallas móviles más grandes y escritorio. El panel de administración ofrece 3, 4, 6, 8, 9, 12, 15, 16, 18 o 20 productos. Esto controla la cantidad de resultados, en lugar del número de columnas.
Si aún necesitas un diseño personalizado, continúa con la guía de CSS a continuación.
Primeros pasos
Si las opciones integradas no te dan el aspecto que quieres, usa CSS personalizado para ajustar con precisión tus resultados de búsqueda.
Tanto Shoply AI Chat como AI Search pueden mostrar resultados de búsqueda, por lo que las opciones de personalización de CSS que agregues se aplicarán a ambos. Nota: la función AI Summary solo está disponible en Shoply AI Search.
Primero, habilita AI Search antes de aplicarle estilos para que puedas previsualizar los cambios en resultados reales.
Dónde agregar tu CSS
Para ocultar toda la barra de filtros, usa el control integrado: ve a Customize AI Search → Search filters, desactiva Show filters in search results y haz clic en Save. No se necesita CSS. Consulta Hide Search Filters para más detalles.
- Ve a la sección Customize AI Search en la consola de administración de la app de Shoply.
- Busca el área de texto CSS styles for search elements
- Introduce tu código CSS personalizado en el área de texto
- Haz clic en Save para aplicar tus cambios
Conceptos básicos de CSS
CSS te permite cambiar colores, fuentes, espaciado, bordes y más. La sintaxis básica es:
.class-name {
property: value;
}Por ejemplo, para cambiar el color del texto a rojo oscuro:
.shoply-product-name {
color:rgb(82, 2, 2);
}Comprender las clases CSS específicas de Shoply
Shoply proporciona clases CSS específicas que puedes usar para apuntar a diferentes partes de tus resultados de búsqueda. Cada clase corresponde a un elemento específico del resultado de búsqueda.
Shoply también ha definido ciertos estilos predeterminados para estas clases. Puedes inspeccionar esos estilos usando Chrome DevTools y buscar cada una de las clases. Si necesitas sobrescribir los estilos predeterminados, agrega la declaración !important a tus reglas CSS como se explica en la documentación de MDN sobre CSS !important .
Clases de la tarjeta de producto
Estilos para el contenedor:
.shoply-product-image- Aplica estilos a la imagen del producto.shoply-product-card- Aplica estilos al contenedor de la tarjeta de producto
Estilos para la información de texto:
.shoply-product-brand- Aplica estilos al nombre de la marca/proveedor del producto que se muestra encima del título del producto.shoply-product-name- Aplica estilos al título/nombre del producto
Estilos para el precio:
.shoply-product-price- Aplica estilos al precio del producto (después de aplicar el descuento).shoply-product-original-price-before-discount- Aplica estilos al precio original antes del descuento (con decoración de tachado por defecto).shoply-product-discount-percent- Aplica estilos al texto del porcentaje de descuento (mostrado como texto rojo en negrita por defecto)
Estilos para el botón de acción:
.shoply-product-action-button- Aplica estilos a los botones de acción principales (Add to Cart, View Product, etc.).shoply-product-action-button-sold-out- Aplica estilos al botón de acción cuando el producto está agotado (estado deshabilitado)
Nota: En la sección Customize AI Search de la consola de administración de la app de Shoply, puedes configurar qué sucede cuando los clientes hacen clic en el botón de acción: pueden añadir el producto al carrito, ser redirigidos a la página del producto o puedes elegir ocultar completamente el botón de acción.
Clases de AI Summary
.shoply-ai-summary-box- Aplica estilos al cuadro contenedor de los resúmenes generados por IA..shoply-ai-summary-button- Aplica estilos al botón que activa la generación del resumen por IA.
Ejemplos para personalizar tarjetas de producto en resultados de búsqueda con CSS
Cambiar el estilo de la marca del producto
La marca del producto aparece encima del título del producto. Aquí tienes algunas personalizaciones comunes:
/* Make brand name smaller and gray */
.shoply-product-brand {
font-size: 11px;
color: #888888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}Personalizar el título del producto
El nombre del producto es uno de los elementos más importantes. Personalízalo para que coincida con tu marca:
/* 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;
}Ejemplos para aplicar estilos a los precios de productos
Haz que tus precios destaquen con estilos personalizados:
/* 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;
}Personalizar los botones de acción
Tus botones de acción (Add to Cart, View Product) se pueden diseñar para que coincidan con el estilo de tu tienda:
/* 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;
}Aplicar estilos a las imágenes de productos
Mejora tus imágenes de productos con bordes, sombras o efectos al pasar el cursor:
/* 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);
}Ejemplos para personalizar la sección AI Summary
Para las tiendas que habilitan AI Search, AI Summary aparecerá en la parte superior de los resultados de búsqueda y explicará al instante qué comprar y por qué en función de los resultados de búsqueda, antes incluso de que los clientes se desplacen por los productos.
Puedes desactivar AI Summary en la página Customize AI Search de la consola de administración de la app. También puedes personalizar su apariencia usando CSS como se muestra a continuación.
Aplicar estilos al cuadro de 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);
}Personalizar el botón de AI Summary
Por defecto, AI Summary se mantiene breve y conciso para ahorrar espacio en pantalla. Los clientes pueden hacer clic en el “AI Summary Button” para expandirlo y ver todos los detalles. ¿Quieres que coincida con tu marca? ¡También puedes personalizar este botón! Mira los ejemplos de abajo.
/* 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);
}Solución de problemas
Mis cambios de CSS no aparecen
- Revisa si hay errores tipográficos: Asegúrate de que los nombres de tus clases CSS estén escritos correctamente (comienzan con
.shoply-) - Limpia la caché de tu navegador: A veces los navegadores guardan estilos antiguos en caché
- Revisa la sintaxis de CSS: Asegúrate de que todas tus reglas CSS estén correctamente cerradas con
} - Usa
!important: Si los estilos no se aplican, puede que necesites agregar!importantpara sobrescribir los estilos predeterminados:css.shoply-product-action-button { background-color: #ff0000 !important; }
Los estilos se ven diferentes en móvil
Algunos estilos pueden necesitar ajustes específicos para móvil. Usa media queries:
@media (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}Necesitas restablecer los estilos predeterminados
Simplemente borra el área de texto de CSS y guarda. La app volverá a los estilos predeterminados.
¿Necesitas más ayuda?
Si necesitas ayuda adicional con la personalización de CSS:
- Revisa los ejemplos visuales en la configuración de la app (Product Card Preview y AI Summary Preview)
- Consulta recursos de documentación de CSS como MDN Web Docs
- Contacta a nuestro equipo de soporte para obtener ayuda personalizada en customer-obsession@shoplyai.ai
¡Feliz personalización! 🎨
Con estas clases CSS, tienes control total sobre la apariencia de tus resultados de búsqueda. ¡Experimenta, prueba y crea una experiencia de búsqueda que encaje perfectamente con tu marca!