Overview
This article will help you install TrustSpot on your Blueprint-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 Stencil Users: If you are using a Stencil theme, please see our instructions here.
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 this code into your HTML Head:
Click Storefront > My Themes > Edit HTML/CSS
Click "HTMLHEAD.html" on the top left
Copy & Paste the below code at the bottom of the template, before the </head>.
<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 TrustSpot Merchant ID, found under: Account Settings
Replace the YYYY with your TrustSpot 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.
Click: Storefront > My Themes > Edit HTML/CSS
Click: Other Template Files
Click: ProductDetails.html under Panels
Copy & Paste the following code towards the bottom of the file
<div class="trustspot trustspot-main-widget" data-product-sku="%%GLOBAL_ProductId%%" data-name="%%GLOBAL_ProductName%%"></div>
Click Save
Note: The ProductDetails.html file might be different for your Theme. If the Review Widget does not appear, try the ProductDescription.html file.
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 HTML/CSS
Click: Other Template Files
Click: ProductDetails.html under Panels
Add the following code AFTER this line:
<h1 itemprop="name">%%GLOBAL_ProductName%%</h1>
<div class="trustspot-inline-product" data-product-sku="%%GLOBAL_ProductId%%" data-url="%%GLOBAL_ProductLink%%"></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 HTML/CSS
Click: Other Template Files
Click: CategoryProductsItem under Panels
Copy & Paste the following code where you want the stars to appear. Typically, most stores will show it below the Product Name or Price.
<div class="trustspot-inline-category" data-product-sku="%%GLOBAL_ProductId%%" data-url="%%GLOBAL_ProductLink%%"></div>
Click Save
Have a question or need support on this integration?
Please contact our support team from here.