Overview

This article will help you install TrustSpot on your Stencil-Based Themes with BigCommerce. 

If you're on the Premium Plan or higher, our team can perform the install for you at no additional cost. As a BigCommerce Tech Partner, our team is well versed with the platform, and implementations are typically completed the same day. 

Note for Blueprint Users: If you are using a Blueprint theme, please see our instructions here

Prepare Store for Implementation

Before installing TrustSpot to your store, it's important to disable the existing native review system. This helps to prevent customers from receiving duplicate review request emails. 

Follow Steps 1 - 3 below to disable the native BigCommerce review app, and install TrustSpot. 

Step 1: Disabling the Built-in Reviews System and Review Requests

  • Log in to your BigCommerce Admin page.
  • Click Advanced Settings.
  • Click Comments.
  • Click Built-in.
  • Deselect the Product reviews checkbox.
  • Click Save

Step 2: Disabling the Built-in BigCommerce Review Requests Sent to Customers

  • Click Store Setup.
  • Click Store Settings.
  • Click Miscellaneous.
  • Deselect the Product Review Emails checkbox.
  • Click Save

Step 3: Installing the TrustSpot Reviews App

  • Click Here to view our BigCommerce App and install it to your store. 
  • Select the "Get this App" button to start the install process. You will be asked to confirm the install of the app. Once you click "Confirm", the app will be installed. 

TrustSpot Integration

Now that your store is successfully connected to TrustSpot, the next step is to add a few lines of code into your store template to show our review items. 

Step 1: Add TrustSpot JS to Site

The TrustSpot JS code is required to load all review elements on your store. To get started, you will need to add our script to the "Footer Scripts" section. 

Within your BigCommerce store go to: 

  • Storefront > Footer Scripts

Within the Footer area on the right, copy & paste the following code: 

<link href="https://trustspot.io/index.php/api/pub/product_widget_css/XXXX/widget.css" rel="stylesheet" type="text/css"/><script>trustspot_key='YYYY';</script><script src="https://trustspot.io/assets/js/trustspot_product_reviews.js"></script> 

  • Replace XXXX with your TS Merchant ID, found under: Account Settings
  • Replace the YYYY with your TS API Key, found under: Account Settings
  • Click Save

Step 2: Add the Reviews Widget on the Product Page

The Review Widget is the main display on your site, which showcases all of your great Product & Company Reviews, Photos, and Product Q&A. 

To get started, click on the following: 

  • Storefront > My Themes > Advanced > Make a Copy 
  • Once the theme is copied, click on Edit Theme Files

The Edit Theme Files menu item opens up your Theme Editor. From here, you will need to locate your product template to add the TrustSpot Code.

  • Click Templates > Components > Products > product-view.html OR product.html (depending on your theme).
  • Copy & Paste the below code towards the end of the file:

<div class="trustspot trustspot-main-widget" data-product-sku="{{ product.id }}" data-name="{{ product.title }}"></div> 

  • Click Save

Step 3: Add the Product Star Rating on the Product Page

This step requires being in the Theme Editor, follow the below steps: 

  • Click Storefront > My Themes > Edit Theme Files
  • Click Templates > Components > Products > product-view.html, product.html OR single-details.html (depending on your theme). 
  • Copy & Paste the below code under the "productView-title" code line. To find this line quickly, use:  CTRL+F on Windows or command + F on Mac to search. 

<div class="trustspot-inline-product" data-product-sku="{{ product.id }}"></div> 

  • Click Save

Step 4: Add the Category Star Rating to the Category Page

This step requires being in the Theme Editor, follow the below steps: 

  • Click Storefront > My Themes > Edit Theme Files
  • Click Templates > Components > Products > card.html   (if your theme does not have this file, you will need to locate the file which contains the Category Page data). 
  • Copy & Paste the below code under the "card-title" code line. To find this line quickly, use:  CTRL+F on Windows or command + F on Mac to search. 

<div class="trustspot-inline-category" data-product-sku="{{id}}"></div>          

  • Click Save                                  

Have a question or need support on this integration? 

Please contact our support team from here.

Did this answer your question?