Come installare Back In Stock per BigCommerce

Imparerai

Scopra come installare la funzione Back in Stock di Klaviyo sul suo negozio BigCommerce. Questa funzione ha due componenti chiave: un flusso e un pulsante sul suo sito web. 

1. Flusso di ritorno in magazzino: Quando qualcuno si iscrive ad un avviso di rifornimento, sul suo profilo Klaviyo verrà registrato un evento "Subscribed to Back in Stock". Questo è l'evento che utilizzerà per attivare il Flusso di ritorno in magazzino. Gli acquirenti entrano nel flusso quando si iscrivono ad un avviso di riassortimento e attendono su "Back in Stock Delay" fino a quando l'articolo di loro interesse viene riassortito.
2. Pulsante del sito web: Dovrà aggiungere uno snippet al suo tema BigCommerce che mostrerà automaticamente un pulsante "Notify Me When Available" quando gli articoli non sono più disponibili. Quando gli acquirenti cliccano su questo pulsante, compilano un modulo e si iscrivono a un avviso di rifornimento.

Prima di iniziare

Questa guida si concentrerà sull'installazione dello snippet Back in Stock di Klaviyo nel suo script manager di BigCommerce, in modo che gli acquirenti possano iscriversi agli avvisi di riassortimento. Prima di iniziare, dovrà avere un flusso di ritorno in magazzino già impostato nel suo account per catturare questi abbonati e poi automatizzare il processo di avviso di ritorno in magazzino.

La preghiamo di notare che il nostro pulsante Torna in magazzino non è supportato all'interno della modale di Visualizzazione rapida a cui si accede da una pagina delle Collezioni. Il pulsante deve essere posizionato solo sulla pagina del prodotto.

Come funziona lo snippet?

Non appena installa lo snippet fornito di seguito, si verificherà quanto segue:

• Quando un acquirente naviga su un prodotto e questo è esaurito, il pulsante "Notify Me When Available" apparirà direttamente al posto del pulsante "Sold Out" che normalmente verrebbe visualizzato.
• Quando qualcuno clicca sul pulsante "Notify Me...", viene visualizzato un modulo che consente all'acquirente di iscriversi per essere avvisato quando l'articolo viene rifornito.
• Non appena il modulo viene inviato, l'evento "Subscribed to Back In Stock" verrà registrato sul profilo dell'acquirente all'interno di Klaviyo.
• Poi, il flusso Ritorno in magazzino che ha già impostato avviserà gli acquirenti quando l'articolo a cui si sono abbonati tornerà in magazzino.

Klaviyo tiene traccia del suo inventario all'interno del suo account Klaviyo e aggiorna i prodotti ogni 3 ore e le varianti ogni ora. A causa di questo ritardo, possono verificarsi casi in cui i prodotti esauriti nel suo negozio non si riflettono ancora in Klaviyo. Ci possono anche essere casi in cui un prodotto che è tornato in stock nel suo negozio non si riflette in Klaviyo.

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

Installare lo snippet

Per installare lo snippet Klaviyo back in stock, lo aggiungerà ad un nuovo script nel suo Script Manager.

1. Dall'amministrazione di BigCommerce, vada su Storefront > Script Manager.
2. Clicchi su Crea uno script. Utilizzi le seguenti impostazioni:
   • Nome della sceneggiatura: Klaviyo torna in stock
   • Posizione nella pagina: Piè di pagina
   • Selezioni le pagine in cui verrà aggiunto lo script: Pagine del negozio
   • Tipo di script: Script
3. Successivamente, aggiorni lo script sottostante con la sua chiave API pubblica di Klaviyo e incolli lo script aggiornato nella casella dello script.
   • Può copiare la sua chiave API pubblica di 6 caratteri da Klaviyo. Per trovarla, clicchi sul nome del suo account nell'angolo in basso a sinistra, quindi si rechi su Impostazioni > Chiavi API. Nello script, la sua API pubblica deve sostituire il testo che legge PUBLIC_API_KEY.
     

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
        var klaviyo = klaviyo || [];   
        klaviyo.init({   
             account: 'PUBLIC_API_KEY',    
             platform: 'bigcommerce'  
        });  
        klaviyo.enable("backinstock",{    
        innescare: {  
             product_page_text: "Notify Me When Available", 
             product_page_class: "button",  
             product_page_text_align: "center", 
             product_page_margin: "0px", 
             replace_anchor: false 
        },  
        modale: { 
             titolo: "{product_name}", 
             body_content: "Si registri per ricevere una notifica quando questo articolo tornerà in stock.",   
             email_field_label: "Email", 
             button_label: "Notificami quando disponibile", 
             subscription_success_label: "Sei dentro! Le faremo sapere quando tornerà.",  
             footer_content: '',
             stili_aggiuntivi: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",   
             drop_background_color: "#000",
             colore_di_sfondo: "#fff",
             colore_testo: "#222", 
             colore_testo_bottone: "#fff",
             colore_di_sfondo_del_pulsante: "#4787ed",
             colore_pulsante_chiusura: "#ccc", 
             colore_di_sfondo_errore: "#fcd6d7", 
             colore_testo_errore: "#C72E2F",
             colore_di_sfondo_successo: "#d3efcd",
             colore_testo_successo: "#1B9500" 
             } 
        });
   </script>

4. Clicchi su Salva. Ora ha aggiunto il pulsante Klaviyo back in stock al suo negozio.
   

Personalizzi il suo modulo e il suo pulsante

Il pulsante e il modulo di Klaviyo "Notify Me When Available" sono altamente configurabili. Può modificare i colori, i caratteri, il testo e altri elementi in base alle sue preferenze di design.

I valori predefiniti inclusi nello snippet di cui sopra sono elencati e spiegati di seguito. Se effettua degli aggiornamenti, si assicuri 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 dirà: "Notificami quando disponibile", ma può essere configurato in modo da dire ciò che desidera. Il codice predefinito per l'innesco è:

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
    }, 

• 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à in modo che questo pulsante corrisponda agli altri pulsanti di base del suo tema.
• product_page_text_align
  L'allineamento del testo all'interno del pulsante "back in stock" (ad es. centro, destra o sinistra).
• product_page_margin
  Il margine aggiunto intorno al pulsante, tra il testo e il pulsante.
• alternate_anchor
  Se il suo tema utilizza un elemento diverso da un pulsante "Aggiungi al carrello", sostituisca questo testo con l'ID dell'elemento.
• replace_anchor
  Quando è impostato su false, vedrà sia il pulsante "Sold Out" che il pulsante "Notify Me When Available". Quando questa opzione è impostata su true, il pulsante "Notify Me When Available" sostituirà il pulsante "Sold Out".

Impostazioni modali

Il modale è la casella di messaggio che appare quando qualcuno clicca sul pulsante per essere avvisato quando un articolo viene rifornito. Queste sono le impostazioni predefinite che può 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 BigCommerce.
• body_content
  Il testo che appare all'interno del popup che istruisce il cliente su cosa fare. 
• email_field_label
  Il testo segnaposto all'interno del campo Email.
• button_label
  Il testo all'interno del pulsante "di invio" per questo modulo popup.
• subscription_success_label
  Il messaggio "di successo" che appare in verde quando qualcuno invia con successo il modulo popup.
• footer_content
  (opzionale) Testo che apparirà nel footer, sotto il pulsante di invio close_label: "Chiudi".
• background_color
  Il colore di sfondo del modulo popup; il valore predefinito è bianco.
• text_color
  Il colore del testo del modulo popup; il valore predefinito è nero.
• button_text_color
  Il colore del testo del pulsante sul modulo popup; il valore predefinito è bianco.
• button_background_color
  Il colore di sfondo del pulsante di invio del modulo; l'impostazione predefinita è blu.
• error_background_color
  Il colore di sfondo di una casella di errore che viene visualizzata quando si verifica un errore nell'invio del modulo; il valore predefinito è rosso pallido.
• error_text_color
  Il colore del testo del messaggio di errore che viene visualizzato quando si verifica un errore nell'invio del modulo; il valore predefinito è rosso.
• success_background_color
  Il colore di sfondo del riquadro di successo che appare dopo che qualcuno ha inviato il modulo con successo; l'impostazione predefinita è verde chiaro.
• success_text_color
  Il colore del testo del messaggio di successo che appare dopo che qualcuno ha inviato il modulo con successo; l'impostazione predefinita è verde.

Invita i clienti a scegliere di partecipare al marketing

Quando qualcuno si iscrive ad un avviso di ritorno in magazzino, non significa necessariamente che si aspetta di essere iscritto alla sua lista principale di newsletter.

Se gli acquirenti chiedono di essere avvisati quando un articolo viene rifornito, ma poi iniziano a ricevere regolarmente contenuti di marketing da lei, è probabile che si disiscrivano. In questo scenario, si perde la possibilità di coltivare questi acquirenti fino a farli diventare clienti fedeli, perché si ritirano subito dopo aver ricevuto e-mail che non hanno mai indicato di volere.

Per catturare coloro che desiderano ricevere le sue e-mail di marketing, può aggiungere una casella di controllo come questa al suo modulo Back in Stock:

Per implementare questo, dovrà fare un'aggiunta primaria al suo snippet, aggiungendo il suo ID di lista nel sito "klaviyo.init" dopo il suo ID Account.

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

   klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
   });
   

2. Sostituisca YOUR_LIST_ID con l'ID a sei caratteri della Lista Klaviyo a cui vuole che siano aggiunti gli abbonati. In genere, questa dovrebbe essere la sua lista principale di newsletter.
3. Lo snippet con questa aggiunta (vedere la riga 5) avrà il seguente aspetto:

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
       });
       klaviyo.enable('backinstock',{ 
          innescare: {
            ...
          },
          modale: {
            ...
          }
       });
   </script>
   

4. Se desidera personalizzare ciò che dice la casella di controllo, può aggiungere il testo che desidera visualizzare nella sezione "modal".

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

   Per impostazione predefinita, questa casella di controllo dirà: "Aggiungimi alla tua lista e-mail." Dovrà assicurarsi che questo testo sia molto chiaro, in modo che coloro che effettuano l'opt-in sappiano che inizieranno a ricevere le sue e-mail di marketing.

5. Se desidera controllare se questa casella è selezionata o deselezionata, può 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.

   modale: {
       subscribe_checked: true
           ...
       }

Risultato

Ora ha installato la funzione Back in Stock di Klaviyo sul suo negozio BigCommerce. 

Risorse aggiuntive

• Iniziare con BigCommerce
• Come creare un evento Aggiunto al carrello per BigCommerce