BigCommerce: Blueprint-Based Themes

Learn how to install & configure TrustSpot for your BigCommerce store.

Beth avatar
Written by Beth
Updated over a week ago

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.

Did this answer your question?