This article will help you install TrustSpot on your Shopify Store to collect & display Product Reviews. Product Reviews begins on our Growth Plan.

If you get stuck at any point, feel free to jump on Live Chat and one of our team members will provide guidance in getting the code installed. You can also email us at: support@trustspot.io

The process of installing TrustSpot on Shopify is divided into 3 required parts, and should take less than 10 minutes (depending on your theme):

  • Install the Shopify App
  • Add TrustSpot's Javascript
  • Add Review Widget
  • Import Reviews from Shopify   (optional)

Step 1: Installing the Shopify app

If you have already installed the TrustSpot app on Shopify, you can skip this step

  1. Open your Shopify admin
  2. Click Apps
  3. Click Visit the App Store
  4. Search for TrustSpot
  5. Click TrustSpot
  6. Click Get
  7. Click Install TrustSpot

A new TrustSpot account has been created based on your Shopify admin email and you will receive the password in an email. 

-

Step 2: Add the TrustSpot Javascript file

  1. Open your Shopify admin
  2. Click Online Store
  3. Click Themes

4. Click the Actions button for your Current theme, and than click Edit Code


5. Under Layout, click the file called theme.liquid

6. Directly under <head>, add the following lines of code. Note: You will need to replace the bolded items with your account's credentials.

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

7. Replace the "XXXX" portion for widget.css with your Merchant ID. This number is available within TrustSpot under your Account Settings.

Note: To get to the account settings page, log into TrustSpot and click your company name in the top right, then click Account Settings

8. Replace the "XXXXXXXXXXXXXXXXXXXXX" for trustspot_key with your API Key. This is also located under your Account Settings.

9. Click Save on the top right


-

Step 3: Add the Review Widget

  1. Similar to how we edited the last file, we're going to edit another file. Under Templates, select product.liquid

Check the first few lines of the file, if you see this at the beginning:

{% comment %}   The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

That means we need to edit a different file. Navigate to the described file under: /sections/product-template.liquid 

Once you are in the correct file, scroll down to the bottom and copy/paste the following code at the very end:

<div class="trustspot trustspot-main-widget"
     data-product-sku="{{ product.id }}"
     data-name="{{ product.title | escape }}"
     data-url="{{ shop.url }}{{ product.url }}"
     data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
     data-description="{{ product.description | escape }}"></div>

2. Click Save
3. The review widget should now appear at the end of individual product pages

-

[Optional] Step 4: Add star rating on Category Pages

The following steps will add inline star ratings to product category pages on Shopify

1. In your Shopify theme file editor (as used previous to add code), locate the file product-loop.liquid or product-grid-item.liquid (for older templates)

Note: The file controlling collection pages is different on each theme: product-loop.liquid is the default.
Consult with your designer if you don't have a file called product loop or product grid, so that they can help find the right template.

2. Browse the file and look for this line: {{ product.title }}

If you don't find this exact line, try to find text containing "title".

3. Copy and paste the following line directly below {{ product.title }}

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

4. Your product category pages should now show review stars inline under the product name. Only products that have reviews will show the stars

-

[Optional Step 5: Add star rating on Product Pages

The following steps will add inline star ratings at the top of individual product pages (usually under the product title).

1. Just like previous steps, we're going to edit a file. Open the product.liquid file.

Note: If your product.liquid file has a comment section at the top stating: "The contents of the product.liquid template can be found in /sections/product-template.liquid"... follow those instructions and edit that file instead.

2. Copy and paste the following code wherever you want the stars to appear. Many stores prefer to place this directly under the line where {{product.title}} appears, which will place the stars under the product title. 

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

Feel free to move this line around until you like the placement. Different themes have a wide variety of layouts and styles, so it may take a few tries to get it to where you like it.

-

Import Reviews from Shopify

Switching to a new review provider does not have to be a daunting process, TrustSpot ensures the process is simple and easy. We can easily import in all of your existing product reviews from Shopify:

  1. Open your Shopify admin
  2. Click Apps
  3. Click on Product Reviews
  4. Click on Settings > Export
  5. Save the Exported file

Contact our support team:  support@trustspot.io with your exported file and we will get them added (same day) to your account.

Have a question or need support on this integration? 

Please contact our support team from here.

Did this answer your question?