Afficher du contenu sur votre page de statut de commande en fonction de critères

Attention

Il s’agit d’un tutoriel avancé, qui n’est pas pris en charge par Shopify. La connaissance des langages de design web tels que HTML, CSS, JavaScript et Liquid est requise. Nous vous suggérons d’engager un(e) Partenaire Shopify si vous n’êtes pas à l’aise avec le tutoriel suivant.

Remarque

Les scripts supplémentaires permettant de personnaliser la page de statut de commande sont obsolètes.

Les marchands ayant souscrit aux forfaits Basic, Shopify et Advanced peuvent personnaliser la page de statut de commande à l’aide de l’éditeur de paiement et de comptes. Les marchands Shopify Plus peuvent utiliser Checkout Extensibility pour personnaliser leur page de statut de commande.

Vous pouvez afficher du contenu sur votre page de statut de commande en fonction des critères suivants :

• les emplacements de vos clients
• une commande pour un produit particulier
• un mode d’expédition

Afficher du contenu en fonction des emplacements des clients

À la page de statut des commandes, vous pouvez ajouter un message personnalisé à afficher uniquement pour les clients dont les adresses d’expédition se situent dans une certaine région. Par exemple, vous pouvez choisir de présenter un message uniquement aux clients résidant dans l’État de New York (États-Unis). Vous pouvez spécifier autant d’emplacements que vous le souhaitez.

Étapes :

Bureau

1. Depuis votre interface administrateur Shopify, allez Settings (Paramètres) > Checkout (Passage à la caisse).
2. Dans la zone de texte Scripts supplémentaires, collez l'exemple de code suivant :

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifiez le code pour préciser où les clients doivent se trouver pour recevoir le message personnalisé. Pour ce faire, vous devez modifier les abréviations de pays et d’État dans l’énoncé Liquid {% if %} en haut du bloc de code. Le message donné en exemple ci-dessus est configuré pour être présenté aux clients résidant dans l’État de New York, aux États-Unis.

   • Pour présenter le message aux clients résidant dans un État différent, remplacez NY par l’abréviation de l’État de votre choix. Pour trouver l’abréviation postale à utiliser pour un État américain, vous pouvez consulter cette liste d’abréviations d’États d’USPS.
   • Pour présenter le message aux clients de l’État de New York ainsi que d’un autre État, ajoutez and checkout.shipping_address.province_code == 'XX' où XX est l’abréviation de l’État de votre choix. Pour ajouter d’autres États, répétez cette étape.
   • Pour présenter le message aux clients résidant dans un pays différent, remplacez US par l’abréviation du pays de votre choix. Vous devez également remplacer NY par l’abréviation d’un État ou d’une province dans le nouveau pays. Si vous préférez ne pas spécifier d’État, supprimez l’élément suivant : and checkout.shipping_address.province_code == 'NY'.
   • Pour plus d'informations sur la rédaction d'énoncés Liquid if, voir la référence Liquid sur les balises de contrôle de flux.

2. Placez une commande test pour afficher les résultats sur la page de statut de commande.

iPhone

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Dans la zone de texte Scripts supplémentaires, collez l'exemple de code suivant :

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifiez le code pour préciser où les clients doivent se trouver pour recevoir le message personnalisé. Pour ce faire, vous devez modifier les abréviations de pays et d’État dans l’énoncé Liquid {% if %} en haut du bloc de code. Le message donné en exemple ci-dessus est configuré pour être présenté aux clients résidant dans l’État de New York, aux États-Unis.

   • Pour présenter le message aux clients résidant dans un État différent, remplacez NY par l’abréviation de l’État de votre choix. Pour trouver l’abréviation postale à utiliser pour un État américain, vous pouvez consulter cette liste d’abréviations d’États d’USPS.
   • Pour présenter le message aux clients de l’État de New York ainsi que d’un autre État, ajoutez and checkout.shipping_address.province_code == 'XX' où XX est l’abréviation de l’État de votre choix. Pour ajouter d’autres États, répétez cette étape.
   • Pour présenter le message aux clients résidant dans un pays différent, remplacez US par l’abréviation du pays de votre choix. Vous devez également remplacer NY par l’abréviation d’un État ou d’une province dans le nouveau pays. Si vous préférez ne pas spécifier d’État, supprimez l’élément suivant : and checkout.shipping_address.province_code == 'NY'.
   • Pour plus d'informations sur la rédaction d'énoncés Liquid if, voir la référence Liquid sur les balises de contrôle de flux.

2. Placez une commande test pour afficher les résultats sur la page de statut de commande.

Android

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Dans la zone de texte Scripts supplémentaires, collez l'exemple de code suivant :

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifiez le code pour préciser où les clients doivent se trouver pour recevoir le message personnalisé. Pour ce faire, vous devez modifier les abréviations de pays et d’État dans l’énoncé Liquid {% if %} en haut du bloc de code. Le message donné en exemple ci-dessus est configuré pour être présenté aux clients résidant dans l’État de New York, aux États-Unis.

   • Pour présenter le message aux clients résidant dans un État différent, remplacez NY par l’abréviation de l’État de votre choix. Pour trouver l’abréviation postale à utiliser pour un État américain, vous pouvez consulter cette liste d’abréviations d’États d’USPS.
   • Pour présenter le message aux clients de l’État de New York ainsi que d’un autre État, ajoutez and checkout.shipping_address.province_code == 'XX' où XX est l’abréviation de l’État de votre choix. Pour ajouter d’autres États, répétez cette étape.
   • Pour présenter le message aux clients résidant dans un pays différent, remplacez US par l’abréviation du pays de votre choix. Vous devez également remplacer NY par l’abréviation d’un État ou d’une province dans le nouveau pays. Si vous préférez ne pas spécifier d’État, supprimez l’élément suivant : and checkout.shipping_address.province_code == 'NY'.
   • Pour plus d'informations sur la rédaction d'énoncés Liquid if, voir la référence Liquid sur les balises de contrôle de flux.

2. Placez une commande test pour afficher les résultats sur la page de statut de commande.

Afficher du contenu en fonction d’une commande pour un produit en particulier

Découvrez comment parcourir vos checkout.line_items pour voir si votre produit spécial figure dans la commande.

Étapes :

Bureau

1. Depuis votre interface administrateur Shopify, allez Settings (Paramètres) > Checkout (Passage à la caisse).
2. Faites défiler jusqu'à la section Scripts supplémentaires.
3. Copiez le code suivant dans votre presse-papiers (command + c sur un Mac, ctrl + c sur un PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Collez le code dans la zone Scripts supplémentaires. (appuyez sur ctrl + V sur un PC ou command + V sur un Mac)
2. Passez une commande test pour afficher la page de statut de votre commande.

iPhone

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Faites défiler jusqu'à la section Scripts supplémentaires.
4. Copiez le code suivant dans votre presse-papiers (command + c sur un Mac, ctrl + c sur un PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Collez le code dans la zone Scripts supplémentaires. (appuyez sur ctrl + V sur un PC ou command + V sur un Mac)
2. Passez une commande test pour afficher la page de statut de votre commande.

Android

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Faites défiler jusqu'à la section Scripts supplémentaires.
4. Copiez le code suivant dans votre presse-papiers (command + c sur un Mac, ctrl + c sur un PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Collez le code dans la zone Scripts supplémentaires. (appuyez sur ctrl + V sur un PC ou command + V sur un Mac)
2. Passez une commande test pour afficher la page de statut de votre commande.

Afficher du contenu en fonction du mode d’expédition

Vous pouvez utiliser un script conditionnel avec la variable checkout.shipping_method.title pour afficher le contenu sur la page du statut de la commande lorsqu’un mode d’expédition particulier a été utilisé pour une commande.

Par exemple, vous pouvez avoir une option de retrait en magasin pour la clientèle qui vit à proximité de votre magasin physique. Vous pouvez lui fournir l’adresse de votre magasin sur la page du statut de commande si elle sélectionne l’option de retrait en magasin.

Étapes :

Bureau

1. Depuis votre interface administrateur Shopify, allez Settings (Paramètres) > Checkout (Passage à la caisse).
2. Faites défiler jusqu'à la section Scripts supplémentaires.
3. Copiez le code suivant dans votre presse-papiers (commande + c sur un Mac, ctrl + c sur un PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Collez le code dans la zone Scripts supplémentaires. (commande + v sur un Mac, ctrl + v sur un PC)
2. Passez une commande test pour afficher la page de statut de votre commande.

iPhone

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Faites défiler jusqu'à la section Scripts supplémentaires.
4. Copiez le code suivant dans votre presse-papiers (commande + c sur un Mac, ctrl + c sur un PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Collez le code dans la zone Scripts supplémentaires. (commande + v sur un Mac, ctrl + v sur un PC)
2. Passez une commande test pour afficher la page de statut de votre commande.

Android

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Sous Paramètres de la boutique, appuyez sur Paiement.
3. Faites défiler jusqu'à la section Scripts supplémentaires.
4. Copiez le code suivant dans votre presse-papiers (commande + c sur un Mac, ctrl + c sur un PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Collez le code dans la zone Scripts supplémentaires. (commande + v sur un Mac, ctrl + v sur un PC)
2. Passez une commande test pour afficher la page de statut de votre commande.