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

Qué aprenderás

Descubre 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 las personalizaciones de widget se pueden implementar con 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 de CSS, que se pueden usar para escribir CSS personalizado y aplicar opciones avanzadas de estilo a tus widget de reseñas. Para obtener más información, consulta nuestro diccionario completo de clases de CSS de Klaviyo Reviews.

Cómo aplicar CSS personalizado

Puedes aplicar CSS personalizado a Klaviyo Reviews de la misma manera que aplicarías cualquier otro CSS personalizado:

• Añade CSS personalizado a la hoja de estilo CSS principal de tu sitio.
• Inserta etiquetas <style> en el código de una sola página para aplicar CSS a esa página.
• Incrusta CSS en un único elemento HTML (por ejemplo, un div) para aplicarlo solo a ese elemento.
• Añade CSS personalizado a todo tu sitio en Ajustes del tema > CSS personalizado (Shopify) o Estilos > CSS (WooCommerce).

Nos centraremos en la última opción aquí, porque es la más sencilla de implementar.

Ten en cuenta que Klaviyo Reviews, incluidos los estilos predeterminados, por lo general se cargan después del CSS de tu plataforma de comercio electrónico. Esto significa que es importante usar selectores precisos, para que los valores predeterminados no sobrescriban tu CSS personalizado.

Aplicar CSS personalizado para Shopify

1. En el administrador de Shopify, ve a Online Store > Themes.
2. En el menú de opciones adicionales (3 puntos) de tu tema actual, haz clic en Duplicar.
   
   No se recomienda hacer ediciones en tu 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 de tu tema.
4. Haz clic en el icono 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 en la que aparezcan los widgets de reseñas (p. ej., Producto predeterminado).
2. Revisa las ediciones y, a continuación, haz clic en Publicar.

Añadir 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 o páginas específicas. Descubre cómo encontrar un ID de página.

1. En el administrador 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 las ediciones y, a continuación, haz clic en Publicar.

Casos de uso de CSS personalizado

Los fragmentos de CSS que aparecen a continuación abarcan algunos casos de uso básicos. Las personalizaciones más avanzadas requieren asistencia de desarrolladores. Si no tienes desarrolladores en tu equipo y no te sientes cómodo escribiendo código por tu cuenta, considera pedir ayuda a un socio de Klaviyo.

#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