Skip to content

Product Review

Styles for a product review used in product_review module.

Structurally .product-review element contains two elements:

  • .product-review__rate-count
  • .product-review__description

LESS

You can modify any product review less variable in your User Less section to change product review styles.

Product Review variables

Variables used to style a product review.

@productReviewRateCountFontSize: @fontSizeInPxXS;

@productReviewDescriptionFontSize: @fontSizeInPxXS;
@productReviewDescriptionLineHeight: @lineHeightInPxXS;
@productReviewDescriptionColor: @globalFontColorSecondary;
@productReviewDescriptionMarginTop: @globalSpacing * 3;

If you want to change product review styles, you can just change the variables. To change default font-size of the product review rate count just modify @productReviewRateCountFontSize variable.

@productReviewRateCountFontSize: 20;

Product Review styles

Standard product review styles.

.product-review {
    &__rate-count {
        .font-size(@productReviewRateCountFontSize);
    }

    &__description {
        .font-size(@productReviewDescriptionFontSize);
        .line-height(@productReviewDescriptionLineHeight);
        color: @productReviewDescriptionColor;
        margin-top: @productReviewDescriptionMarginTop;
    }
}

Modules reference