Vous apprendrez
Découvrez les CSS personnalisés pour Klaviyo Reviews, y compris la façon de mettre en œuvre quelques cas d'utilisation de base. Pour des cas d'utilisation plus avancés, consultez notre ressource développeur sur les CSS personnalisés pour Klaviyo Reviews. La plupart des personnalisations de widgets peuvent être mises en œuvre à l'aide d'éditeurs "glisser-déposer" ; les feuilles de style CSS ne sont nécessaires que pour les cas d'utilisation avancés.
La mise en œuvre d'une feuille de style CSS personnalisée pour vos widgets de commentaires implique de modifier le code de votre site. Cette solution n'est recommandée qu'aux spécialistes du marketing techniquement compétents ou à ceux qui ont accès à un développeur. Bien que notre produit prenne en charge les feuilles de style CSS personnalisées, notre équipe d'assistance ne peut pas vous aider à personnaliser vos widgets au-delà des conseils généraux donnés dans cette documentation. Pour maintenir la sécurité de vos données, l'équipe d'assistance de Klaviyo n'est pas en mesure d'ouvrir vos fichiers HTML.
A propos des CSS personnalisés pour Klaviyo Reviews
Klaviyo Reviews fournit une large gamme de sélecteurs de classe CSS, qui peuvent être utilisés pour écrire des CSS personnalisés 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 des feuilles de style CSS personnaliséesComment appliquer des feuilles de style CSS personnalisées
Vous pouvez appliquer un CSS personnalisé à Klaviyo Reviews de la même manière que vous le feriez pour n'importe quel autre CSS personnalisé :
- Ajoutez une feuille de style CSS personnalisée à la feuille de style CSS principale de votre site.
- Insérez les balises <style> dans le code d'une page unique pour appliquer le CSS à cette page.
- Incorporez le CSS dans un seul élément HTML (par exemple, un div) pour l'appliquer uniquement à cet élément.
- Ajoutez une feuille de style CSS personnalisée à l'ensemble de votre site dans Theme Settings > Custom CSS (Shopify) ou Styles > CSS (WooCommerce).
Nous nous concentrerons ici sur la dernière option, car elle 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 de commerce électronique. Cela signifie qu'il est important d'utiliser des sélecteurs précis, afin que votre CSS personnalisé ne soit pas écrasé par les valeurs par défaut.
Appliquer un CSS personnalisé pour ShopifyAppliquer un CSS personnalisé pour Shopify
- Dans l'interface d'administration de Shopify, accédez à Online Store > Themes.
- 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 pendant qu'il est en ligne, car ces modifications risquent d'apparaître aux visiteurs du site avant que vous ne puissiez les examiner et résoudre les problèmes éventuels. - Cliquez sur Personnaliser à côté de la nouvelle copie de votre thème.
- Cliquez sur l'icône Paramètres du thème.
- Sélectionnez Custom CSS dans le menu.
- Ajoutez votre CSS personnalisé.
Des exemples d'extraits CSS à copier sont disponibles dans la section ci-dessous. - Naviguez jusqu'à une page de l'éditeur où apparaissent vos widgets d'évaluation (par exemple, produit par défaut).
- Vérifiez les modifications, puis cliquez sur Publier.
Ajouter un CSS personnalisé pour WooCommerce
Vous devez utiliser un sélecteur d'identifiant de page,.page-id-YOUR_PAGE_ID pour appliquer une feuille de style CSS à une ou plusieurs pages spécifiques. Apprenez à trouver l'identifiant d'une page.
- Dans l'interface d'administration de Wordpress, accédez à Apparence > Editor.
- Sélectionnez les styles.
- Ouvrez le menu à trois points(Plus).
- Sélectionnez Additional CSS.
- Ajoutez votre CSS personnalisé.
Des exemples d'extraits CSS à copier sont disponibles dans la section ci-dessous. - Vérifiez les modifications, puis cliquez sur Publier.
Cas d'utilisation de CSS personnalisés
Les extraits CSS ci-dessous couvrent quelques cas d'utilisation de base. Une personnalisation plus poussée nécessite l'aide d'un développeur. Si vous n'avez pas de développeur dans votre équipe et que vous n'êtes pas à l'aise pour écrire du code vous-même, envisagez de demander de l'aide à un partenaire Klaviyo.
Apparition de l'icône de classement (étoile)
Remplacez les URL ci-dessous par des URL d'images représentant respectivement l'étoile complète, l'étoile partielle et l'étoile vide de votre choix. Notez que pour les boutiques Shopify, vos URL doivent faire référence à des images stockées dans Shopify, en raison de leurs règles.
#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;
}
}
Taille de la vignette de l'image
Définissez une largeur spécifique pour les images soumises par les clients dans votre liste de commentaires.
#klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Couleurs et styles des boutons
Appliquez des styles au bouton Rédiger un avis.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Appliquez des styles au bouton Poser une question.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}