Cómo personalizar los resultados de búsqueda con CSS

¿Quieres que tus resultados de búsqueda tengan un aspecto increíble? En esta guía aprenderás a aplicar estilos a los resultados de búsqueda de productos y a las secciones de resumen de IA con CSS. No te preocupes si es la primera vez que usas CSS: te explicamos todo lo necesario. Y si ya tienes experiencia, encontrarás muchos consejos para llevar tu personalización al siguiente nivel.

Primeros pasos

Tanto Shoply AI Chat como AI Search pueden mostrar resultados de búsqueda, por lo que las opciones de personalización CSS que añadas se aplicarán a ambos. Nota: la función AI Summary solo está disponible en Shoply AI Search.

Dónde añadir tu CSS

1. Ve a la sección Customize AI Search de la consola de administración de la aplicación Shoply.
2. Busca el área de texto CSS styles for search elements
3. Introduce tu código CSS personalizado en el área de texto
4. Haz clic en Save para aplicar los cambios

Conceptos básicos de CSS

CSS te permite cambiar colores, fuentes, espaciado, bordes y mucho 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);
}

Cómo entender las clases CSS específicas de Shoply

Shoply proporciona clases CSS específicas que puedes usar para seleccionar distintas partes de los resultados de búsqueda. Cada clase corresponde a un elemento concreto del resultado de búsqueda.

Shoply también ha definido ciertos estilos predeterminados para estas clases. Puedes inspeccionar esos estilos con Chrome DevTools  y buscar cada una de las clases. Si necesitas sobrescribir los estilos predeterminados, añade la declaración !important a tus reglas CSS, tal como se explica en la documentación de MDN sobre CSS !important .

Clases de la tarjeta de producto

Estilos del contenedor:

• .shoply-product-image - Aplica estilos a la imagen del producto
• .shoply-product-card - Aplica estilos al contenedor de la tarjeta de producto

Estilos de la información de texto:

• .shoply-product-brand - Aplica estilos al nombre de la marca o proveedor del producto que aparece sobre el título del producto
• .shoply-product-name - Aplica estilos al título o nombre del producto

Estilos del 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 tachado de forma predeterminada)
• .shoply-product-discount-percent - Aplica estilos al texto del porcentaje de descuento (se muestra en negrita y rojo de forma predeterminada)

Estilos del botón de acción:

• .shoply-product-action-button - Aplica estilos a los botones de acción principales (Añadir al carrito, Ver producto, etc.)
• .shoply-product-action-button-sold-out - Aplica estilos al botón de acción cuando el producto está agotado (estado desactivado)

Nota: en la sección Customize AI Search de la consola de administración de la aplicación Shoply puedes configurar qué ocurre 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 optar por 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 inicia la generación del resumen de IA.

Ejemplos para personalizar las tarjetas de producto de los resultados de búsqueda con CSS

Cambiar el estilo de la marca del producto

La marca del producto aparece sobre el título del producto. Estas son algunas personalizaciones habituales:

/* 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 adaptarlo a 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 de estilos para los precios de los 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

Puedes aplicar estilos a tus botones de acción (Añadir al carrito, Ver producto) para adaptarlos al diseño 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 producto

Mejora tus imágenes de producto 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

En las tiendas que activan AI Search, AI Summary aparecerá en la parte superior de los resultados de búsqueda y explicará al instante qué comprar y por qué basándose en 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 aplicación. También puedes personalizar su apariencia con 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

De forma predeterminada, AI Summary es breve para ahorrar espacio en pantalla. Los clientes pueden hacer clic en el botón «AI Summary Button» para ampliar el contenido y ver todos los detalles. ¿Quieres adaptarlo a tu marca? También puedes personalizar este botón. Consulta los ejemplos siguientes.

/* 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

1. Comprueba si hay errores tipográficos: asegúrate de que los nombres de las clases CSS estén escritos correctamente (empiezan por .shoply-)
2. Borra la caché del navegador: a veces los navegadores guardan en caché los estilos antiguos
3. Comprueba la sintaxis CSS: asegúrate de que todas las reglas CSS estén cerradas correctamente con }
4. Usa !important: si los estilos no se aplican, quizá tengas que añadir !important para 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 consultas de medios:

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

Necesito restablecer los estilos predeterminados

Simplemente borra el contenido del área de texto CSS y guarda los cambios. La aplicación volverá a los estilos predeterminados.

¿Necesitas más ayuda?

Si necesitas asistencia adicional para personalizar el CSS:

1. Consulta los ejemplos visuales de la configuración de la aplicación (vista previa de la tarjeta de producto y vista previa de AI Summary)
2. Consulta recursos de documentación sobre CSS, como MDN Web Docs 
3. Ponte en contacto con nuestro equipo de soporte para recibir ayuda personalizada en customer-obsession@shoplyai.ai

¡Feliz personalización! 🎨

Con estas clases CSS tienes control total sobre el aspecto de tus resultados de búsqueda. Experimenta, prueba y crea una experiencia de búsqueda que encaje perfectamente con tu marca.