Adding the Reviews Badge to Your Site
Adding the Reviews Badge to Your Site
Article Summary
Share feedback
Thanks for sharing your feedback!
The Reviews badge is a great way to show off your reviews and create trust with your visitors. Badges are dynamic and will update with your store's total number of reviews as well as the average review score. The badge design can also be added to product pages to dynamically reflect the number of published reviews that have been generated for that particular product.
In this article, you will learn how the Reviews badge works, how to add it to your store, and how to set it up as an anchor.
How it works
Please note:
Enable the Reviews tab to allow the Product Reviews badge to become clickable. Clicking the badge will display product reviews for the relevant product.
When a shopper clicks the badge, the Reviews tab opens up on the screen. This functionality helps increase engagement with your site which leads to more page views.
There are two ways in which you can add the badge to your site:
- Homepage - If you add the badge to your homepage or any other page that isn’t a product page, the badge will show the total number of reviews you’ve collected so far.
- Product pages - If you add the badge to your product pages, the badge will show the total number of reviews collected for that product. This includes grouped and syndicated reviews.
Badge display
- The badge will be displayed in the language you choose on the Email Settings page.
- The number displayed within the badge supports between one and four digits.
In cases where there are more than 999 reviews, the number within the badge will include a comma and display 1,000. - Products that have more than 9,999 reviews will append a 'K' and appear as 12.3K, (not 12,300)
- Products that have more than 999,999 reviews will append an 'M' to the design and appear as 1.23M, (not 1,230,000).
- Reviews for products on your blocklist will not be added to the Reviews Badge count.
Feature limitations
- The badge only appears when you have at least 20 published reviews.
- To allow the Reviews badge to become clickable, enable the Reviews tab. Clicking the badge will display the Reviews tab.
- Reviews for products on your blocklist will not be added to the Reviews badge count.
- The Reviews badge is not clickable on a mobile display.
Adding the badge to your site
To add the Reviews badge to your site, copy the correct code for the relevant eCommerce platform and paste it on your homepage, product pages, or any other page.
Tip:
We recommend embedding the badge in the footer of your site so that it will appear on all your pages.
In order to display Product Reviews Badges on your product pages, you must embed a badge code snippet on your product page template. The Product Reviews Badge includes a product parameter that will automatically retrieve the product ID from the product page (per platform).
Add the relevant code to the desired location on your product page templates.
Shopify
To add the badge to your homepage:
Copy the following code:<div id="y-badges" class="yotpo yotpo-badge badge-init"> </div>
- Go to your Shopify Themes menu.
- Click Actions > Edit Code.
- Under Layout, locate the file theme.liquid or theme-template.liquid.
- Paste the code wherever you want the badge to appear.
- Click Save.
To add the badge to your product pages:Add the following code to the desired location on your product page templates<div id="y-badges" class="yotpo badge badge-init" data-product-id="{{ product.id }}"></div>B
BigCommerce - Stencil
To add the badge to your homepage and product pages:
Copy the following code:
<script type="text/javascript">//<![CDATA[ var div = document.createElement("div"); div.setAttribute('id', 'y-badges'); div.setAttribute('class', 'yotpo yotpo-badge badge-init'); div.setAttribute('data-product-id',"{{product.id}}"); document.querySelectorAll('.footer-info')[0].appendChild(div) //]]> </script>
- In Your BigCommerce admin, go to Storefront.
- Click on Script Manager.
- Click on the Create a Script button.
- Choose the following options:
- Location on Page - Footer
- Select pages where the script will be added - All pages (recommended)
- Script Category - Essential (recommended)
- Script Type - Script
- Paste the code you've copied.
- Click Save.
BigCommerce - Blueprint
To add the badge to your homepage and product pages:
- Copy the following code
<divid="y-badges" class="yotpo yotpo-badge badge-init data-product-id="%%GLOBAL_ProductId%%"> </div> - In your BigCommerce Admin, paste the code into footer.html:bad.
- Click Save.
You should now be able to see the Yotpo Badge at the footer of your pages.Feel free to move the code within the footer until you find the best place for it on your site.
Adobe Commerce 2
Add the following code to the desired location on your homepage and/or product pages:
<div id="y-badges" class="yotpo badge badge-init" data-product-id="<?php echo $block->getProduct()->getId() ?>"></div>
Adobe Commerce 1
Add the following code to the desired location on your homepage and/or product pages:
<div id="y-badges" class="yotpo badge badge-init" data-product-id="<?php echo $this->getProductId() ?>"></div>
WooCommerce
Add the following code to the desired location on your homepage and/or product pages:
<div id="y-badges" class="yotpo yotpo-badge badge-init" data-product-id= "<?php echo $product->id;?>" > </div>
Custom platform
Add the following code to the desired location on your homepage and/or product pages:
<div id="y-badges" class="yotpo badge badge-init" data-product-id="SKU/Product_ID"></div>
Setting up the Yotpo Badge as an anchor
By default, if the Reviews tab is enabled, clicking on the Yotpo badge links to the same reviews modal as clicking on the tab. If the Reviews tab is disabled, then this functionality is also disabled and the badge does not link anywhere.
If you want to turn the Yotpo badge into an anchor, you must first wrap it around an anchor tag with the href property set to the URL of your choice.
The following example is of the Yotpo Badge code wrapped by an anchor tag with the href property set to http://www.yotpo.com/
<a href="http://www.yotpo.com/">
<div id="y-badges" class="yotpo yotpo-badge badge-init"> </div>
</a>Clicking on the badge in this example will redirect the user to http://www.yotpo.com/.
Please note:
- This section explains how to customize a Yotpo feature using external code.
- The code is generic and provided as is. Implementation or modification of this code is not supported by Yotpo.
- We recommend using the services of a developer for the purpose of integrating this customization into your website.
Was this article helpful?
