Optimisez votre page de statut de commande Shopify (sans avoir besoin de Shopify Plus !)

La page de statut de commande commandes est la page où vos clients arrivent, au moment où ils complètent leur commande. Sur Shopify, à première vue, cette page n'est pas personnalisable pour les personnes qui ne possèdent pas Shopify Plus. Cependant, dans la section /admin/settings/checkout, vous disposez d'un champ appelé Additionnal scripts :

Ici, vous pouvez ajouter des scripts spécifiques - généralement, c'est aussi là que vous voulez mettre les scripts de suivi de conversion, pour déclencher les conversions Facebook, Adwords, ou le tracking de vos referrals..

Mais vous pouvez aussi ajouter du contenu à la page d'état des commandes !

Il s'agit de la page que les clients verront juste après avoir complété leur commande, et c'est particulièrement intéressant pour plusieurs scénarios : ils sont très engagés envers votre marque à ce moment - et le fait qu'ils aient acheté un produit ne doit être que le début de votre histoire.

Cette page  n'est pas une page de remerciement - c'est une opportunité !

Grâce à ce script, vous pourrez ajouter votre propre boîte sur la page :

<script>Shopify.Checkout.OrderStatus.addContentBox( '<h2>Titre de la boîte</h2>', '<p>Contenu de la boîte</p>' ) </script>

Ce faisant, vous avez accès à plusieurs objets liquid dans cet espace : Checkout et Shop.

Cela peut être utile pour plusieurs scénarios. Par exemple, l'exemple principal d'utilisation de Shopify est basé sur la localisation du client, lui proposant de rediriger le nouveau client vers les points de vente physiques, en se basant sur sa localisation et la variable liquid : checkout.shipping_address.country_code == 'GB'

Afficher un formulaire de satisfaction

Une autre utilisation pourrait être d'envoyer les gens à une enquête de satisfaction juste après leur achat, en suivant leur identité via Typeform (et pourquoi pas leur offrir une récompense à la réponse)

Pour cela, dans Typeform, veillez à utiliser les champs cachés (hidden fields) 😉

Pour le style, nous ajoutons un bouton dans la nouvelle boîte créée, en utilisant des variables disponibles :

• checkout.order.order_name : Numéro de commande, pour tracker de quelle commande vient le commentaire,
• checkout.email : Email du client
• checkout.customer.first_name : Prénom du client
  ‍

<script>
   Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>Bienvenue !</h2>',
    '<p>Nous aimerions beaucoup avoir <a href="https://your.typeform.com/to/xxxx?firstname={{ checkout.customer.first_name }}&email={{ checkout.email }}&code={{ checkout.order.order_name }}">votre avis</a></p><a href="https://your.typeform.com/to/xxxxx?firstname={{ checkout.customer.first_name }}&email={{ checkout.email }}&code={{ checkout.order.order_name }}" style="display: inline-block!important; margin: 1em;padding: 5px 12px !important;min-height: 28px !important;min-width: 120px !important;font-size: 1.06667em;border-radius: 2px;background-color: blue;color: #000;font-weight: 500;font-style: normal;letter-spacing: 0.1em;text-transform: uppercase;line-height: 1.8;text-decoration: none;text-align: center;vertical-align: middle;">C'est parti !</a>'
   )
</script>

En utilisant le même type de script, c'est aussi une excellente façon de les initier à un programme de parrainage, par exemple à la fin du questionnaire ! ✌️

Afficher un message spécial pour un produit en particulier

<script>
 {%for line in checkout.line_items %}
// DEBUG looking at {{ line.title }}
   {%if line.title == 'Title du produit' %}
     Shopify.Checkout.OrderStatus.addContentBox(
       '<p>Vous venez d'acheter Titre du Produit! Génial ! Vous saviez que vous pouviez aussi l'utiliser __________ ? </p>'
     )
   {% endif %}
 {% endfor %}
</script>