Come integrare il widget Trustpilot nel tuo negozio Shopify

Le recensioni sono uno strumento fondamentale nel toolkit dei negozi e-commerce, perché servono a rafforzare l’immagine del brand e ad aiutare potenziali clienti a scegliere nel catalogo il miglior prodotto per le proprie esigenze.

Nell’ecosistema Shopify si possono trovare numerose app dedicate alle recensioni, a partire da quella nativa e gratuita di Shopity fino ad arrivare ad app di recensioni più complesse che aggregano ad esempio anche le review ricevute tramite social media.

Uno dei servizi di recensioni più conosciuti al mondo è sicuramente Trustpilot. Recentemente abbiamo avuto occasione di integrare questa piattaforma per una migrazione a un tema Shopify 2.0.

Trustpilot e Shopify

Ci sono due metodi per implementare Trustpilot su Shopify: uno è tramite la app Trustpilot reviews, disponibile sullo Shopify app store, mentre l’altro è utilizzando codice custom.

I vantaggi dell’utilizzo della app consistono nella possibilità di posizionare il widget all’interno delle varie pagine del negozio, direttamente dal pannello di controllo della app. Tuttavia, la possibilità di customizzare gli stili del widget è limitata a parametri come l’altezza o la larghezza del widget stesso.

Il motivo per queste limitazioni è chiaro: Trustpilot vuole ridurre al massimo la possibilità di alterare il CSS del widget, e magari di nascondere alcuni dei contenuti.

Nel nostro caso, abbiamo inizialmente provato a integrare il widget tramite la app (potete trovare le istruzioni dettagliate sulla documentazione ufficiale qui), ma il posizionamento che ne risultava non era in linea con il resto dei contenuti della pagina prodotto (prezzo, titolo, descrizione) - avevamo semplicemente bisogno di allinearlo sulla sinistra ma non era presente un’opzione per farlo tramite la app.

Quindi abbiamo deciso di optare per l’implementazione del codice custom, seguendo le istruzioni della documentazione Trustpilot.

Lo snippet di codice indicato all’interno del tutorial però raccoglie solo le recensioni per una sola delle varianti prodotto (ha un valore hardcoded) e ha quindi bisogno di qualche modifica per funzionare correttamente su Shopify.

Nello specifico, c’è bisogno di modificare il valore passato all’interno della proprietà data-sku, costruendo una stringa che concateni gli ID di tutte le varianti di quel determinato prodotto.

Questa è la struttura della stringa che dovrebbe risultarne nell'HTML:

TRUSTPILOT_SKU_VALUE_12345678,TRUSTPILOT_SKU_VALUE_12345679,Ver001_001,TRUSTPILOT_SKU_VALUE_12345680,Ver001_002

Confrontando quindi i dati prodotto, abbiamo identificato una stringa composta dal product.id e a tutti gli variant.id e variant.sku delle varianti di tale prodotto. Quindi con un for loop abbiamo iterato tutte le varianti prodotto e costruito la stringa da passare alla proprietà data-sku.

Utilizzando la tag Liquid capture, abbiamo salvato le informazioni da passare a Trustpilot in una nuova variabile chiamata trustpilot_sku_values.

{%- 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.

Abbiamo creato un div esterno che facesse da wrapper al widget e gli abbiamo assegnato del margine negativo, da applicare solo su desktop tramite media queries. Non si tratta certamente della soluzione più elegante per intervenire sull’allineamento di un elemento, ma il widget Trustpilot è un iframe quindi non avrei potuto modificarne il CSS senza aspettare che si fosse completamente caricato.

Per comodità, trovate qui il codice completo che abbiamo inserito all’interno della pagina prodotto:

{%- 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 -->

-