Klaviyo Reviews CSS class reference
You can use our supported Klaviyo Reviews CSS classes to customize your Klaviyo reviews widgets to be consistent with your brand. Note, for basic customization, you can use drag and drop editors. For advanced customization, you can check out the advanced Klaviyo Reviews CSS guide.
Product reviews widget
The CSS classes listed below are for styling your product reviews widget (Wrapper: #klaviyo-product-reviews-wrapper
).
Note that you'll want to use a widget's wrapper as an additional selector, in addition to any of its available selectors, to ensure that your custom CSS overrides any default styling. For styling the product reviews widget, your CSS code should look like the following example:
#klaviyo-product-reviews-wrapper { .kl_reviews__button { background-color: pink; } }
Custom questions
The following classes are for customizing the display of custom questions you can request from customers about your product:
-
kl_reviews__summary__custom_question__question--range
Custom question requesting for a range response.
-
kl_reviews__summary__custom_question__answer--range
Range indicators for a custom question requesting for a range response.
-
kl_reviews__summary__custom_question__question--text
Custom question with response(s) in text.
-
kl_reviews__summary__custom_question__answer--text
Response in text to a custom question.
Navigation
Use the following classes to enhance your target customers’ navigation experience with your reviews list:
-
kl_reviews__search
Search bar for review lookups.
- Use
#klaviyo-product-reviews-wrapper .kl_reviews__search ::placeholder
to select the text within the search field.
- Use
-
kl_reviews__filters__custom_question_label
Filter option label for reviews.
-
kl_reviews__filters__pill
Filter option pill for reviews.
-
kl_reviews__filters__group
Filter options for reviews.
-
kl_reviews__list__tab
Reviews and Questions tabs above the reviews list.
-
kl_reviews__button
Button for showing more reviews.
Reviews list
Customize the look and feel of your reviews as they appear in your reviews list with the following classes:
-
kl_reviews__review__timestamp
Timestamp of a review’s submission.
-
kl_reviews__review__title
The title of a review.
-
kl_reviews__review__response_title
The text above your (the brand’s) response to a review indicating when the brand replied.
-
kl_reviews__review__image
Image provided from a review in the reviews list.
-
kl_reviews__review__author
The review author’s username.
-
kl_reviews__review__content
The review's content (e.g., "This is an excellent product!").
-
kl_reviews__custom_question__question--text
The text of a custom question with text answer options (e.g., for the custom question “Would you recommend this product to a friend?” with the answer options “Yes” and “No”, this selector refers to the text “Would you recommend this product to a friend?”)
-
kl_reviews__custom_question__answer--text
Answer to a custom question in text.
-
kl_reviews__custom_question__question--range
The text of a custom question with a range of answer options (e.g., for the custom question “How likely are you to recommend this product to a friend?” with a range selector from “Very unlikely” to “Very likely”, this selector refers to the text “How likely are you to recommend this product to a friend?”)
-
kl_reviews__custom_question__answer--range
Answer to a custom question with a range response.
Reviews summary
The following classes are for customizing the style of your reviews summary, which displays your product’s ratings:
-
kl_reviews__summary__image_photo
Image gallery of a product.
-
kl_reviews__summary__average_value
The number indicating a product’s average rating out of 5.
-
kl_reviews__summary__average_denominator
Denominator for the average rating of a product (i.e., “/5” in the review summary”).
-
kl_reviews__summary__stars__count
Total number of customer ratings for a product.
-
kl_reviews__histogram__row
Row of a reviews histogram.
-
kl_reviews__histogram__value
The value of a reviews histogram.
-
kl_reviews__histogram__rating
The rating of a reviews histogram.
-
kl_reviews__histogram__bar--background
Background of a reviews histogram bar.
-
kl_reviews__histogram__bar--foreground
Foreground of a reviews histogram bar.
Stars
Customize the appearance of stars shown in your products review widget with the following classes:
-
kl_reviews__full_star
The icon for full (i.e., filled) stars.
-
kl_reviews__partial_star
The icon for partially filled stars (e.g., if a product’s rating is 4.5 stars, the fifth star will be one-half filled; this is a partial star).
-
kl_reviews__empty_star
The icon for empty (i.e., unfilled) stars.
-
kl_reviews__star
Star review type.
- If you’ve selected the “star” star type, each star will have this selector.
- If you’ve selected the “heart” star type, each star will have this selector.
-
kl_reviews__circle
Circle review type.
- If you’ve selected the “circle” star type, each star will have this selector.
Customization variables
Use the customization variables below for styling your product reviews widget. These are custom properties can set within the product reviews widget wrapper (#klaviyo-product-reviews-wrapper)
to style buttons, filters, stars, and more.
Buttons
--kl-reviews-reviews-button-color: #1C65AD;
--kl-reviews-reviews-button-corner-radius: 8px;
--kl-reviews-reviews-button-hover-color: #606A72;
--kl-reviews-reviews-button-font-font-family: inherit;
--kl-reviews-reviews-button-font-font-weight: 400;
--kl-reviews-reviews-button-font-color: #202223;
Colors
--kl-reviews-reviews-primary-background-color: unset;
--kl-reviews-reviews-secondary-background-color: #e9e9eb;
--kl-reviews-reviews-accent-color: #1C65AD;
Filters
--kl-reviews-reviews-filter-style-width: 1px;
--kl-reviews-reviews-filter-color: #1C65AD;
--kl-reviews-reviews-filter-corner-radius: 8px;
--kl-reviews-reviews-filter-background-color: white;
Fonts
--kl-reviews-reviews-primary-font-font-family: inherit;
--kl-reviews-reviews-primary-font-font-weight: 400;
--kl-reviews-reviews-primary-font-color: #202223;
--kl-reviews-reviews-secondary-font-font-family: inherit;
--kl-reviews-reviews-secondary-font-font-weight: 400;
--kl-reviews-reviews-secondary-font-color: #606A72;
Images
--kl-reviews-reviews-summary-images-corner-radius: 0px;
--kl-reviews-reviews-review-images-corner-radius: 0px;
--kl-reviews-reviews-review-images-size: 120px;
Shapes
--kl-reviews-reviews-corner-radius: 8px;
Stars
--kl-reviews-reviews-star-color: #F8BE00;
--kl-reviews-reviews-empty-star-color: #E5E5E5;
--kl-reviews-reviews-star-spacing: 0px;
All reviews widget
The CSS classes listed below are for styling your all reviews widget (Wrapper: #klaviyo-all-reviews-wrapper
).
Navigation
Use the following classes to enhance your target customers’ navigation experience:
-
kl_reviews__search
Search bar for review lookups.
- Use
#klaviyo-all-reviews-wrapper .kl_reviews__search ::placeholder
to select the text within the search field.
- Use
-
kl_reviews__filters__pill
Filter option pill for reviews.
-
kl_reviews__filters__group
Filter options for reviews.
-
kl_reviews__button
Button for showing more reviews.
Reviews list
Customize the look and feel of your reviews as they appear in your reviews list with the following classes:
-
kl_reviews__review__product_card
The containing element for the product card.
-
kl_reviews__review__product_card__container
The clickable container for the product card.
-
kl_reviews__review__product_card__details
The containing element for the product card text.
-
kl_reviews__review__product_card__details__name
The name of the product.
-
kl_reviews__review__product_card__details__review_info
Star rating and review count.
-
kl_reviews__review__product_card__carat
The carat icon at the right side of the product card.
-
kl_reviews__review__timestamp
Timestamp of a review’s submission.
-
kl_reviews__review__title
The title of a review.
-
kl_reviews__review__response_title
The text above your (the brand’s) response to a review indicating when the brand replied.
-
kl_reviews__review__image
Image provided from a review in the reviews list.
-
kl_reviews__review__author
The review author’s username.
-
kl_reviews__review__content
The review's content (e.g., "This is an excellent product!").
Reviews summary
The following classes are for customizing the style of your reviews summary, which displays your product’s ratings:
-
kl_reviews__summary__image_photo
Image gallery of a product.
-
kl_reviews__summary__average_value
The number indicating a product’s average rating out of 5.
-
kl_reviews__summary__average_denominator
Denominator for the average rating of a product (i.e., “/5” in the review summary”).
-
kl_reviews__summary__stars__count
Total number of customer ratings for a product.
Stars
Customize the appearance of stars shown in your all reviews widget with the following classes:
-
kl_reviews__full_star
The icon for full (i.e., filled) stars.
-
kl_reviews__partial_star
The icon for partially filled stars (e.g., if a product’s rating is 4.5 stars, the fifth star will be one-half filled; this is a partial star).
-
kl_reviews__empty_star
The icon for empty (i.e., unfilled) stars.
-
kl_reviews__star
Star review type.
- If you’ve selected the “star” star type, each star will have this selector.
- If you’ve selected the “heart” star type, each star will have this selector.
-
kl_reviews__circle
Circle review type.
- If you’ve selected the “circle” star type, each star will have this selector.
Customization variables
Use the customization variables below for styling your all reviews widget. These are custom properties can set within the all reviews widget wrapper (#klaviyo-all-reviews-wrapper)
to style buttons, filters, stars, and more.
Buttons
--kl-reviews-reviews-button-color: #1C65AD;
--kl-reviews-reviews-button-corner-radius: 8px;
--kl-reviews-reviews-button-hover-color: #606A72;
--kl-reviews-reviews-button-font-font-family: inherit;
--kl-reviews-reviews-button-font-font-weight: 400;
--kl-reviews-reviews-button-font-color: #202223;
Colors
--kl-reviews-reviews-primary-background-color: unset;
--kl-reviews-reviews-secondary-background-color: #e9e9eb;
--kl-reviews-reviews-accent-color: #1C65AD;
Filters
--kl-reviews-reviews-filter-style-width: 1px;
--kl-reviews-reviews-filter-color: #1C65AD;
--kl-reviews-reviews-filter-corner-radius: 8px;
--kl-reviews-reviews-filter-background-color: white;
Fonts
--kl-reviews-reviews-primary-font-font-family: inherit;
--kl-reviews-reviews-primary-font-font-weight: 400;
--kl-reviews-reviews-primary-font-color: #202223;
--kl-reviews-reviews-secondary-font-font-family: inherit;
--kl-reviews-reviews-secondary-font-font-weight: 400;
--kl-reviews-reviews-secondary-font-color: #606A72;
Images
--kl-reviews-reviews-summary-images-corner-radius: 0px;
--kl-reviews-reviews-review-images-corner-radius: 0px;
--kl-reviews-reviews-review-images-size: 120px;
Shapes
--kl-reviews-reviews-corner-radius: 8px;
Stars
--kl-reviews-reviews-star-color: #F8BE00;
--kl-reviews-reviews-empty-star-color: #E5E5E5;
--kl-reviews-reviews-star-spacing: 0px;
Featured review carousel widget
Use the CSS classes below to style your featured review carousel widget (Wrapper: #klaviyo-reviews-carousel-wrapper
). The following example shows how to use the featured review carousel widget wrapper selector for styling:
#klaviyo-reviews-carousel-wrapper {
--kl-reviews-featured-featured-image-size: 180px;
}
-
kl_reviews__carousel__slide
Featured product review tile.
-
kl_reviews__carousel__image
Image on a featured product review.
-
kl_reviews__carousel__timestamp
Timestamp of a featured product review.
-
kl_reviews__carousel__content_title
Title of a featured product review.
-
kl_reviews__carousel__content_body
Body text of a featured product review.
-
kl_reviews__carousel__author
Author of a featured product review.
Customization variables
Use the customization variables below for styling your featured reviews carousel widget. These are custom properties you can set within the featured reviews carousel widget wrapper (#klaviyo-reviews-carousel-wrapper)
to style fonts, images, stars, and more.
Colors
--kl-reviews-featured-primary-background-color: unset;
--kl-reviews-featured-secondary-background-color: #e9e9eb;
Fonts
--kl-reviews-featured-primary-font-font-family: inherit;
--kl-reviews-featured-primary-font-font-weight: 400;
--kl-reviews-featured-primary-font-color: #202223;
--kl-reviews-featured-secondary-font-font-family: inherit;
--kl-reviews-featured-secondary-font-font-weight: 400;
--kl-reviews-featured-secondary-font-color: #606A72;
Images
--kl-reviews-featured-featured-image-size: 180px;
Shapes
--kl-reviews-featured-corner-radius: 8px;
Stars
--kl-reviews-featured-star-color: #F8BE00;
--kl-reviews-featured-empty-star-color: #E5E5E5;
--kl-reviews-featured-star-spacing: 0px;
Text
--kl-reviews-featured-featured-text-limit: 3;
Star rating widget
Use the following CSS class for styling your star rating widget (Wrapper: .kl_reviews__star_rating_widget.kl_reviews__star_rating_widget.kl_reviews__star_rating_widget
):
-
kl_reviews__star_rating_widget__label
Text on a star rating for a product (i.e., “# ratings”).
The following example shows how to use the star rating widget wrapper selector for styling:
.kl_reviews__star_rating_widget.kl_reviews__star_rating_widget.kl_reviews__star_rating_widget {
--kl-reviews-stars-primary-font-color: red;
}
Customization variables
Use the customization variables below for styling your star rating widget. These are custom properties you can set within the star rating widget wrapper for styling including colors, fonts, and spacing.
Colors
--kl-reviews-stars-star-color: #F8BE00;
--kl-reviews-stars-empty-star-color: #E5E5E5;
Fonts
--kl-reviews-stars-primary-font-font-family: inherit;
--kl-reviews-stars-primary-font-font-weight: 400;
--kl-reviews-stars-primary-font-color: #202223;
Widget spacing
--kl-reviews-stars-widget-margin-top: 0px;
--kl-reviews-stars-widget-margin-right: 0px;
--kl-reviews-stars-widget-margin-bottom: 0px;
--kl-reviews-stars-widget-margin-left: 0px;
Star spacing
--kl-reviews-stars-star-spacing: 0px;
Additional resources
Updated 8 months ago