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

📘

We suggest that you 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:

CSS

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

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

• 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

• How to customize review widgets
• Use advanced CSS to style Klaviyo Reviews widgets
• How to use custom CSS to style Klaviyo Reviews widgets