BigCommerce: Installing Yotpo Reviews on Mobile

Installing Yotpo on BigCommerce Mobile consists of the following steps:

• Downloading the mobile template and adding the Yotpo code to the necessary files
• Uploading changes through WebDAV to your Bigcommerce account

Downloading the mobile template

1. Go to Design › Mobile.
2. Make sure Enable Mobile Theme and at least one device under Enable on these Devices are selected.
3. Click Download Template Files. This will download a zip file containing the mobile template files to your computer.
4. Extract the files from the zip file.
5. Once you have extracted the files to your computer it will look like this:

Adding the Yotpo JavaScript to your mobile template

1. Open the mobile_template folder that you extracted to your computer, go to the Panels folder and locate the HTMLhead.html file.
   
2. Open that file with an HTML text editor such as Sublime for Mac or Notepad++ for Windows and then add the following code just above the
   <!-- end: js page tag -->

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

3. Save your changes to the file.

Adding the Reviews Widget to your mobile template.

1. Open up the mobile_template folder that you extracted to your computer,  go to the Panels folder and locate the ProductDetails.html file.

2. Add the following code after the last line of the file and then make sure you save the changes to the file:

              <script type="text/javascript">//<![CDATA[
              var div = document.createElement("div");
              div.setAttribute('class', 'yotpo yotpo-main-widget');
              div.setAttribute('data-product-id',"%%GLOBAL_ProductId%%");
              div.setAttribute('data-name',"%%GLOBAL_ProductName%%");
              div.setAttribute('data-url', document.URL);
              div.setAttribute('data-description',"");
              div.setAttribute('data-image-url', "%%GLOBAL_ThumbImageURL%%");
              if ($(".yotpo.placeholder").length) {
              $(".yotpo.placeholder").append(div);
              } else {
              $("#ProductDescription").append(div);
              }
              //]]></script>

Adding the Star Rating to the product page of your mobile template

1. To install the star rating on your mobile theme edit the ProductDetails.html file as above but add the following code under the ProductName section.

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

2. Save the changes.

Uploading changes through WebDAV

1. Connect to your store through WebDAV. using Cyberduck for Windows or Cyberduck for Mac

If you have not connected through WebDAV before, see this article for instructions.

1. Open the mobile_template folder.
2. Inside the mobile_template folder right click on the Panels folder and choose upload from the drop-down menu.
   

4. Locate your modified files and click on Upload.
   If the Panels folder is not  in the mobile_template folder appear then you should first create by choosing New Folder and naming it Panels and only then upload the modified files in to it.
5. When finished, you should see only your modified files listed in the mobile_template folder on WebDAV.
   
   Now you should see the Yotpo widget on your mobile theme.