Before we dive into the details of how you can show our review widgets on your site using your Products IDs, we like to cover the overall concept to make the process easier to follow.
Your e-commerce store has two main pages:
- Category page that lists your products
- Product page that shows the individual product
These pages are usually generated from two files, as different ecommerce platforms have different standards we'll call ours category.template and product.template. Within this files you'll have a variable that represents an individual Product ID, something like {{product.id}} (again the syntax will be different depending on your platform). You can use this variable to pass your Product IDs to our widgets.
Once you have linked your Product IDs to ProductReview listings, the reviews for those listings will be shown on your pages.
Ok let's go through the process of doing this within our platform.
Step 1:
Go to the Brand Management Platform.
Step 2:
Link Product IDs from your site to ProductReview listings on the Catalog page. External Entry IDs is what we call your Product IDs (Variant ID, SKU...) as ecommerce platforms have different names for this variable.
More detailed instructions on how to do this can be read here.
Step 3:
Navigate to the widgets and/or rating badges page and select the widget that you would like to feature on your site.
Step 4:
Go to the Installation section and in Step 2, click ‘Use my own identifier’.
Step 5:
You need to copy and paste our widget code into your website's templates. Most ecommerce platforms will have a "layout file" that contains <head>...</head> HTML. Best practice is to copy the Installation Step 1 code there. This will only need to be done once because this code will appear all other templates.
Here is how it looks on a Shopify test site:
Step 6:
Copy and paste Installation Step 2 code into your "product file". Make sure to put your Product ID variable instead of YOUR IDENTIFIER text in the widget code.
<div id="pr-reviews-comprehensive-widget"></div>
<script>
window.__productReviewCallbackQueue = window.__productReviewCallbackQueue || [];
window.__productReviewCallbackQueue.push(function(ProductReview) {
ProductReview.use('comprehensive-widget', {
"identificationDetails": {
"type": "single",
"strategy": "from-brand-external-entry-id",
"identifier": "YOUR IDENTIFIER"},
"container": "#pr-reviews-comprehensive-widget"
});
});
</script>
Here is how it looks on a Shopify test site:
We recommend using our Inline rating widget, which just shows the average star rating, for your category pages. On the product page we recommend using both Inline rating widget next to the product title and the Comprehensive widget as its own dedicated section somewhere in the middle of the page.