Mettre à jour le passage à la caisse en ligne

Vous pouvez personnaliser votre paiement en ligne pour étendre votre marque, modifier la messagerie, proposer des offres et apporter d'autres améliorations à l'expérience de vos clients. Pour vous assurer que vos personnalisations sont compatibles avec les modifications en cours apportées par Shopify, vous devez mettre à jour votre commande régulièrement.

Pour préparer cette mise à niveau, vous devez effectuer ce qui suit :

  1. Affichez un aperçu du nouveau passage à la caisse et testez-en l'interface client. En fonction des personnalisations que vous aurez apportées à votre passage à la caisse, vous devrez peut-être modifier votre fichier checkout.liquid avant de procéder à la mise à niveau.
  2. Une fois satisfait(e) de vos modifications, mettez à niveau votre boutique de manière à utiliser le nouveau passage à la caisse de Shopify.

Prévisualiser votre passage à la caisse pour vérifier d'éventuelles erreurs

Avant de mettre à niveau votre boutique pour utiliser la nouvelle version du passage à la caisse, affichez un aperçu des modifications.

Aperçu du passage à la caisse

Faites comme si vous étiez un client et effectuez des essais de passage à la caisse. Si des erreurs se produisent lors de ces tests, cela signifie que certaines des personnalisations que vous avez apportées à votre passage à la caisse ne sont pas compatibles avec d'autres améliorations de la nouvelle version. Dans ce cas, vous devez modifier votre fichier checkout.liquid avant de procéder à la mise à niveau.

Résoudre les erreurs

Étapes :

  1. Depuis l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Cliquez sur Actions, puis sur Dupliquer.
  3. Dans Plus de thèmes, recherchez votre thème dupliqué, puis cliquez sur Actions > Modifier le code. Effectuez vos modifications, puis testez-les en utilisant cette version dupliquée et non publiée de votre thème.
  1. Ouvrez le fichier checkout.liquid.

  2. Affichez un aperçu du fichier checkout.liquid depuis votre thème dupliqué avec le nouveau passage à la caisse Shopify :

    1. Accédez à la page Mise à niveau de la caisse de votre interface administrateur Shopify, cliquez sur Aperçu du passage à la caisse, puis choisissez le thème dupliqué.
    2. Terminez les commandes test dans l'aperçu.

Si l'apparence visuelle de votre passage à la caisse présente des erreurs ou des problèmes, vous devez modifier votre fichier checkout.liquid pour y remédier.

Passer au nouveau passage à la caisse de Shopify

La mise à niveau de votre passage à la caisse est un processus en deux étapes, qui vous oblige à mettre à niveau le passage à la caisse de Shopify et à remplacer le thème publié actuel par sa copie dupliquée contenant vos modifications.

Choisissez une heure de mise à jour plus lente (par exemple tôt le matin, tard le soir ou le week-end) pour minimiser les interruptions potentielles.

Étapes :

  1. À la page Mise à niveau du passage à la caisse, cliquez sur Mettre à niveau le passage à la caisse (ce bouton se trouve au bas de la page).

  2. Si vous avez trouvé des erreurs dans le premier aperçu de votre thème, vérifiez d’abord qu’elles ont été corrigées (voir Résolution d’erreurs ci-dessus). Ensuite, publiez votre thème dupliqué mis à jour :

    1. Depuis votre boutique en ligne, cliquez sur Thèmes.
    2. Recherchez votre thème dupliqué et cliquez sur Action > Publier.

Votre passage à la caisse est mis à niveau et votre thème dupliqué devient votre thème actuel.

Quoi de neuf concernant le passage à la caisse de Shopify ?

La nouvelle version du passage à la caisse de Shopify contient les modifications et les nouvelles fonctionnalités suivantes :

  • Variables Liquid de réduction
  • Arrive sur ordinateur
  • Modification des commandes
  • Améliorations de l’accessibilité
  • Suppression du remplissage
  • Affichage du moyen de paiement
  • Suppression des chaînes de paramètres fictifs
  • Affichage de l’adresse client enregistrée
  • Authentification 3D Secure
  • Modifications supplémentaires de champs JavaScript pour Google Analytics
  • Modifications du code CSS
  • Message d’erreur

Variables Liquid de réduction

Plusieurs nouvelles variables Liquid relatives à l’affichage des réductions ont été introduites tout au long du processus du passage à la caisse. Ces modifications permettent de représenter les réductions automatiques et les réductions basées sur des scripts d’une manière logique pour vos clients.

Tableau des nouvelles variables Liquid
Variable Définition
checkout.cart_level_discount_applications Renvoie un tableau de toutes les applications de réduction spécifiques au panier pour le passage à la caisse.
line_item.discount_allocations Renvoie une liste de toutes les attributions de réductions contenant le montant de la réduction et la référence à l'application initiale de la réduction. line_item.discount_allocations est disponible sur les rubriques dans les paniers, les passages à la caisse, les commandes et les commandes préliminaires.
line_item.final_line_price Renvoie le prix combiné de tous les articles de la rubrique. Cette valeur est égale à line_item.final_price multiplié par line_item.quantity.
line_item.final_price Renvoie le prix de la rubrique, y compris tous les montants des réductions au niveau de la rubrique.
line_item.line_level_discount_allocations Renvoie une liste des attributions de réductions selon la rubrique, contenant le montant de la réduction et la référence à l'application initiale de la réduction. line_item.line_level_discount_allocations est disponible sur les rubriques dans les paniers, les passages à la caisse, les commandes et les commandes préliminaires.
line_item.total_discount Renvoie le montant total de toutes les réductions appliquées à la rubrique. Cet attribut n'a de valeur que si vous utilisez l’application Script Editor.

Arrive sur ordinateur

Un champ de numéro de téléphone dédié a été ajouté à la page de statut de la commande. Les clients sont invités à saisir un numéro de téléphone mobile pour recevoir des notifications d’expédition par texto. Ces textos incluent également un lien vers l'application Arrive.

Image illustrant l’option permettant de saisir un numéro de téléphone Arrive pour le suivi de la commande

Modification des commandes

Lorsque la modification des commandes sera disponible pour les marchands Shopify Plus, elle permettra de saisir d’autres paiements à régler sur les commandes modifiées avec le passage à la caisse Shopify. Certains changements ont été apportés à la page du passage à la caisse pour que cela fonctionne comme prévu :

  • Le client ne peut pas modifier ses coordonnées, son adresse d’expédition ou son mode d’expédition.
  • Rubriques supplémentaires indiquant le total de la commande et le montant déjà payé.
  • Le texte du bouton Finaliser l'achat change et devient Payer maintenant. Total devient Montant à payer.
  • Au lieu de la navigation avec un fil d'Ariane indiquant à quelle étape de la procédure de paiement il se trouve, le client verra une bannière réductible détaillant des informations supplémentaires sur la commande : - Le montant du paiement supplémentaire.
    • Les produits ajoutés ou supprimés de la commande.
    • Le numéro de commande.

Image illustrant la page du passage à la caisse lorsque des paiements supplémentaires sont nécessaires

Ces modifications entreront en vigueur uniquement lorsqu’une commande est modifiée et nécessite un paiement supplémentaire de la part de votre client.

Si les personnalisations du paiement utilisent la navigation avec un fil d'Ariane pour identifier l’étape en cours dans la procédure de paiement, utilisez plutôt l’objet Shopify.Checkout.step. Consultez la section Identification d'étape pour en savoir plus.

Améliorations de l’accessibilité

Plusieurs modifications ont été apportées au passage à la caisse pour garantir sa conformité aux normes d’accessibilité web. Cela facilite la navigation dans le processus de passage à la caisse pour les clients qui utilisent des outils d’accessibilité, tels que les lecteurs d’écran.

  • Les navigations avec un fil d'Ariane sont maintenant enveloppées dans un élément nav à toutes les étapes du paiement. L’attribut aria-current a été déplacé vers l’élément li à partir de l’élément span.
  • Les résumés de commande résident maintenant dans un élément aside.
  • L'identifiant du champ Code de réduction pour les clients mobiles est passé de checkout_reduction_code à checkout_reduction_code_mobile à toutes les étapes du passage à la caisse.
  • Des attributs d’accessibilité ont été ajoutés à la carte pour les pages Remerciement et Statut de la commande. Les éléments role=region et aria-label de la carte contiennent maintenant l’adresse d’expédition.
  • step et step__section sont des éléments du wrapper qui ont été ajoutés aux pages Statut de la commande, En rupture de stock et Remerciement.
  • Des éléments sémantiques HTML5 ont été introduits dans le processus du passage à la caisse et les attributs de role ont été mis à jour. - Le résumé de la commande se trouve maintenant à l'intérieur d'un élément aside.
    • L'élément div de .main__header est maintenant un élément d’en-tête avec role=banner.
    • L'élément div de .main__content est maintenant un élément principal avec role=main.
    • L'élément div pour .main__footer est maintenant un élément de pied de page avec role=contentinfo.
    • L'élément div de banner est maintenant un en-tête avec role=banner.

Suppression du remplissage

L'espace blanc entre le nom de la boutique et le numéro de commande a été supprimé sur les pages Statut de la commande, En rupture de stock et Remerciement. Ce remplissage supplémentaire a été supprimé de la section div.section.section--page-title.

Affichage du moyen de paiement

Le montant total d’une commande apparaît maintenant aux clients sur la page du statut de la commande dans la section Moyen de paiement.

Image de la page de statut de la commande indiquant le montant total de la commande

Suppression des chaînes de paramètres fictifs

Les champs Paramètre fictif de l'e-mail et Paramètre fictif de l'e-mail ou du téléphone ont été supprimés des options linguistiques dans les paramètres de votre thème. Toutes les modifications nécessaires peuvent être apportées respectivement dans les champs Étiquette de l’e-mail et Étiquette de l'e-mail ou du téléphone. Pour accéder à ces champs, rendez-vous à Boutique en ligne > Thèmes, puis cliquez sur Actions > Modifier les langues > Passage à la caisse et système.

Affichage de l’adresse client enregistrée

La façon dont les adresses enregistrées s'affichent lors du passage à la caisse pour les clients connectés a changé.

Image présentant une liste d’adresses enregistrées

Les options d’adresse s’affichent dans l’ordre suivant :

  1. L’adresse enregistrée par défaut.
  2. Les adresses les plus récemment ajoutées, de la plus récente à la plus ancienne.
  3. La possibilité d’utiliser une nouvelle adresse.

Le menu déroulant affiche un maximum de cinq adresses.

Authentification 3D Secure

La technologie 3D Secure offre un niveau de sécurité supplémentaire que les clients doivent franchir avant de pouvoir finaliser leur achat. Elle alimente des services tels que Vérifié par Visa, MasterCard Identity Check ou American Express SafeKey. Lors du passage à la caisse, certains clients peuvent être redirigés vers le portail de leur banque pour procéder à une authentification supplémentaire. Pour en savoir plus, consultez la section Comprendre la Directive révisée sur les services de paiement (PSD2) et l'authentification forte du client (AFC).

Les marchands situés dans l’Espace économique européen (EEE) peuvent utiliser Cardinal pour offrir des passages à la caisse équipés de 3D Secure. Reportez-vous à la section 3D Secure avec Cardinal pour en savoir plus.

La décision d'exiger une vérification supplémentaire des passages à la caisse appartient à la banque et n'est pas contrôlable par le biais de l’interface administrateur Shopify. Aucune action n’est requise pour activer cette modification.

Modifications supplémentaires de champs JavaScript pour Google Analytics

Le code JavaScript saisi dans la section JavaScript supplémentaire pour Google Analytics de votre interface administrateur Shopify sous Boutique en ligne > Préférences est ajouté au passage à la caisse en tant que balise iframe non visible. Cela n’affecte pas le JavaScript utilisé à des fins d’analyses de données, mais cela empêche d’apporter d'autres modifications au passage à la caisse. Si vous souhaitez ajouter du code JavaScript personnalisé à votre passage à la caisse pour d’autres raisons, ajoutez-le directement au fichier checkout.liquid.

Modifications du code CSS

heading-* et text-container sont des classes CSS qui ont été ajoutées à toutes les étapes de passage à la caisse.

Message d’erreur

Une bannière d’erreur a été ajoutée, qui informe les clients lorsque le moyen de paiement qu'ils ont choisi pour leur passage à la caisse express n’est pas disponible. Cette bannière apparaît en haut de l’étape Coordonnées du passage à la caisse.

Image

La bannière d’erreur qui informe les clients qu’un tarif d’expédition précédent n’est plus valide a été déplacée. Elle s'affiche désormais directement au-dessus des options d’expédition disponibles.

Image

Liens connexes

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement