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.

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 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 Shopify

1. En tu Shopify admin, navega a tienda en línea > Temas.
2. 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.

3. Haz clic en Personalizar junto a la nueva copia de tu tema.
4. Haz clic en el icono Configuración del tema.
   

5. Selecciona Personalizar CSS en el menú.
   

6. Añade tu CSS personalizado.
   

1. Ve a una página del editor en la que aparezca tu widget de valoraciones (por ejemplo, Producto predeterminado).
2. 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.

1. En tu admin de Wordpress, navega a Apariencia > Editor.
2. Selecciona Estilos.
   

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

5. Añade tu CSS personalizado.
   

1. 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.

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

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