Come installare Nuovamente disponibile per Shopify

Cosa imparerai 

Scopri come installare la funzionalità "nuovamente disponibile" di Klaviyo per Shopify, in modo che i tuoi clienti possano iscriversi agli avvisi di "nuovamente disponibile". L'impostazione del nuovamente disponibile consiste nel creare un flusso in Klaviyo e nell'aggiungere uno snippet di codice personalizzabile al tuo negozio Shopify. 

Prima di iniziare

Tieni presente che Klaviyo non fornisce assistenza per la codifica personalizzata. Se hai bisogno dell'assistenza di uno sviluppatore, considera di rivolgerti a uno dei partner di Klaviyo. 

Informazioni sulla funzionalità "Nuovamente disponibile" di Klaviyo

La funzionalità Nuovamente disponibile di Klaviyo per Shopify ha due componenti chiave:

1. Flusso di Nuovamente disponibile
   Quando qualcuno si iscrive ad un avviso di nuovamente disponibile, un evento Iscritto a Nuovamente disponibile sarà tracciato sul relativo profilo Klaviyo. Questo è l'evento che utilizzerai per attivare il flusso di Nuovamente disponibile. Gli acquirenti entreranno nel flusso quando si iscriveranno a un prodotto e saranno contattati quando il loro articolo di interesse sarà nuovamente disponibile.
2. Pulsante del sito web
   Dovrai aggiungere uno snippet al tuo tema Shopify, che mostrerà automaticamente un pulsante "Avvisami quando disponibile" quando gli articoli non sono più disponibili. Non appena installi lo snippet, si verificherà quanto segue:
   • Quando un acquirente naviga su un prodotto e questo è esaurito, un pulsante "Avvisami quando disponibile" apparirà direttamente accanto o sotto il pulsante "Esaurito".
   • Quando qualcuno clicca sul pulsante "Avvisami", viene visualizzato un modulo che consente all'acquirente di inserire la propria e-mail per essere avvisato quando l'articolo è nuovamente disponibile.
   • Non appena il modulo viene inviato, l'evento Iscritto a Nuovamente disponibile verrà tracciato sul profilo dell'acquirente all'interno di Klaviyo.

Klaviyo monitora il tuo inventario a livello di varianti, il che significa che gli acquirenti possono iscriversi per ricevere avvisi su specifiche varianti di prodotto. Ad esempio, se un cliente scopre che hai esaurito la sua maglietta rosa preferita in una taglia media, può iscriversi a questa variante specifica e Klaviyo farà in modo che riceva una notifica solo quando questa taglia e questo colore saranno nuovamente disponibili.

Prima di installare lo snippet

Prima di installare lo snippet tramite le istruzioni riportate di seguito, fai quanto segue:

• Verifica di aver abilitato il tracciamento sul sito di Klaviyo sul tuo negozio Shopify (compreso il Viewed Product), tramite l'integrazione dell'app di Klaviyo o manualmente. 
• Assicurati che il pulsante Aggiungi al carrello o il modulo di contatto siano presenti nella pagina del prodotto. Alcuni temi Shopify possono rimuovere il pulsante Aggiungi al carrello quando non ci sono scorte. In questo caso, conferma che quando non ci sono scorte, il tuo tema Shopify visualizzi un pulsante Esaurito, per assicurarti che il codice Klaviyo funzioni.

Video Nuovamente disponibile per Shopify

Installare lo snippet

Aggiungi lo snippet di codice qui sotto al tuo file theme.liquid. Queste istruzioni si applicano sia agli utenti di Shopify 2.0 che a quelli che utilizzano temi vintage. 

1. Dall'Admin di Shopify, clicca su Negozio online > Temi.
2. Clicca sul menu a discesa Azioni del suo tema e seleziona Modifica codice.
3. Cerca il file theme.liquid e clicca per aprirlo nell'editor.
4. Copia lo snippet JavaScript qui sotto e incollalo nel tuo file theme.liquid direttamente sopra il tag </body >. 

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
         account: "PUBLIC_API_KEY",
         platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
       trigger: {
         product_page_text: "Notify Me When Available",
         product_page_class: "button",
         product_page_text_align: "center",
         product_page_margin: "0px",
         replace_anchor: false
       },
       modal: {
        headline: "{product_name}",
        body_content: "Registrati per ricevere una notifica quando questo articolo sarà nuovamente disponibile.",
        email_field_label: "E-mail",
        button_label: "Avvisami quando disponibile",
        subscription_success_label: "Fatto! Ti faremo sapere quando tornerà disponibile.",
        footer_content: '',
        additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
        drop_background_color: "#000",
        background_color: "#fff",
        text_color: "#222",
        button_text_color: "#fff",
        button_background_color: "#439fdb",
        close_button_color: "#ccc",
        error_background_color: "#fcd6d7",
        error_text_color: "#C72E2F",
        success_background_color: "#d3efcd",
        success_text_color: "#1B9500"
       }
     });
   </script>

5. Dovrai sostituire il testo PUBLIC_API_KEY nello snippet con la tua chiave API pubblica di Klaviyo. Scopri come trovare la chiave API pubblica del tuo account. Se utilizzi più account Klaviyo, assicurati di utilizzare la chiave dell'account corretto. Copia e incolla la chiave nello snippet.
   
6. Puoi fermarti qui e salvare il file theme.liquid per utilizzare la configurazione predefinita, oppure imparare a personalizzare il pulsante Nuovamente disponibile e le impostazioni qui sotto.

Personalizza il tuo modulo e il tuo pulsante

Il pulsante e il modulo di Klaviyo "Avvisami" sono altamente configurabili. Puoi modificare i colori, i caratteri, il testo e altri elementi in base alle tue preferenze di design.

I valori predefiniti inclusi nello snippet di cui sopra sono illustrati di seguito. Se effettui degli aggiornamenti, assicurati di aggiornare il valore e non l'etichetta stessa.

Impostazioni del trigger

Il trigger è il pulsante che si apre quando un articolo non è più disponibile. Questo pulsante di default indicherà: "Avvisami", ma può essere configurato in modo da dire quello che desideri. Il codice predefinito (all'interno dello snippet che hai copiato) per il trigger è riportato di seguito.

trigger: {
    product_page_text: "Notify Me When Available",
    product_page_class: "button",
    product_page_text_align: "center",
    product_page_margin: "0px",
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

I parametri sono:

• product_page_text
  Il testo che viene visualizzato all'interno del pulsante che si apre quando un articolo non è più disponibile.
• product_page_class
  Questa classe determinerà l'aspetto del pulsante; il valore predefinito 'button' farà sì che questo pulsante corrisponda agli altri pulsanti di base del suo tema.
• product_page_text_align
  L'allineamento del testo all'interno del pulsante "nuovamente disponibile" (cioè al centro, a destra o a sinistra).
• product_page_margin
  Il margine aggiunto intorno al pulsante, tra il testo e il pulsante.
• alternate_anchor
  Se il tuo tema Shopify utilizza un elemento diverso dal pulsante "Aggiungi al carrello", sostituisci questo testo con l'ID dell'elemento.
• replace_anchor
  Quando questo è impostato su false, vedrai sia il pulsante "Esaurito" che il pulsante "Avvisami". Quando questo è impostato su true, il pulsante "Avvisami" sostituirà il pulsante "Esaurito".

Impostazioni di visibilità del trigger

Se desideri indicare quali prodotti visualizzano il pulsante "Nuovamente disponibile" sulla pagina del prodotto, puoi includere questi parametri qui sotto. Assicurati di includere include_on_tags o exclude_on_tags, ma non entrambi.

Ecco un esempio della sezione Klaviyo.init dello snippet con l'aggiunta di include_on_tags:

klaviyo.init({
    account: "PUBLIC_API_KEY",
    platform: "shopify",
    include_on_tags: "dog, cat"
});

• include_on_tags
  Questo tag farà in modo che il pulsante "Nuovamente disponibile" venga visualizzato solo sugli elementi che includono i tag specificati. Nell'esempio precedente, solo i prodotti etichettati con "cane," "gatto" o entrambi presenteranno il pulsante di Nuovamente disponibile.
• exclude_on_tags
  Si tratta dell'inverso del precedente. L'utilizzo di exclude_on_tags farà in modo che il pulsante "Nuovamente disponibile" venga visualizzato su tutti i prodotti tranne quelli specificati.

Impostazioni modali

Il modale è il modulo popup che appare quando un utente clicca sul pulsante per essere avvisato quando un articolo è di nuovo disponibile.

Queste sono le impostazioni predefinite dello snippet che puoi regolare:

• headline
  Il titolo che appare nella parte superiore del popup; per impostazione predefinita, popoleremo dinamicamente il titolo come nome del prodotto, utilizzando la variabile {product_name} di Shopify.
• body_content
  Il testo che appare all'interno del popup e che istruisce il cliente su cosa fare.
• email_field_label
  Il testo segnaposto all'interno del campo E-mail.
• button_label
  Il testo all'interno del pulsante di invio per questo modulo popup.
• subscription_success_label
  Il messaggio che appare quando qualcuno invia con successo il modulo popup.
• footer_content
  Testo opzionale che apparirà nel piè di pagina, sotto il pulsante di invio.
• close_label
  Il testo del pulsante di chiusura; l'impostazione predefinita è "Chiudi".
• background_color
  Il colore di sfondo del modulo popup; l'impostazione predefinita è bianco.
• text_color
  Il colore del testo del modulo popup; il colore predefinito è nero.
• button_text_color
  Il colore del testo del pulsante sul modulo popup; il colore predefinito è bianco.
• button_background_color
  Il colore di sfondo del pulsante di invio del modulo; il colore predefinito è blu.
• error_background_color
  Il colore di sfondo di un riquadro di errore che viene visualizzato quando c'è un errore nell'invio del modulo; il colore predefinito è rosso pallido.
• error_text_color
  Il colore del testo del messaggio di errore che viene visualizzato quando c'è un errore nell'invio del modulo; il colore predefinito è rosso.
• success_background_color
  Il colore di sfondo del riquadro che indica l'esecuzione riuscita dell'operazione che appare dopo che qualcuno ha inviato il modulo con successo; il colore predefinito è verde chiaro.
• success_text_color
  Il colore del testo del messaggio di operazione eseguita con successo che appare dopo che un utente ha inviato il modulo con successo; il colore predefinito è verde.
• font_family
  Il nome della famiglia di caratteri in cui è formattato il tuo testo; Times New Roman è un esempio di famiglia di caratteri.
• headers_font_family
  Il nome della famiglia di caratteri in cui è formattato il testo dell'intestazione; Helvetica è un esempio di famiglia di caratteri

Personalizzazione della posizione del pulsante "Avvisami"

Il seguente snippet può essere utilizzato per modificare la posizione del pulsante "Avvisami". Per impostazione predefinita, il pulsante apparirà accanto, sotto o sostituirà l'attuale pulsante Aggiungi al carrello/Esaurito. Con questo codice, puoi posizionare il pulsante sotto la descrizione, in fondo alla pagina, sotto l'immagine, ecc. Per farlo, inserisci lo snippet nel tuo file product.liquid dove desideri che appaia il pulsante, e assicurati di aggiornare il testo del pulsante se lo hai modificato in qualcosa di diverso da "Avvisami quando disponibile". 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Avvisami quando disponibile</a>

Opzionale: chiedere ai clienti di accettare esplicitamente i contenuti di marketing

Quando qualcuno si iscrive a un avviso di Nuovamente disponibile non significa che si aspetta di essere iscritto al tuo elenco principale della newsletter.

Se gli acquirenti chiedono di essere avvisati quando un articolo torna disponibile, ma poi iniziano a ricevere regolarmente contenuti di marketing, è probabile che annullino l'iscrizione. In questo scenario, si perde la possibilità di coltivare questi acquirenti fino a farli diventare clienti fedeli, perché potrebbero rinunciare presto a ricevere e-mail indesiderate.

Per catturare l'attenzione di coloro che desiderano ricevere le tue e-mail di marketing, puoi aggiungere una casella di controllo come questa al tuo modulo Nuovamente disponibile:

Per implementare questa soluzione, dovrai fare un'aggiunta al tuo snippet, aggiungendo il tuo ID elenco nella sezione "klaviyo.init" dopo il tuo ID Account.

1. La sezione "klaviyo.init" avrà questo aspetto:

   klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
   });

2. Sostituisci YOUR_LIST_ID con l'ID dell'elenco Klaviyo a cui desideri aggiungere gli iscritti. In genere, questo dovrebbe essere il tuo elenco principale della newsletter.
3. Lo snippet con questa aggiunta (vedi la riga 5) avrà il seguente aspetto:

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
          trigger: {
            ...
          },
          modale: {
            ...
          }
       });
   </script>

4. Se desideri personalizzare il contenuto della casella di controllo, puoi aggiungere il testo che desideri visualizzare nella sezione "modale". Per impostazione predefinita, questa casella di controllo indicherà: "Aggiungimi al tuo elenco e-mail". Dovrai assicurarti che questo testo sia molto chiaro, in modo che coloro che effettuano l'opt-in sappiano che inizieranno a ricevere le tue e-mail di marketing.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

5. Se desideri controllare se questa casella è selezionata o deselezionata, puoi aggiungere "subscribe_checked" come parametro alla sezione "modale". True selezionerà la casella per impostazione predefinita, mentre false la lascerà deselezionata e richiederà all'utente di selezionarla manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Posso utilizzare l'impostazione di Shopify "continua a vendere quando le scorte sono esaurite" e Nuovamente disponibile di Klaviyo?

Il flusso di prodotti nuovamente disponibili di Klaviyo rileva il momento in cui avviene una variazione dei livelli di inventario da zero a una certa quantità stabilita dalla regola di inventario minimo. Abilitare l'impostazione di Shopify "Continua a vendere quando le scorte sono esaurite" rende il prodotto disponibile per l'acquisto nonostante non sia presente nell'inventario, quindi il pulsante "Avvisami" non apparirà. 

In questo scenario, il flusso di nuovamente disponibile di Klaviyo non invierà alcuna e-mail a coloro che si sono iscritti a questo prodotto, poiché il livello delle scorte non è cambiato. Le e-mail di Nuovamente disponibile vengono inviate ai clienti solo quando il livello di inventario del prodotto è in linea con la regola di inventario minimo impostata. 

Inoltre, quando l'impostazione "Continua a vendere quando le scorte sono esaurite" è abilitata, il prodotto viene contrassegnato come disponibile, in modo che il modale "Nuovamente disponibile" di Klaviyo non apparirà per tale prodotto, in quanto il prodotto è disponibile per l'acquisto indipendentemente dai livelli di inventario.

Suggerimenti per la risoluzione dei problemi

L'aspetto del pulsante "Nuovamente disponibile" varia in base al particolare tema Shopify utilizzato dal tuo negozio. Se utilizzi un tema personalizzato, potresti dover personalizzare il codice del tema per assicurarti che la funzione Nuovamente disponibile funzioni correttamente.

Impostare il flusso

Successivamente, imposta il tuo flusso di Nuovamente disponibile in Klaviyo, che si attiverà ogni volta che qualcuno si iscrive per essere avvisato che un articolo è nuovamente disponibile. 

Prova la tua installazione Nuovamente disponibile

Per verificare che la tua installazione Nuovamente disponibile funzioni, procedi come indicato di seguito:

1. Configura un prodotto di prova sul tuo negozio.
2. Imposta l'inventario di quel prodotto a zero.
3. Controlla la pagina del prodotto per vedere se appare il pulsante "Avvisami".
4. Clicca sul pulsante "Avvisami" e compila il modulo.
5. Aggiungi un inventario sufficiente a soddisfare le regole di Nuovamente disponibile nelle impostazioni dell'account. 
6. Verifica di ricevere il messaggio di Nuovamente disponibile che hai creato.

Risultato

Ora hai installato la funzionalità Nuovamente disponibile di Klaviyo sul tuo negozio Shopify.

Risorse aggiuntive

• Come creare i pulsanti e i moduli Nuovamente disponibile per i temi gratuiti di Shopify
• Come impostare Nuovamente disponibile tramite API