Come installare Klaviyo Reviews su Shopify (temi vintage e headless)

Cosa imparerai

Scopri come installare Klaviyo Reviews con un tema Shopify vintage o un'architettura headless. Questo processo prevede la copia di diversi snippet di codice e il loro incollaggio nel codice del tuo sito.

Se stai utilizzando un tema Shopify 2.0, puoi installare Klaviyo Reviews senza usare codice. Per scoprire di più, consulta il nostro articolo su Primi passi con Klaviyo Reviews. Se usi WooCommerce, scopri come installare Klaviyo Reviews per WooCommerce.

Prima di iniziare

Prima di incollare questi snippet di codice nel codice del tuo sito, aggiungi l’app Klaviyo Reviews al tuo negozio Shopify. Per i temi vintage, abilita il tracciamento onsite di Klaviyo.

Installazione con architettura headless su Shopify

Per integrare Klaviyo Reviews con un negozio Shopify headless, aggiungi lo snippet di tracciamento JavaScript di Klaviyo, noto anche come Klaviyo.js, a tutte le pagine in cui desideri aggiungere i widget delle recensioni (ad esempio, le pagine dei prodotti). Potresti aver già installato questo snippet se hai configurato il tracciamento onsite di Klaviyo o i moduli d'iscrizione.

Scopri come installare Klaviyo.js per i negozi Shopify.

Dopo aver aggiunto questo script al tuo sito, procedi copiando gli snippet di codice nei passaggi seguenti nel codice del tuo sito.

Aggiungi gli snippet di codice

Gli snippet di codice qui sotto consentono ad alcuni widget di recensioni di apparire in diverse aree del tuo negozio.

• Il widget di valutazione a stelle mostra la valutazione a stelle attuale per un prodotto specifico e, nella maggior parte dei casi, viene installato sotto il nome del prodotto.
• Il widget di riepilogo delle recensioni mostra un grafico che suddivide tutte le valutazioni selezionate per un prodotto, le immagini inviate dalle persone con le recensioni e il feedback più comune ricevuto dal prodotto. Di solito viene installato vicino alla parte inferiore della pagina di un prodotto.
• Il widget delle recensioni dei prodotti è una combinazione dei widget di riepilogo delle recensioni e di elenco delle recensioni. Se aggiungi il widget delle recensioni dei prodotti al tuo sito, non devi aggiungere separatamente i widget di elenco delle recensioni e di riepilogo delle recensioni.
• Il widget dell'elenco delle recensioni mostra un elenco di tutte le recensioni pubblicate e delle domande della clientela, insieme a una barra di ricerca, filtri, un pulsante Scrivi una recensione e un pulsante Fai una domanda. In genere viene installato immediatamente sotto il widget di riepilogo delle recensioni.
• Il widget del carosello di recensioni in evidenza mostra recensioni in evidenza di tutti i tuoi prodotti. Puoi metterlo in evidenza sulla home page, su una pagina di recensioni dedicata o in qualsiasi altra parte del sito. Puoi selezionare le recensioni da mettere in evidenza in questo widget. Se disponibili, le immagini inviate dai clienti accompagnano ogni recensione; le immagini dei tuoi prodotti vengono utilizzate se non è stata inviata alcuna immagine insieme alla recensione.
• Il widget SEO / tutti i widget delle recensioni mostra tutte le tue recensioni su tutti i prodotti in un’unica pagina. Usa questo widget per migliorare la tua SEO e offrire un unico punto in cui i potenziali clienti possano vedere cosa apprezzano i tuoi clienti attuali. Questo widget viene aggiunto più spesso a una pagina Recensioni autonoma sul tuo sito.

Widget di valutazione a stelle

Usa il widget di valutazione a stelle per mettere in evidenza la valutazione media di un prodotto e il numero di recensioni ricevute.

Per installare questo widget sotto il titolo del tuo prodotto:

1. Apri l'admin del tuo negozio Shopify.
2. In Canali di vendita, fai clic su Negozio online.
3. Fai clic sul menu con i tre puntini accanto al tema attuale > Duplica per creare un clone del tema attuale.
4. Dal menu con i tre puntini, fai clic su Modifica codice.
   

5. Cerca "product" nella barra di ricerca dei file e individua il file utilizzato per i contenuti della pagina prodotto. Potrebbe essere product.liquid, product-template.liquid, o qualcosa di simile. (Se utilizzi un modello di pagina prodotto personalizzato, seleziona invece quello.)
   

6. Seleziona il file, quindi cerca {{ product.title }} per individuare il codice che mostra il titolo del prodotto.
   

7. Aggiungi una nuova riga sotto questo codice.
8. Nella nuova riga, incolla questo snippet di codice:
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. Clicca su Salva.
10. Fai clic su Anteprima negozio.
11. Vai a una pagina prodotto nell'anteprima del tuo negozio. Dovresti vedere un widget a stelle sotto il titolo del prodotto.

Widget delle recensioni di prodotti

Usa il widget di riepilogo recensioni e il widget dell’elenco recensioni (o solo il widget di recensioni prodotto) per aggiungere un riepilogo e un elenco di tutte le recensioni pubblicate per ogni prodotto sul tuo sito.

Per installare questo widget:

1. Apri l'admin del tuo negozio Shopify.
2. In Canali di vendita, fai clic su Negozio online.
3. Fai clic su Personalizza accanto al tuo tema attuale per modificarlo oppure fai clic sul menu con i tre puntini > Duplica se preferisci modificare un tema in bozza anziché quello live.
4. Dal menu con i tre puntini, fai clic su Modifica codice.
   

5. Cerca "product" nella barra di ricerca dei file e individua il file utilizzato per i contenuti della pagina prodotto. Potrebbe essere product.liquid, product-template.liquid, o qualcosa di simile. (Se utilizzi un modello di pagina prodotto personalizzato, seleziona invece quello.)
   

6. Seleziona il file, quindi vai fino in fondo (o dove preferisci che appaiano il riepilogo delle recensioni e il widget dell’elenco).
7. Aggiungi una nuova riga, quindi incolla questo snippet di codice:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Clicca su Salva.
9. Fai clic su Anteprima negozio.
10. Vai a una pagina prodotto nell'anteprima del tuo negozio per un prodotto che ha recensioni. Dovresti vedere un widget di riepilogo delle recensioni e un widget di visualizzazione elenco vicino alla parte inferiore della pagina.

Widget separati per il riepilogo delle recensioni e l’elenco delle recensioni

Se preferisci installare separatamente i widget di riepilogo delle recensioni e di elenco delle recensioni (anziché insieme, come descritto nella sezione sopra), utilizza i seguenti snippet di codice:

Widget Riepilogo recensione

<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>

Widget elenco recensioni

<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>

Widget con carosello di recensioni in evidenza (facoltativo)

Il carosello di recensioni in evidenza mostra recensioni selezionate manualmente in qualsiasi pagina tu scelga (ad esempio, la home page).

Per aggiungere un carosello che mostri tutte le recensioni in evidenza, devi prima selezionare le recensioni da mettere in evidenza.

1. Dal pannello di navigazione principale di Klaviyo, seleziona Reviews.
2. Clicca su Tutte le recensioni.
3. Accanto a una recensione che vuoi mettere in evidenza, fai clic su Funzionalità.
   

Dopo aver selezionato diverse recensioni da mettere in evidenza sul tuo sito, puoi installare un widget carosello di recensioni su qualsiasi pagina. Vai alla pagina in cui vuoi che appaia il carosello, quindi incolla il seguente snippet nel codice di quella pagina:

<div id="klaviyo-featured-reviews-carousel"></div>

Widget SEO / Tutte le recensioni (facoltativo)

Il widget SEO/Tutte le recensioni mostra tutte le recensioni pubblicate per ogni prodotto. Aggiungilo a una pagina Recensioni autonoma o alla pagina Chi siamo.

<div id="klaviyo-reviews-all" data-id="all"></div>

Risultato

Dopo aver installato i widget descritti in questo articolo e aver pubblicato il nuovo tema, le tue recensioni appariranno nelle pagine prodotto (oltre che in tutte le altre pagine del tuo sito in cui li hai installati).

Risorse aggiuntive