VTEX Developer Portal

All ContributorsAll Contributors

The PowerReviews app provides a way to bring your PowerReviews content into your VTEX store. The app also implements the PowerReviews Checkout Beacon during checkout, sending customer purchase data to the PowerReviews platform.

Configuration

Before you can start using the app, you will need an existing PowerReviews account and API key.

Step 1 - Defining the app settings

In your VTEX account's admin, perform the following actions:

  1. Access the Apps section and then My Apps.
  2. Select the PowerReviews app box.
  3. Complete the following required fields in the Settings section:
  • App Key - The API Key provided by PowerReviews.
  • Merchant ID - Your unique PowerReviews merchant ID.
  • Merchant Group ID - Your PowerReviews merchant group ID.
  • API Unique Id - The product field used as the identifier (or pageId) on PowerReviews.

Optionally, the Use Legacy Review Display Component checkbox allows you to use the PowerReviews Review Display component instead of the VTEX Reviews component.

If needed, provide a URL path to a CSS stylesheet to override the styles of the PowerReviews Write-a-Review, Questions & Answers, or Review Display components.

Step 2 - Update your store theme

  1. Add the powerreviews app as a peerDependency in your theme's manifest.json file:
 "peerDependencies": {
+  "vtex.powerreviews": "2.x"
 }
  1. If not already present, add the following to your theme's dependencies:
 "vtex.product-review-interfaces": "1.x",
 "vtex.product-summary-context": "0.x",
 "vtex.product-context": "0.x",
 "vtex.store-header": "2.x",
 "vtex.pixel-interfaces": "1.x",
 "vtex.store-image": "0.x",

Step 3 - Defining the app's blocks

The PowerReviews app integrates with the following store framework blocks.

Block nameDescription
product-reviewsDisplay a paginated list of reviews for the product being viewed. This must be placed on the store.product page.
product-rating-summaryDisplay the average rating for the product being viewed. This must be placed on the store.product page.
product-rating-inlineDisplay the average rating for the product being viewed, intended for use on the product shelf.
product-review-formDisplay the PowerReviews Write-a-Review form component. This must be placed on the product-review-form page.
product-questions-and-answersDisplay the PowerReviews Questions & Answers component for the product being viewed.

An example of the blocks above in use:

 "store.product": {
   "blocks": [
     "product-rating-summary",
     "product-reviews",
     "product-questions-and-answers"
   ]
 }
 "store.product-review-form": {
   "blocks": [
     "product-review-form"
   ]
 }

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

Updated 2 months ago


PowerReviews


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.