Comment installer Back In Stock pour BigCommerce

Vous apprendrez

Apprenez à installer la fonction de retour en stock de Klaviyo sur votre boutique BigCommerce. Cette fonctionnalité comporte deux éléments clés : un flux et un bouton sur votre site web. 

1. Flux de retour en stock : Lorsque quelqu'un s'abonne à une alerte de réapprovisionnement, un événement "Subscribed to Back in Stock" sera suivi sur son profil Klaviyo. C'est l'événement que vous utiliserez pour déclencher votre flux de retour en stock. Les acheteurs entrent dans le flux lorsqu'ils s'inscrivent à une alerte de réapprovisionnement et attendent sur une page "Délai de réapprovisionnement" que l'article qui les intéresse soit réapprovisionné.
2. Bouton du site web : Vous devrez ajouter un snippet à votre thème BigCommerce qui affichera automatiquement un bouton "Notify Me When Available" lorsque des articles seront en rupture de stock. Lorsque les acheteurs cliquent sur ce bouton, ils remplissent un formulaire et s'inscrivent à une alerte de réapprovisionnement.

Avant de commencer

Ce guide se concentre sur l'installation du snippet Back in Stock de Klaviyo dans votre gestionnaire de scripts BigCommerce afin que les acheteurs puissent s'abonner aux alertes de réapprovisionnement. Avant de commencer, vous devez avoir mis en place un flux de retour en stock dans votre compte afin de capturer ces abonnés et d'automatiser le processus d'alerte de retour en stock.

Veuillez noter que notre bouton « Back in Stock » n’est pas pris en charge dans la fenêtre modale « Quick View » accessible à partir d’une page de collections. Le bouton doit être placé uniquement sur la page du produit.

Comment fonctionne l'extrait ?

Dès que vous installez l'extrait fourni ci-dessous, le phénomène suivant se produit :

• Lorsqu'un acheteur consulte un produit et que celui-ci n'est plus en stock, un bouton "Notify Me When Available" apparaît directement à la place du bouton "Sold Out" qui s'affiche normalement.
• Lorsque quelqu'un clique sur le bouton "Notify Me...", un formulaire s'affiche et permet à l'acheteur de s'inscrire pour être averti lorsque l'article est réapprovisionné.
• Dès que le formulaire est soumis, un événement "Subscribed to Back In Stock" sera suivi sur le profil de l'acheteur dans Klaviyo.
• Ensuite, le flux de retour en stock que vous avez déjà mis en place alertera les acheteurs lorsque l'article auquel ils se sont abonnés est de nouveau en stock.

Klaviyo suit votre inventaire à l'intérieur de votre compte Klaviyo et rafraîchit les produits toutes les 3 heures, et les variantes toutes les heures. En raison de ce délai, il peut arriver que des produits en rupture de stock dans votre magasin ne soient pas encore reflétés dans Klaviyo. Il peut également arriver qu'un produit réapprovisionné dans votre magasin ne soit pas reflété dans Klaviyo.

Klaviyo surveille également votre inventaire au niveau des variantes. Cela signifie que les acheteurs peuvent s'inscrire pour recevoir des alertes sur des variantes de produits spécifiques. Par exemple, si un client constate que vous n'avez plus son T-shirt rose préféré en taille moyenne, il peut s'abonner à cette variante spécifique et Klaviyo s'assurera qu'il ne sera averti que lorsque vous aurez réapprovisionné cette taille et cette couleur.

Installez le snippet

Pour installer le snippet Klaviyo back in stock, vous devez l'ajouter à un nouveau script dans votre gestionnaire de scripts.

1. A partir de votre administration BigCommerce, naviguez vers Storefront > Script Manager.
2. Cliquez sur Créer un script. Utilisez les paramètres suivants :
   • Nom du texte : Klaviyo de nouveau en stock
   • Emplacement sur la page : Pied de page
   • Sélectionnez les pages où le script sera ajouté : Store Pages
   • Type de script : Script
3. Ensuite, mettez à jour le script ci-dessous avec votre clé d'API publique Klaviyo, et collez le script mis à jour dans la boîte de script.
   • Vous pouvez copier votre clé API publique de 6 caractères à partir de Klaviyo. Pour la trouver, cliquez sur le nom de votre compte dans le coin inférieur gauche, puis accédez à Paramètres > Clés API. Dans le script, votre API publique doit remplacer le texte 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",{    
        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 : "Inscrivez-vous pour recevoir une notification lorsque cet article sera à nouveau en stock.",   
             email_field_label : "Email", 
    button_label : "Notify me when available", 
    subscription_success_label : "Vous êtes inscrit ! Nous vous tiendrons au courant de son retour.",  
             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 : "#4787ed",
    close_button_color : "#ccc", 
    error_background_color : "#fcd6d7", 
    error_text_color : "#C72E2F",
    success_background_color : "#d3efcd",
    success_text_color : "#1B9500" 
    } 
        }) ;
   </script>

4. Cliquez sur Enregistrer. Vous avez maintenant ajouté le bouton Klaviyo en stock à votre boutique.
   

Personnalisez votre formulaire et votre bouton

Le bouton et le formulaire Klaviyo "Notify Me When Available" sont hautement configurables. Vous pouvez modifier les couleurs, les polices, le texte et d'autres éléments en fonction de vos préférences en matière de conception.

Les valeurs par défaut incluses dans l'extrait ci-dessus sont énumérées et expliquées ci-dessous. Si vous effectuez des mises à jour, veillez à mettre à jour la valeur et non l'étiquette elle-même.

Paramètres de déclenchement

Le déclencheur est le bouton qui s'affiche lorsqu'un article n'est plus en stock. Ce bouton indiquera, par défaut, "Notify me when available", mais peut être configuré pour indiquer ce que vous souhaitez. Le code par défaut du déclencheur est le suivant :

déclencher : {
    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
  Texte affiché à l'intérieur du bouton qui s'affiche lorsqu'un article n'est plus en stock.
• product_page_class
  Cette classe "" détermine l'aspect du bouton ; la valeur par défaut "button" garantit que ce bouton correspond aux autres boutons de base de votre thème.
• product_page_text_align
  L'alignement du texte à l'intérieur du bouton de retour en stock (par ex. centre, droite ou gauche).
• product_page_margin
  Marge ajoutée autour du bouton, entre le texte et le bouton.
• alternate_anchor
  Si votre thème utilise un élément autre qu'un bouton "Add to Cart", remplacez ce texte par l'ID de l'élément.
• replace_anchor
  Si cette option est réglée sur false, vous verrez à la fois un bouton "Sold Out" et un bouton "Notify Me When Available". Lorsque cette option est activée, le bouton "Notify Me When Available" remplace le bouton "Sold Out".

Paramètres modaux

La fenêtre modale est la boîte de message qui s'affiche lorsque quelqu'un clique sur le bouton pour être informé du réapprovisionnement d'un article. Il s'agit des paramètres par défaut que vous pouvez ajuster :

• headline
  Le titre qui apparaît en haut de la fenêtre contextuelle ; par défaut, nous remplissons dynamiquement le titre avec le nom du produit en utilisant la variable {product_name} de BigCommerce.
• body_content
  Texte apparaissant dans la fenêtre contextuelle pour indiquer au client ce qu'il doit faire. 
• email_field_label
  Texte de remplacement dans le champ Email.
• button_label
  Texte contenu dans le bouton "submit" de ce formulaire popup.
• subscription_success_label
  Le message de succès "" qui apparaît en vert lorsque quelqu'un soumet avec succès le formulaire popup.
• footer_content
  (facultatif) Texte qui apparaîtra dans le pied de page, sous le bouton d'envoi close_label : "Fermer".
• background_color
  Couleur d'arrière-plan du formulaire popup ; la couleur par défaut est le blanc.
• text_color
  Couleur du texte de la fenêtre contextuelle ; la couleur par défaut est le noir.
• button_text_color
  Couleur du texte du bouton dans le formulaire popup ; la couleur par défaut est le blanc.
• button_background_color
  Couleur d'arrière-plan du bouton de soumission du formulaire ; la couleur par défaut est le bleu.
• error_background_color
  Couleur d'arrière-plan de la boîte d'erreur qui s'affiche en cas d'erreur lors de la soumission du formulaire ; la couleur par défaut est le rouge pâle.
• error_text_color
  Couleur du texte du message d'erreur qui s'affiche en cas d'erreur lors de l'envoi du formulaire ; la couleur par défaut est le rouge.
• success_background_color
  Couleur d'arrière-plan de la boîte de réussite qui s'affiche lorsque quelqu'un soumet le formulaire avec succès ; la valeur par défaut est le vert pâle.
• success_text_color
  Couleur du texte du message de réussite qui s'affiche lorsque quelqu'un soumet le formulaire avec succès ; la couleur par défaut est le vert.

Inviter les clients à participer à des campagnes de marketing

Lorsqu'une personne s'inscrit à une alerte de retour en stock, cela ne signifie pas nécessairement qu'elle s'attend à être inscrite à votre liste principale de lettres d'information.

Si les acheteurs demandent à être alertés lorsqu'un article est réapprovisionné, mais qu'ils commencent ensuite à recevoir régulièrement du contenu marketing de votre part, il est probable qu'ils se désabonneront. Dans ce cas, vous perdez la possibilité de transformer ces acheteurs en clients fidèles parce qu'ils se désinscrivent rapidement après avoir reçu des e-mails dont ils n'ont jamais indiqué qu'ils les voulaient.

Pour capturer les personnes qui souhaitent recevoir des e-mails de marketing de votre part, vous pouvez ajouter une case à cocher comme celle-ci à votre formulaire de retour en stock :

Pour mettre cela en œuvre, vous devrez faire un premier ajout à votre snippet en ajoutant votre ID de liste dans le fichier "klaviyo.init" après votre numéro de compte.

1. La section "klaviyo.init" ressemblera à ceci :

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

2. Remplacez YOUR_LIST_ID par l'ID à six caractères de la liste Klaviyo à laquelle vous souhaitez ajouter ces abonnés. En règle générale, il s'agit de votre liste de diffusion principale.
3. L'extrait avec cet ajout (voir ligne 5) se présentera comme suit :

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

4. Si vous souhaitez personnaliser le contenu de la case à cocher, vous pouvez ajouter le texte que vous souhaitez afficher dans la section "modal".

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

   Par défaut, cette case à cocher indiquera : "Ajoutez-moi à votre liste de diffusion." Veillez à ce que ce texte soit très clair afin que les personnes qui s'inscrivent sachent qu'elles commenceront à recevoir des e-mails de marketing de votre part.

5. Si vous souhaitez contrôler si cette case est cochée ou non, vous pouvez ajouter "subscribe_checked" comme paramètre à la section "modal". True cochera la case par défaut, tandis que false ne la cochera pas et demandera à l'utilisateur de la sélectionner manuellement.

   modal : {
       subscribe_checked: true
           ...
       }

Résultats

Vous avez maintenant installé la fonction de retour en stock de Klaviyo sur votre boutique BigCommerce. 

Ressources complémentaires

• Démarrer avec BigCommerce
• Comment créer un événement Added to Cart pour BigCommerce ?