BigCommerce: Installing Yotpo Reviews on Mobile

      BigCommerce: Installing Yotpo Reviews on Mobile

        Article summary


        Supported plans

        Free, Starter, Pro, Premium, Enterprise

        eCommerce Platform


        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
        Please note:
        If you are using a responsive theme, you do not need to have a separate mobile theme.

        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="//";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
        Please note:
        Replace YOUR-APPKEY-HERE with the APP KEY from your account.

        1. 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.
        1. 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-url', document.URL);
                      div.setAttribute('data-image-url', "%%GLOBAL_ThumbImageURL%%");
                      if ($(".yotpo.placeholder").length) {
                      } else {
        Please note:
        The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9), "_" and "-" characters.

        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"
        Please note:
        If you don't have ProductName exactly as it appears above then put the code under a different variable that represents the name of the product.

        1. 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.
        1. 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.
        2. 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.

        Was this article helpful?