Pixel Apps
Official extension
Version: 2.4.0
Latest version: 2.4.0



This is a Bazaarvoice first party integration app that is responsible for showing the components related to Bazaarvoice Reviews in your store.

:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
[1.x]Current Release2019-06-142.x

See our LTS policy for more information.

Table of Contents


To use the bazaarvoice components add the product reviews blocks into your theme as you would with any other block.


You can set some options of the Reviews component in the CMS:

Prop nameTypeDescriptionDefault value
Quantity of reviews per pagenumberthe number of reviews that a review page will have10
Quantity of reviews on the first pagenumberthe number of reviews that the first review page will haveSame as the value above

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file and add vtex.bazaarvoice to your theme peerDependencies.

  1. Add the styles builder to your manifest.json:

"builders": {
"styles": "1.x"

  1. Add vtex.bazaarvoice to peerDependencies in your manifest.json:

"peerDependencies": {
"vtex.bazaarvoice": "1.x"

  1. Create a file called vtex.bazaarvoice.css inside the styles/css folder. Add your custom styles:

.container {
margin-top: 10px;

CSS namespaces

Below, we describe the namespaces that are defined in the bazaarvoice.

Token nameDescriptionComponent Source
reviewsThe reviews componentNoReviews, Reviews
reviewsTitleThe reviews titleNoReviews, Reviews
ratingSummaryRating SummaryRatingSummary
ratingSummaryContainerMain container of the Rating SummaryRatingSummary
ratingSummaryStarsStars of the Rating SummaryRatingSummary
ratingSummaryStars--loadingStyle of the Stars of the Rating Summary when they are loadingRatingSummary
ratingSummaryWrite'Write Review' link next to the stars of the Summary ContainerRatingSummary
ratingInlineRating in LineRatingInLine
reviewFormReview FormReviewForm
ratingStarsContainer of the rating starsStars
ratingStarsInactiveStyle of the Stars when they are inactiveStars
ratingStarsActiveStyle of the Stars when they are activeStars
histogramStarContainerHistogram Star ContainerHistogram
histogramOuterContainerHistogram most external containerHistogram
histogramContainerHistogram main containerHistogram
histogramLineHistogram line containing the data of a certain amount of starHistogram
histogramStarHistogram StarHistogram
histogramBarHistogram BarHistogram
histogramBarValueHistogram Bar fillingHistogram
histogramCountThe count at the side of the histogram barHistogram
secondaryHistogramLineHistogram line containing the data of the secondary ratingsHistogram
secondaryHistogramLabelThe label of a secondary histogram lineHistogram
secondaryHistogramBarSecondary ratings' histogram barHistogram
secondaryHistogramBarValueSecondary ratings' histogram bar fillingHistogram
secondaryHistogramCountSecondary ratings' histogram countHistogram
reviewHistogramBarReview Histogram BarReview
reviewHistogramBarValueReview Histogram Bar fillingReview
histogramDivisionsHistogram division that separates it in five sectionsHistogramBar
reviewRatingReview RatingReview
reviewTitleReview TitleReview
reviewSubmittedFieldReview 'submitted' fieldReview
reviewByFieldReview 'by' fieldReview
reviewFromFieldReview 'from' fieldReview
reviewTextReview textReview
reviewImagesContainerReview image containerReview
reviewImageReview imageReview
reviewsContainerReviews containerReviewsContainer
reviewsContainerHeadReviews Container headReviewsContainer
reviewsContainerTitleReviews container titleReviewsContainer
reviewsContainerDropdownsReviews container dropdown buttonsReviewsContainer
reviewsContainerSortDropdownReviews container sort buttonReviewsContainer
reviewsContainerStarsDropdownReviews container stars buttonReviewsContainer
reviewsContainerWriteButtonReviews container write buttonReviewsContainer
noReviewsContainerContainer that appears when there are no reviewsNoReviews
writeReviewButtonWrite review buttonReviewsContainer, NoReviews
activeStarActive starStars
activeStarContainerActive star containerStars
inactiveStarInactive starStars
inactiveStarContainerInactive star containerStars


You can check if others are experiencing similar issues here. Also, feel free to open issues or contribute with a pull request.


Take a look at these guidelines: how to contribute.


To execute our tests go to react/ folder and run yarn test

Travis CI

{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":""}}

See also
VTEX App Store