BigCommerce - Blueprint: Installing Yotpo on Blueprint

In this article, you'll learn how to integrate the Yotpo app into your BigCommerce store. 

The installation process

Installing the Yotpo Reviews App

1. Access your BigCommerce admin.
2. Click on App.
3. Click on Marketplace.
4. Search for Yotpo in the search box.
5. Click on the Yotpo Reviews app.
6. Click on Install.
7. Click Confirm.

Installing the Yotpo JavaScript

1. Access your BigCommerce admin.
2. Click on Storefront Design.
3. Click on My Themes.
4. Click on Edit HTML/CSS.
5. Click Other Template Files.
6. Access the file HTMLHead.html which is located under Panels.
7. Add the following code after the last line of the file, just above </head> section:

<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/###YOUR-APP_KEY###/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>

8. Click Save.

Installing Reviews Widget

1. Access your BigCommerce admin.
2. Click on Storefront Design.
3. Click on My Themes.
4. Click on Edit HTML/CSS.
5. Click Other Template Files.
6. Access the file ProductDetails.html which is located under Panels.
7. Add the following code after the last line of the file:

<div class="yotpo yotpo-main-widget" 
data-product-id="%%GLOBAL_ProductId%%"
data-price="%%GLOBAL_RawProductPrice%%"
data-currency="%%GLOBAL_CurrentCurrencyCode%%" 
data-name="%%GLOBAL_ProductName%%" 
data-url=document.URL 
data-image-url="%%GLOBAL_ThumbImageURL%%" 
data-description=""> 
</div>

8. Click Save.

Installing Star Rating on product pages

This step is optional.

1. Access your BigCommerce admin.
2. Click on Storefront Design.
3. Click on My Themes.
4. Click on Edit HTML/CSS.
5. Click Other Template Files.
6. Access the file ProductDetails.html which is located under Panels.
7. Add the following code after this line:
   <h1 itemprop="name">%%GLOBAL_ProductName%%</h1>:

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

8. Click Save.

Installing conversion tracking code

1. Please copy the following code:

   <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><script>yotpoTrackConversionData = {orderId: "%%ORDER_ID%%", orderAmount: "%%ORDER_AMOUNT%%", orderCurrency: "USD"}</script><noscript><img src="//api.yotpo.com/conversion_tracking.gif?app_key={{APP_KEY}}&order_id=%%ORDER_ID%%&order_amount=%%ORDER_AMOUNT%%&order_currency=USD" width="1" height="1"></noscript>

   Important:

   BigCommerce only allows USD currency in the Conversion Tracking. If your store's currency is not USD, replace it with the correct value
2. In your BigCommerce admin, go to Advanced Settings > Web Analytics.
3. Check the box next to Affiliate Conversion Tracking.
4. Click the Save button at the bottom of your screen.
5. Click on the Affiliate Conversion Tracking  tab paste your code into the Conversion Tracking Code box:
6. Replace both {{APP_KEY}} portions of the code above with your store's Yotpo app key.

7. Click Save.

Installing Star Rating on category pages

This step is optional.

1. Access your BigCommerce admin.
2. Click on Storefront Design.
3. Click on My Themes.
4. Click on Edit HTML/CSS.
5. Click Other Template Files.
6. Access the file CategoryProductsItem.html is located under Panels.
7. Add the following code where you want the Star Rating to appear - the exact location depends on your store:

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

8. Click Save.

Importing reviews

The import process is done via BigCommerce API, so there is no need to export or manually handle files.

In order to import reviews from BigCommerce, you must:

• Have used the BigCommerce native reviews app, now disabled.
• Submit a ticket to Yotpo Support in here with the following message:

Please import my BigCommerce reviews into Yotpo.
-Send me a file with the data from BigCommerce to review before importing - Yes / No
-Apply Verified Buyer badge - Yes / No