HomeGuidesAPI Reference
ChangelogHelp CenterCommunityContact Us
Guides

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