Comment installer le retour en stock pour Shopify

Objectif de cet article

Apprenez à installer la fonctionnalité Klaviyo de retour en stock pour Shopify afin que vos clients puissent s’abonner aux alertes de retour en stock. Cette installation consiste à créer un flux de retour en stock dans Klaviyo et à ajouter un extrait de code personnalisable à votre boutique Shopify.

Avant de commencer

Ressources

Veuillez noter que Klaviyo ne fournit pas d’assistance en matière de codage personnalisé. Si vous avez besoin d’assistance pour le développement, pensez à contacter l’un des partenaires de Klaviyo.

À propos de la fonctionnalité de retour en stock de Klaviyo

La fonctionnalité de retour en stock de Klaviyo pour Shopify se compose de deux éléments clés :

1. Flux de retour en stock
   Lorsqu’une personne s’abonne à une alerte de retour en stock, un événement Subscribed to Back in Stock sera suivi sur son profil Klaviyo. C’est cet événement que vous utiliserez pour déclencher votre flux de retour en stock. Les acheteurs entrent dans le flux lorsqu’ils s’abonnent à un produit et recevront un message lorsque l’article qui les intéresse est à nouveau disponible.
2. Bouton sur le site web
   Vous devrez ajouter un extrait de code à votre thème Shopify pour afficher automatiquement un bouton « Me prévenir lorsque l’article est disponible » lorsque des articles ne sont plus disponibles. Une fois l’extrait de code installé, voici ce qui se passera :
   • Lorsqu’un acheteur consulte un produit qui est en rupture de stock, un bouton « Me prévenir lorsque l’article est disponible » apparaît automatiquement à côté ou en dessous du bouton indiquant que le produit n’est pas disponible.
   • Lorsque quelqu’un clique sur le bouton « Me prévenir », un formulaire s’affiche et permet à l’acheteur de saisir son adresse e-mail pour recevoir une notification lorsque l’article est réapprovisionné.
   • Dès que le formulaire est envoyé, un événement Subscribed to Back In Stock est enregistré sur le profil de l’acheteur dans Klaviyo.

Klaviyo effectue le suivi de votre inventaire au niveau des variantes, ce qui signifie que les acheteurs peuvent s’abonner 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 M, il peut s’abonner à cette variante spécifique et Klaviyo veillera à ce qu’il ne soit averti que lorsque vous aurez réapprovisionné cette taille et cette couleur.

Avant d’installer l’extrait de code

Avant d’installer l’extrait de code conformément aux instructions ci-dessous, procédez comme suit :

• Vérifiez que vous avez activé le tracking sur site de Klaviyo sur votre boutique Shopify (y compris Viewed Product), que ce soit via l’application intégrée de Klaviyo ou manuellement.
• Assurez-vous qu’un bouton d’ajout au panier ou qu’un formulaire de contact sont présents sur votre page produit. Certains thèmes Shopify peuvent supprimer le bouton d’ajout au panier lorsqu’il n’y a pas de stock. Dans ce cas, vérifiez que même en cas de rupture de stock, votre thème Shopify affiche un bouton afin de vous assurer que le code de Klaviyo fonctionnera.

Vidéo sur le retour en stock pour Shopify

Installer l’extrait de code

Ajoutez l’extrait de code ci-dessous à votre fichier theme.liquid. Ces instructions s’appliquent à la fois aux utilisateurs du thème Shopify 2.0 et du thème vintage.

1. Dans l’interface d’administration de Shopify, cliquez sur Online Store > Themes.
2. Cliquez sur le menu déroulant Actions de votre thème et sélectionnez Edit Code.
3. Recherchez le fichier theme.liquid et cliquez dessus pour l’ouvrir dans l’éditeur.
4. Copiez l’extrait JavaScript ci-dessous et collez-le dans votre fichier theme.liquid directement au-dessus du 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: "Inscrivez-vous pour recevoir une notification lorsque cet article sera de nouveau en stock.",
        email_field_label: "Email",
        button_label: "Me prévenir lorsque l’article est disponible",
        subscription_success_label: "C’est bon ! Nous vous préviendrons lorsque cet article sera de nouveau disponible.",
        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. Vous devrez remplacer le texte PUBLIC_API_KEY dans l’extrait de code par votre clé d’API publique Klaviyo. Découvrez comment trouver la clé d’API publique de votre compte. Si vous utilisez plusieurs comptes Klaviyo, assurez-vous que vous utilisez la clé du bon compte. Copiez votre clé et collez-la dans l’extrait de code.
   
6. Vous pouvez vous arrêter ici et enregistrer votre fichier theme.liquid pour utiliser la configuration par défaut. Autrement, découvrez ci-dessous comment personnaliser votre bouton de retour en stock et vos paramètres.

Personnaliser votre formulaire et votre bouton

Le bouton « Me prévenir » et le formulaire de Klaviyo sont très largement configurables. Vous pouvez modifier les couleurs, les polices, le texte et d’autres éléments en fonction de vos préférences de conception.

Les valeurs par défaut incluses dans l’extrait de code ci-dessus sont expliquées plus bas. Si vous effectuez des mises à jour, veillez à mettre à jour la valeur et non le libellé lui-même.

Paramètres du déclencheur

Le déclencheur est le bouton qui s’affiche lorsqu’un article est en rupture de stock. Par défaut, le texte de ce bouton est « Me prévenir », mais vous pouvez le personnaliser. Le code par défaut du déclencheur (dans l’extrait que vous avez copié) est le suivant.

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

Les paramètres sont les suivants :

• product_page_text
  Le texte qui s’affiche à l’intérieur du bouton qui apparaît lorsqu’un article est en rupture de stock.
• product_page_class
  Cette classe détermine l’aspect du bouton. La valeur 'button' par défaut garantit que ce bouton est assorti 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 (centré, droite ou gauche).
• product_page_margin
  La marge ajoutée autour du bouton, entre le texte et le bouton.
• alternate_anchor
  Si votre thème Shopify utilise un élément autre qu’un bouton d'ajout au panier, remplacez ce texte par l’identifiant de l’élément.
• replace_anchor
  Lorsque ce paramètre est défini sur false, vous verrez à la fois un bouton indiquant que le produit est en rupture de stock et un bouton « Me prévenir ». S’il est défini sur true, le bouton « Me prévenir » remplacera le bouton indiquant que le produit est en rupture de stock.

Paramètres de visibilité du déclencheur

Si vous souhaitez choisir les produits pour lesquels le bouton de retour en stock doit s’afficher, vous pouvez inclure les paramètres ci-dessous. Veillez à inclure include_on_tags ou exclude_on_tags, mais pas les deux.

Voici un exemple de la section Klaviyo.init de l’extrait de code avec include_on_tags :

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

• include_on_tags
  Ce tag garantit que le bouton de retour en stock ne s’affiche que sur les articles qui contiennent les tags spécifiés. Dans l’exemple ci-dessus, seuls les produits avec les tags « dog », « cat » ou les deux auront un bouton de retour en stock.
• exclude_on_tags
  Ce tag est l’inverse du précédent. L’utilisation de exclude_on_tags garantit l’affichage du bouton de retour en stock sur tous les produits, sauf sur ceux spécifiés.

Paramètres de la fenêtre modale

La fenêtre modale est le formulaire pop-up qui s’affiche lorsque quelqu’un clique sur le bouton pour être prévenu du retour en stock d’un article.

Voici les paramètres par défaut de l’extrait de code que vous pouvez modifier :

• headline
  Le titre qui apparaît en haut du pop-up. Par défaut, le titre est dynamiquement renseigné sur la base du nom du produit, à l’aide de la variable {product_name} de Shopify.
• body_content
  Le texte qui apparaît à l’intérieur de la fenêtre contextuelle pour indiquer au client ce qu’il doit faire.
• email_field_label
  Le texte de remplissage à l’intérieur du champ Email.
• button_label
  Le texte dans le bouton d’envoi du formulaire pop-up.
• subscription_success_label
  Le message qui apparaît lorsque quelqu’un envoie le formulaire pop-up.
• footer_content
  Le texte facultatif qui apparaît dans le pied de page, sous le bouton d’envoi.
• close_label
  Le texte du bouton de fermeture. La valeur par défaut est « Close ».
• background_color
  La couleur d’arrière-plan du formulaire pop-up. La valeur par défaut est le blanc.
• text_color
  La couleur du texte du formulaire pop-up. La valeur par défaut est le noir.
• button_text_color
  La couleur du texte du bouton du formulaire pop-up. La valeur par défaut est le blanc.
• button_background_color
  La couleur d’arrière-plan du bouton d’envoi du formulaire. La valeur par défaut est le bleu.
• error_background_color
  La couleur d’arrière-plan du message d’erreur qui s’affiche en cas d’erreur lors de l’envoi du formulaire. La valeur par défaut est le rouge pâle.
• error_text_color
  La couleur du texte du message d’erreur qui s’affiche en cas d’erreur lors de l’envoi du formulaire. La valeur par défaut est le rouge.
• success_background_color
  La couleur d’arrière-plan du message de réussite qui s’affiche lorsque quelqu’un envoie le formulaire. La valeur par défaut est le vert pâle.
• success_text_color
  La couleur du texte du message de réussite qui s’affiche lorsque quelqu’un envoie le formulaire. La valeur par défaut est le vert.
• font_family
  Le nom de la famille de polices utilisée pour le formatage de votre texte. Times New Roman est un exemple de famille de polices.
• headers_font_family
  Le nom de la famille de polices utilisée pour le formatage du texte de votre en-tête. Helvetica est un exemple de famille de polices.

Personnaliser l’emplacement du bouton « Me prévenir »

L’extrait de code suivant peut être utilisé pour modifier l’emplacement du bouton « Me prévenir ». Par défaut, le bouton apparaît à côté, en dessous ou à la place du bouton d’ajout au panier ou de rupture de stock. Avec ce code, vous pouvez placer le bouton sous la description, en bas de la page, sous l’image, entre autres. Pour cela, placez l’extrait de code dans votre fichier product.liquid à l’endroit où vous souhaitez que le bouton apparaisse. Veillez à mettre à jour le texte du bouton si vous l’avez remplacé par quelque chose d’autre que « Me prévenir lorsque l’article est disponible ».

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Me prévenir lorsque l’article est disponible</a>

Facultatif

Facultatif : inviter les clients à s’inscrire à des campagnes de marketing

Lorsqu’une personne s’abonne à une alerte de retour en stock, elle ne souhaite pas pour autant s’abonner à votre liste principale de newsletter.

Si les acheteurs demandent à être prévenus lorsqu’un article est à nouveau disponible, mais qu’ils commencent ensuite à recevoir régulièrement du contenu marketing de votre part, il y a de fortes chances qu’ils se désabonnent. Vous perdez ainsi la possibilité de les transformer en clients fidèles, car ils risquent de se désabonner rapidement après avoir reçu des e-mails indésirables.

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

Pour cela, vous devez ajouter votre identifiant de liste dans la section « klaviyo.init » après votre identifiant de compte.

1. La section « klaviyo.init » ressemblera à ceci :

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

2. Remplacez YOUR_LIST_ID par l’identifiant de la liste Klaviyo à laquelle vous souhaitez ajouter des abonnés. En règle générale, il s’agit de votre liste principale de newsletter.
3. Après l’ajout (ligne 5), l’extrait de code sera comme suit :

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

4. Si vous souhaitez personnaliser le contenu de la case à cocher, vous pouvez ajouter le texte de votre choix dans la section « modal ». Par défaut, le texte de la case à cocher est « Add me to your email list ». Assurez-vous que ce texte est clair afin que les personnes qui s’inscrivent sachent qu’elles recevront des e-mails de marketing de votre part.

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

5. Si vous souhaitez cocher ou décocher cette case, vous pouvez ajouter « subscribe_checked » comme paramètre à la section « modal ». True cochera la case par défaut, tandis que false la laissera décochée et demandera à l’utilisateur de la cocher manuellement.

   modal: {
       subscribe_checked: true
           ...
       }

Est-il possible d’utiliser le paramètre « Continue selling when out of stock » de Shopify et le flux de retour en stock de Klaviyo ?

Le flux de retour en stock de Klaviyo détecte tout changement dans vos niveaux de stock, allant de zéro jusqu’à un certain montant fixé par votre règle de stock minimum. L’activation du paramètre Shopify « Continue selling when out of stock » rend le produit disponible à l’achat malgré l’absence de stock, de sorte que le bouton « Me prévenir » n’apparaît pas.

Dans ce scénario, le flux de retour en stock de Klaviyo n’enverra aucun e-mail aux personnes qui se sont abonnées à ce produit puisque le niveau de stock n’a pas changé. Les e-mails de retour en stock ne sont envoyés aux clients qu’une fois que le niveau de stock de votre produit atteint le seuil de votre règle de stock minimum.

De plus, lorsque le paramètre « Continue selling when out of stock » est activé, le produit est considéré comme disponible, de sorte que la fenêtre modale de Klaviyo relative au retour en stock n’apparaît pas pour ce produit, puisqu’il est disponible à l’achat, quel que soit le stock.

Résolution de problèmes

L’apparence du bouton de retour en stock varie en fonction du thème Shopify de votre boutique. Si vous utilisez un thème personnalisé, vous devrez peut-être personnaliser le code de votre thème pour vous assurer que la fonctionnalité de retour en stock fonctionne correctement.

Configurez votre flux

Configurez ensuite votre flux de retour en stock dans Klaviyo, qui se déclenchera chaque fois qu’une personne s’abonnera pour être informée du réapprovisionnement d’un article. 

Tester l’installation du retour en stock

Pour tester le fonctionnement de votre installation de retour en stock, procédez comme suit :

1. Créez un produit test dans votre boutique.
2. Définissez l’inventaire de ce produit sur zéro.
3. Consultez la page du produit pour voir si le bouton « Me prévenir » apparaît.
4. Cliquez sur le bouton « Me prévenir » et remplissez le formulaire.
5. Ajoutez suffisamment d’unités pour répondre aux règles de retour en stock des paramètres de votre compte.
6. Vérifiez que vous recevez le message de retour en stock que vous avez créé.

Résultats

Vous avez maintenant installé la fonctionnalité Klaviyo de retour en stock sur votre boutique Shopify.

Ressources supplémentaires

• Comment personnaliser le style des boutons et des formulaires de retour en stock pour les thèmes Shopify gratuits ?
• Comment configurer le retour en stock via l’API ?