BigCommerce - Blueprint: Installing the Yotpo Star Rating on Blueprint

This article explains how to install Yotpo Star Ratings on various pages of your BigCommerce store.

Installing Star Ratings on product pages

To install Star Ratings on product pages:

1. Log in to your Bigcommerce Admin page.
2. Click Settings.
3. Click Design in the Store Setup column.
4. Click Edit HTML/CSS.
5. Click ProductDetails.html under Other Template Files>Panels.
6. Add the following code after the following line <h1 itemprop="name">%%GLOBAL_ProductName%%</h1>:
   MarkupMarkup

   <div class="yotpo bottomLine"
   data-product-id="%%GLOBAL_ProductId%%"
   data-url="%%GLOBAL_ProductLink%%">
   <div>

7. Click Save at the top left of the page.

Installing Star Ratings on category pages

To install Star Ratings on category pages:

1. Log in to your Bigcommerce Admin page.
2. Click Settings.
3. Click Design in the Store Setup column.
4. Click Edit HTML/CSS.
5. Click CategoryProductsItem.html under Other Template Files>Snippets.
6. Add the following code where you want to the Star Ratings to appear (the exact location depends on your store):
   MarkupMarkup

   <div class="yotpo bottomLine"
   data-product-id="%%GLOBAL_ProductId%%"
   data-url="%%GLOBAL_ProductLink%%">
   div>

   Please note:

   If you have a custom theme, and the above file isn't available or doesn't work, add this code to any other similar files of the ***ProductsItem.html format.

   
   

7. Click Save at the top left of the page.

Installing Star Ratings on the homepage

This is relevant for "New" and "Featured" products.

To install Star Ratings on your store's homepage:

1. Log into your Bigcommerce Admin page.
2. Click Settings.
3. Click Design in the Store Setup column.
4. Click Edit HTML/CSS.
5. Click HomeFeaturedProductsItem.html under Other Template Files>Snippets.
6. Add the following code where you want to the Star Ratings to appear (the exact location depends on your store):

<div class="yotpo bottomLine"
data-product-id="%%GLOBAL_ProductId%%"
data-url="%%GLOBAL_ProductLink%%">
</div>

7. Click Save at the top left of the page.
8. Click HomeNewProductsItem.html under Other Template Files>Snippets.
9. Add the following code where you want to the Star Ratings to appear (the exact location depends on your store):

<div class="yotpo bottomLine"
data-product-id="%%GLOBAL_ProductId%%"
data-url="%%GLOBAL_ProductLink%%">
</div>

10. Click Save at the top left of the page.

Installing Star Ratings on the BigCommerce Quickview

To install Star Ratings on BigCommerce Quickview:

1. Log in to your Bigcommerce Admin page.
2. Click Settings.
3. Click Design in the Store Setup column.
4. Click Edit HTML/CSS.
5. Click QuickViewContent.html under Other Template Files>Panels.
6. Add the following code above the following line: %%SNIPPET_ProductFieldsList%%:
   MarkupMarkup

   <script type="text/javascript">
   (function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/###APP_KEY###/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
   script>
   <div class="yotpo bottomLine" data-product-id="%%GLOBAL_ProductId%%" data-url="%%GLOBAL_ProductLink%%">
   div>

   Please note:

   Replace the ###APP_KEY### value with your API Key

   
   

7. Click Save at the top left of the page.