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 and you will receive the password in an email.

Add the TrustSpot Javascript file

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

4. Click the 3 dots (...) at the top right, then select Edit HTML/CSS

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

Add the product review widget (large widget on product pages)

  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 widget should now appear at the end of individual product pages

Add star ratings to Category and Collection 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 something 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

Add star ratings to the top of individual 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.

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

Did this answer your question?