Qué aprenderás
Aprenda sobre CSS personalizado para Klaviyo Reviews, incluyendo cómo implementar algunos casos de uso básicos. Para casos de uso más avanzados, diríjase a nuestro recurso para desarrolladores sobre CSS personalizado para Klaviyo Reviews. La mayor parte de la personalización de los widgets puede implementarse mediante editores de arrastrar y soltar; el CSS sólo es necesario para casos de uso avanzados.
Implementar CSS personalizado para sus widgets de reseñas implica editar el código de su sitio. Esto sólo se recomienda a los vendedores con conocimientos técnicos o a los que tienen acceso a un desarrollador. Aunque nuestro producto admite CSS personalizado, nuestro equipo de asistencia no puede ayudarle a personalizar sus widgets más allá de las orientaciones generales que se recogen en esta documentación. Para mantener la seguridad de sus datos, el equipo de soporte de Klaviyo no puede abrir sus archivos HTML.
Acerca del CSS personalizado para Klaviyo Reseñas
Klaviyo Reviews proporciona una amplia gama de selectores de clase CSS, que se pueden utilizar para escribir CSS personalizado y aplicar opciones avanzadas de estilo a sus widgets de reviews. Para más información, diríjase a nuestro diccionario completo de clases CSS de Klaviyo Reviews.
Cómo aplicar CSS personalizadoCómo aplicar CSS personalizado
Puede aplicar CSS personalizado a las Revisiones de Klaviyo de la misma manera que aplicaría cualquier otro CSS personalizado:
- Añada CSS personalizado a la hoja de estilos CSS principal de su sitio.
- Inserte <style> etiquetas de estilo <> dentro del código de una página para aplicar CSS a esa página.
- Incruste CSS en un único elemento HTML (por ejemplo, un div) para aplicarlo sólo a ese elemento.
- Añada CSS personalizado a todo su 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.
Tenga en cuenta que las Revisiones de Klaviyo, incluyendo los estilos por defecto, generalmente se cargan después del CSS de su plataforma de comercio electrónico. Esto significa que es importante utilizar selectores precisos, para que su CSS personalizado no sea sobrescrito por los predeterminados.
Aplicar CSS personalizado para ShopifyAplicar CSS personalizado para Shopify
- En su admin de Shopify, navegue a Tienda Online > Temas.
- En el menú de opciones adicionales (3 puntos) de su tema actual, haga clic en Duplicar.
No se recomienda realizar ediciones en su tema actual mientras está en vivo, ya que estas ediciones pueden aparecer a los visitantes del sitio antes de que pueda revisar los cambios y solucionar cualquier problema. - Haga clic en Personalizar junto a la nueva copia de su tema.
- Pulse el icono Configuración del tema.
- Seleccione Personalizar CSS en el menú.
- Añada su CSS personalizado.
En la sección de abajo encontrará fragmentos de CSS de muestra para copiar. - Navegue hasta una página del editor en la que aparezcan sus widgets de reseñas (por ejemplo, Producto predeterminado).
- Revise las ediciones y haga clic en Publicar.
Añadir CSS personalizado para WooCommerce
Debe utilizar un selector de ID de página,.page-id-YOUR_PAGE_ID , para aplicar CSS a una página o páginas específicas. Aprenda a encontrar el ID de una página.
- En su admin de Wordpress, navegue a Apariencia > Editor.
- Seleccione estilos.
- Abra el menú de los tres puntos(Más).
- Seleccione CSS adicional.
- Añada su CSS personalizado.
En la sección de abajo encontrará fragmentos de CSS de muestra para copiar. - Revise las ediciones y haga 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 el apoyo de los desarrolladores. Si no tiene un desarrollador en su equipo y no se siente cómodo escribiendo código usted mismo, considere la posibilidad de contactar con un socio de Klaviyo para que le ayude.
Aspecto del icono de calificación (estrella)
Sustituya las direcciones URL siguientes por direcciones URL de imágenes que representen la estrella completa, la estrella parcial y la estrella vacía que prefiera, respectivamente. Tenga en cuenta que para las tiendas Shopify, sus URL deben hacer referencia a las imágenes almacenadas en Shopify, debido a sus reglas.
#klaviyo-product-reviews-wrapper {
.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__partial_star {
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
Establezca una anchura específica para las imágenes enviadas por los clientes en su lista de revisiones.
#klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Colores y estilos de los botones
Aplique 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;
} Aplique estilos sólo al botón Hacer una pregunta.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}