How to add a Trustpilot widget to your Shopify store

Customer reviews are fundamental for e-commerce brands, to build reputation and to help customers make choices.

There are many apps dedicated to product reviews in the Shopify ecosystem, from simple ones that save the reviews directly in Shopify to the ones that aggregate reviews received on your store as well as through your social media channels. At Nama, throughout the years, we had experience integrating a few of these.

In this article, I will go through a method to implement the Trustpilot review widget on Shopify, which we added to one of our most recent 2.0 theme migrations.

Trustpilot and Shopify

You can implement this in two ways: one is with the Trustpilot reviews app and the other one is with custom code.

The benefit of using the app is that you can at any point change the position of the widget or add new widgets directly from the Shopify admin. However, no style changes apart from the height, width and spacing of the widget are possible.

I understand why Trustpilot has built the widget the way it has - they wouldn’t want any portion of the reviews being hidden or modified with CSS, since the point of displaying the widget is to show all reviews (good and bad).

In our specific case, we first tried to add the widget through the app (you can find detailed instructions  here), however its alignment really clashed with the structure of the product page.

So we opted for the implementation through custom code, following the documentation provided by Trustpilot.

In the specific case of Shopify though, you need to to do some extra work on the code snippet provided.

What you need to modify is the content of the data-sku property, since the code snippet you can get from the site has just a hardcoded value and it will have the reviews associated to that specific product.

This is an example of what the final value will need to look like

TRUSTPILOT_SKU_VALUE_12345678,TRUSTPILOT_SKU_VALUE_12345679,Ver001_001,TRUSTPILOT_SKU_VALUE_12345680,Ver001_002

I used capture to create a new variable called trustpilot_sku_values. Having taken a look at the syntax of the widget generated by the Shopify integration, I can see that the string includes the product.id, all the variant ids and skus. So, with Liquid I appended to the variable the product.id and then I looped through the variants to continue building my string.

{%- capture trustpilot_sku_values -%}
  {{- "TRUSTPILOT_SKU_VALUE_" | append: product.id -}},
  {%- for variant in product.variants -%}
   {{- "TRUSTPILOT_SKU_VALUE_" | append: variant.id | append: "," | append: variant.sku -}}{%- unless forloop.last -%},{%- endunless -%}
  {%- endfor -%}
  {%- endcapture -%}

L'ultimo step per l'integrazione è quindi modificare l’allineamento all’interno della pagina prodotto.

Now that I have the widget, it’s time to change the alignment. I have wrapped the widget’s html code in an outer div, to which I have given some negative margin only on desktop. It’s not the most elegant solution but since the widget generates an iframe it’s not possible to change the CSS without waiting for the element to have loaded.

This is the final code for the widget, you should of course replace the values passed in the trustpilot widget with the ones generated in your business account

{%- capture trustpilot_sku_values -%}
 {{- "TRUSTPILOT_SKU_VALUE_" | append: product.id -}},
 {%- for variant in product.variants -%}
  {{- "TRUSTPILOT_SKU_VALUE_" | append: variant.id | append: "," | append: variant.sku -}}
  {%- unless forloop.last -%},{%- endunless -%}
  {%- endfor -%}
{%- endcapture -%}

<!-- TrustBox widget - Product Mini -->
<div class="trustpilot_container">
  <div 
    class="trustpilot-widget" 
    data-locale="it-IT" 
    data-template-id="1234" 
    data-businessunit-id="1234" 
    data-style-height="24px" 
    data-style-width="100%" 
    data-theme="light" 
    data-sku="{{- trustpilot_sku_values -}}" 
    data-no-reviews="hide" data-scroll-to-list="true">
    <a href="https://it.trustpilot.com/review/yoursite.it" target="_blank" rel="noopener noreferrer">Trustpilot</a >
  </div>
</div >
<!-- End TrustBox widget -->

-