Cómo utilizar CSS personalizado para dar estilo al widget Klaviyo Reviews
Objetivos de aprendizaje
Aprende sobre CSS personalizado para Klaviyo Reviews, incluyendo cómo implementar algunos casos de uso básicos. Para casos de uso más avanzados, dirígete a nuestro recurso para desarrolladores sobre CSS personalizado para Klaviyo Reviews. La mayor parte de la personalización de widget puede implementarse utilizando editores de arrastrar y soltar; sólo se necesita CSS para casos de uso avanzado.
Implementar CSS personalizado para tu widget de reseñas implica editar el código de tu sitio. Esto sólo se recomienda a especialistas en marketing con conocimientos técnicos o a quienes tengan acceso a un desarrollador. Aunque nuestro producto hace CSS personalizado, nuestro equipo de asistencia no puede ayudarte a personalizar tu widget más allá de la orientación general cubierta en esta documentación. Para mantener la seguridad de tus datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.
Acerca del CSS personalizado para Klaviyo Reviews
Klaviyo Reviews proporciona una amplia gama de selectores de clase CSS, que pueden utilizarse para escribir CSS personalizado y aplicar opciones de estilo avanzadas a tu widget de reseñas. Para más información, dirígete a nuestro diccionario completo de clases CSS de Klaviyo Reviews.
Cómo aplicar CSS personalizadoCómo aplicar CSS personalizado
Puedes aplicar CSS personalizado a Klaviyo Reviews del mismo modo que aplicarías cualquier otro CSS personalizado:
- Añade CSS personalizado a la hoja de estilos CSS principal de tu sitio.
- Inserta <style> etiqueta dentro del código de una página para aplicar CSS a esa página.
- Incrusta CSS en un único elemento HTML (por ejemplo, un div) para aplicarlo sólo a ese elemento.
- Añade CSS personalizado a todo tu sitio en Configuración del tema > CSS personalizado (Shopify) o Estilos > CSS (WooCommerce).
Nos centraremos aquí en la última opción, porque es la más sencilla de aplicar.
Ten en cuenta que Klaviyo Reviews, incluidos los estilos por defecto, generalmente se cargan después del CSS de tu plataforma ecommerce. Esto significa que es importante utilizar selectores precisos, para que tu CSS personalizado no sea sobrescrito por el predeterminado.
Aplicar CSS personalizado para ShopifyAplicar CSS personalizado para Shopify
- En tu Shopify admin, navega a tienda en línea > Temas.
- En el menú de opciones adicionales (3 puntos) de tu tema actual, haz clic en Duplicar.
No es recomendable realizar modificaciones en tu tema actual mientras está activo, ya que estas modificaciones pueden aparecer a los visitantes del sitio antes de que puedas revisar los cambios y solucionar cualquier problema. - Haz clic en Personalizar junto a la nueva copia de tu tema.
- Haz clic en el icono Configuración del tema.
- Selecciona Personalizar CSS en el menú.
- Añade tu CSS personalizado.
En la sección de abajo encontrarás fragmentos de CSS de muestra para copiar. - Ve a una página del editor en la que aparezca tu widget de valoraciones (por ejemplo, Producto predeterminado).
- Revisa las modificaciones y haz clic en Publicar.
Añadir CSS personalizado para WooCommerce
Debes utilizar un selector de ID de página,.page-id-YOUR_PAGE_ID para aplicar CSS a una página o páginas concretas. Aprende a encontrar el ID de una página.
- En tu admin de Wordpress, navega a Apariencia > Editor.
- Selecciona Estilos.
- Abre el menú de los tres puntos(Más).
- Selecciona CSS adicional.
- Añade tu CSS personalizado.
En la sección de abajo encontrarás fragmentos de CSS de muestra para copiar. - Revisa las modificaciones y haz clic en Publicar.
Casos de uso de CSS personalizado
Los siguientes fragmentos de CSS cubren algunos casos de uso básicos. Una personalización más avanzada requiere un equipo de asistencia al desarrollador. Si no tienes un desarrollador en tu equipo y no te sientes cómodo escribiendo código tú mismo, considera la posibilidad de ponerte en contacto con un socio de Klaviyo para que te ayude.
Aspecto del icono de puntuación (estrella)
Sustituye las URL de abajo por URL de imágenes que representen la estrella completa, la estrella parcial y la estrella vacía que prefieras, respectivamente. Ten en cuenta que para Shopify tienda, comercio, tus URL deben hacer referencia a imágenes tienda, comercio en Shopify, debido a sus normas.
Klaviyo-envoltorio-reseñas-producto {
.kl_reviews__star {
display: none;
}
.kl_reviews__full_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__estrella_parcial {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__empty_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}
Tamaño de la miniatura de la imagen
Establece una anchura específica para las imágenes enviadas por el cliente en tu lista de revisiones.
Klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Colores y estilos de botones
Aplica estilos sólo al botón Escribir una opinión.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Aplica estilos sólo al botón Haz una pregunta.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}