BigCommerce - Stencil: Installing Yotpo Reviews on Stencil

This guide will walk you through the process of integrating the Yotpo app into your BigCommerce store. 

1. Disabling the Built-in Reviews System

1. Log into your BigCommerce Admin page.
2. Click on Settings.
3. Click on Comments.
4. Click the Built-in tab.

5. Deselect the Product reviews checkbox:

6. Click Save.

Disabling the built-in review requests sent to customers

1. Click on Store Setup.
2. Click on Store Settings.
3. Click the Miscellaneous tab.
4. Uncheck the Product Review Emails checkbox.
5. Click Save.

2. Installing the  Yotpo Reviews App

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

3. Installing the Yotpo JavaScript

1. Access your BigCommerce admin.
2. Click Storefront.
3. Go to Script Manager.
4. Under the "Name of the Script" field put it Yotpo.JS and choose the following settings:
   • Location on Page - Footer
   • Select Pages where Script will be added - All pages
   • Script Category - Essential
   • Script Type - Script
5. Paste the following code at the start of the footer:

   <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>

6. Replace the ###YOUR-APP_KEY### portion of the text in the code above with your store's Yotpo APP Key.
7. Click Save.

4. Installing the Reviews Widget on product pages

1. Click Storefront.
2. Click My Themes.
3. Click Advanced > Make a Copy.
4. Once the theme is copied, click Edit Theme Files:
   

5. Open the Theme Editor in your BigCommerce admin.
6. Click Templates > Components > Products > product-view.html or product.html.
7. Paste the following code under the last line of code in the file:

<div class=" yotpo-widget-instance" data-yotpo-instance-id=" {{INSTANCE ID}}" data-yotpo-product-id="
    {{ product.id }}" data-yotpo-name=" {{ product.title }}" data-yotpo-url=" {{ product.url }}"
    data-yotpo-image-url=" {{ getImage product.main_image }}" data-yotpo-description=" {{ product.description }}">
</div>

9. Click Save File.

5. Installing the Star Rating on product pages

1. Click Storefront.
2. Click My Themes.
3. Click Advanced.
4. Click Edit Theme Files.
5. Click Templates > Components > Products > product-view.html or single-details.html.
6. Paste the following code under the *productView-title element, which you can find by searching for it:
   • Ctrl + F on Windows
   • command + F on Mac

(*If you don't find this element, then look for something similar containing the word title)

<div class=" yotpo-widget-instance" data-yotpo-instance-id=" {{INSTANCE ID}}" data-yotpo-product-id="
    {{ product.id }}">
</div>

7. Click Save.

6. Installing the Star Rating on category pages

1. Click Storefront.
2. Click My Themes.
3. Click Advanced.
4. Click Edit Theme Files.
5. Open the Theme Editor in your BigCommerce admin.
6. Click Templates > Components > Products > access the file card.html. If you don't have this file, search for the file that contains your Category Pages data (You can find it by searching for it using CTRL+F):
7. Paste the following code under the card-title element:

<div class="yotpo bottomLine"
 data-product-id="{{id}}">
</div>

If you want to set up Star Rating as an anchor to product pages, please click here.

Centering the Star Rating

If you would like to center the Star Rating so it will appear right under the price, you can try adding one of the following CSS rules directly to the element:

Option 1:

<style>
div.yotpo.bottomLine .pull-left {
    float: none;
    text-align: center;
}
.yotpo a.text-m {
    display: inline-block;
}
</style>

Option 2:

Edit the Star Rating element by surrounding it with an additional <div> and applying some inline CSS:

Markup
<div style="text-align: center">
    <div class="yotpo bottomLine" style="display:inline-block"
       data-product-id="{{ product.id }}">
    </div>
</div>

The CSS styling can be added right above the Star Rating code:

7. Installing the conversion tracking code

1. Access your BigCommerce admin.
2. 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>

3. In your BigCommerce admin, go to Advanced Settings > Web Analytics.
4. Check the box next to Affiliate Conversion Tracking.
5. Click the Save button at the bottom of your screen.
6. Click on the Affiliate Conversion Tracking  tab paste your code into the Conversion Tracking Code box:
7. Replace both {{APP_KEY}} portions of the code above with your store's Yotpo app key. Make sure to replace the two {{APP_KEY}} portions of the code with the App Key from your account. Can't find your app key? Click here
8. Click Save.

8. Importing your 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

Important: Since BigCommerce reviews don't fully match Yotpo's format, certain types of data may be modified or lost.