Comment utiliser du CSS personnalisé pour styliser les widgets Klaviyo Reviews

Objectif de cet article

Découvrez le CSS personnalisé pour Klaviyo Reviews, y compris comment mettre en œuvre certains cas d’utilisation de base. Pour des cas d’utilisation plus avancés, rendez-vous sur notre ressource développeur sur le CSS personnalisé pour Klaviyo Reviews. La plupart des personnalisations de widget peuvent être mises en œuvre à l’aide d’ éditeurs par glisser-déposer; le CSS n’est requis que pour des cas d’utilisation avancés.

À propos du CSS personnalisé pour Klaviyo Reviews

Klaviyo Reviews propose une large gamme de sélecteurs de classes CSS, qui peuvent être utilisés pour rédiger du CSS personnalisé et appliquer des options de style avancées à vos widgets d’avis. Pour plus d’informations, consultez notre dictionnaire complet des classes CSS de Klaviyo Reviews.

Comment appliquer un CSS personnalisé

Vous pouvez appliquer du CSS personnalisé à Klaviyo Reviews de la même manière que vous appliqueriez n’importe quel autre CSS personnalisé :

• Ajoutez du CSS personnalisé à la feuille de style CSS principale de votre site.
• Insérez des tags <style> dans le code d’une seule page afin d’appliquer le CSS à cette page.
• Intégrez le CSS dans un seul élément HTML (par exemple, une div) pour l’appliquer uniquement à cet élément.
• Ajoutez du CSS personnalisé à l’ensemble de votre site dans Paramètres du thème > CSS personnalisé (Shopify) ou Styles > CSS (WooCommerce).

Nous nous concentrerons ici sur la dernière option, car c’est la plus simple à mettre en œuvre.

Notez que Klaviyo Reviews, y compris les styles par défaut, se charge généralement après le CSS de votre plateforme e-commerce. Cela signifie qu’il est important d’utiliser des sélecteurs précis, afin que votre CSS personnalisé ne soit pas remplacé par les valeurs par défaut.

Appliquez du CSS personnalisé pour Shopify

1. Dans l’interface d’administration de Shopify, accédez à Online Store > Themes.
2. Dans le menu des options supplémentaires (3 points) de votre thème actuel, cliquez sur Dupliquer.
   
   Il n’est pas recommandé d’apporter des modifications à votre thème actuel lorsqu’il est en ligne, car ces modifications pourraient apparaître aux visiteurs du site avant que vous puissiez examiner les changements et résoudre les éventuels problèmes.

3. Cliquez sur Personnaliser à côté de la nouvelle copie de votre thème.
4. Cliquez sur l’icône des paramètres du thème.
   

5. Sélectionnez CSS personnalisé dans le menu.
   

6. Ajoutez votre CSS personnalisé.
   

1. Accédez à une page dans l’éditeur où vos widget d’avis apparaissent (par exemple, Produit par défaut).
2. Vérifiez les modifications, puis cliquez sur Publier.

Ajouter du CSS personnalisé pour WooCommerce

Vous devez utiliser un sélecteur d’ID de page,.page-id-YOUR_PAGE_ID , pour appliquer du CSS à une ou plusieurs pages spécifiques. Découvrez comment trouver un ID de page.

1. Dans votre interface d’administration WordPress, accédez à Apparence > Éditeur.
2. Sélectionnez Styles.
   

3. Ouvrez le menu des trois points (Plus).
4. Sélectionnez CSS supplémentaire.
   

5. Ajoutez votre CSS personnalisé.
   

1. Vérifiez les modifications, puis cliquez sur Publier.

Cas d’utilisation du CSS personnalisé

Les extraits CSS ci-dessous couvrent quelques cas d’utilisation de base. Une personnalisation plus avancée nécessite l’intervention d’un développeur. Si vous n’avez pas de développeur dans votre équipe et si vous ne disposez pas des compétences nécessaires pour écrire du code vous-même, envisagez de contacter un partenaire Klaviyo pour obtenir de l’aide.

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