Cómo usar CSS personalizado para dar estilo a los widgets de Klaviyo Reviews

Objetivos del artículo

Obtén más información sobre el CSS personalizado para Klaviyo Reviews, incluido cómo implementar algunos casos de uso básicos. Para casos de uso más avanzados, ve a nuestro recurso para desarrolladores sobre CSS personalizado para Klaviyo Reviews. La mayoría de la personalización de widgets se puede implementar usando editores de arrastrar y soltar; el CSS solo es necesario para casos de uso avanzados.

Acerca del CSS personalizado para Klaviyo Reviews

Klaviyo Reviews ofrece una amplia gama de selectores de clase CSS, que se pueden usar para escribir CSS personalizado y aplicar opciones avanzadas de estilo a los widgets de reseñas. Para obtener más información, consulta nuestro diccionario completo de clases CSS de Klaviyo Reviews.

Cómo aplicar CSS personalizado

Puedes aplicar CSS personalizado a Klaviyo Reviews del mismo modo que aplicarías cualquier otro CSS personalizado:

• Agrega CSS personalizado a la hoja de estilos CSS principal del sitio.
• Inserta etiquetas <style> en el código de una sola página para aplicar CSS a esa página.
• Inserta CSS en un solo elemento HTML (p. ej., un div) para aplicarlo solo a ese elemento.
• Agrega CSS personalizado a todo tu sitio en Configuración del tema > CSS personalizado (Shopify) o Estilos > CSS (WooCommerce).

Aquí nos enfocaremos en la última opción, porque es la más sencilla de implementar.

Ten en cuenta que Klaviyo Reviews, incluidos los estilos predeterminados, generalmente se cargan después del CSS de tu plataforma de ecommerce. Esto significa que es importante usar selectores precisos para que tu CSS personalizado no se sobrescriba con los valores predeterminados.

Aplicar CSS personalizado para Shopify

1. En el panel de administración de Shopify, ve a Tienda en línea > Temas.
2. En el menú de opciones adicionales (3 puntos) del tema actual, haz clic en Duplicar.
   
   No se recomienda hacer ediciones al tema actual mientras está activo, ya que estas ediciones pueden aparecer a los visitantes del sitio antes de que puedas revisar los cambios y solucionar cualquier problema.

3. Haz clic en Personalizar junto a la nueva copia del tema.
4. Haz clic en el ícono de configuración del tema.
   

5. Selecciona CSS personalizado en el menú.
   

6. Añade tu CSS personalizado.
   

1. Ve a una página del editor donde aparezcan tus widgets de reseñas (por ejemplo, Producto predeterminado).
2. Revisa los cambios y, luego, haz clic en Publicar.

Agrega CSS personalizado para WooCommerce

Debes usar un selector de ID de página,.page-id-YOUR_PAGE_ID , para aplicar CSS a una página específica o a varias páginas. Aprende a encontrar un ID de página.

1. En tu panel de administración de Wordpress, ve a Apariencia > Editor.
2. Selecciona Estilos.
   

3. Abre el menú de tres puntos (Más).
4. Selecciona CSS adicional.
   

5. Añade tu CSS personalizado.
   

1. Revisa los cambios y, luego, haz clic en Publicar.

Casos de uso de CSS personalizado

Los fragmentos de CSS que aparecen a continuación cubren algunos casos de uso básicos. La personalización más avanzada requiere el apoyo de un desarrollador. Si no tienes un desarrollador en tu equipo y no te sientes con confianza para escribir código, considera ponerte en contacto con un socio de Klaviyo para recibir ayuda.

#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; 
  }
}

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}

Recursos adicionales