Mettre à jour le passage à la caisse en ligne

Cette page a été imprimée le Mar 22, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/checkout-settings/checkout-upgrade.

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 de la nouvelle page de paiement et testez votre interface client. En fonction des personnalisations que vous aurez apportées à votre paiement, 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.

Étapes :

  1. Depuis votre interface administrateur Shopify, accédez à la page de mise à niveau de la procédure de paiement, puis cliquez sur Aperçu du paiement.
  2. Sélectionnez votre thème actuel dans la liste, puis cliquez sur Aperçu.
  3. Testez la procédure de paiement en tant que client.

Si vous rencontrez des erreurs lors de ces tests, il se peut que certaines des personnalisations que vous avez effectuées sur la page de paiement soient incompatibles avec les améliorations de la nouvelle version. Dans ce cas, vous devez apporter quelques modifications à votre fichier checkout.liquid avant de procéder à la mise à niveau.

Résoudre les erreurs

Étapes :

  1. Dans votre 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 la nouvelle page de paiement Shopify :

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

Passer à la nouvelle page de paiement 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 :

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 :

Abonnements

Plusieurs sections ont été ajoutées à la page de paiement Shopify afin que vous puissiez proposer des produits par abonnement tout en conservant vos personnalisations de paiement. Ces sections vous permettront de vendre des produits par abonnement et de traiter les paiements récurrents directement à la page de paiement Shopify.

Après avoir terminé la mise à niveau de la page de paiement, vous pouvez proposer des abonnements en ajoutant une application d’abonnement provenant de l'App Store de Shopify ou en créant une application personnalisée avec de nouvelles API d’abonnement.

Pour en savoir plus sur les abonnements, consultez le Centre d’aide Shopify.

  • Lorsque les abonnements sont activés, les modes d’expédition disponibles pour les abonnements sont affichés séparément de ceux des achats uniques.
  • .product_description_variant Span.product_description_selling_plan apparaît comme une propriété de rubrique supplémentaire en cas d’abonnement associé au produit.
  • Un total récurrent avec une info-bulle apparaît sous le total dans le récapitulatif de la commande.
  • Les options d’expédition pour les abonnements s’affichent lorsqu’un produit par abonnement est inclus à la commande.

Vente incitative

Les nouvelles applications de vente incitative après achat sont disponibles dans l'App Store de Shopify. Celles-ci présentent des offres post-achat à vos clients directement sur la page de paiement Shopify et modifient leurs commandes finalisées afin d’y inclure les produits vendus sans resaisir les informations de facturation ou d’expédition.

Cette mise à niveau de la page de paiement inclut les modifications apportées à vos fichiers de paiement. Cela rend possible les ventes incitatives après achat sur votre page de paiement personnalisée.

En savoir plus sur la vente incitative après achat.

  • Lorsqu’une application valide après achat valide est installée dans l’interface administrateur Shopify, les clients reçoivent des offres après achat.

Remarque La page de vente après achat peut être personnalisée dans l’application de vente incitative tierce. Elle ne peut pas être personnalisé avec checkout.liquid.

Pourboires à la page de paiement

Les options de pourboire peuvent être utilisées pour permettre aux clients d’ajouter un pourboire à leur commande en ligne ou de recueillir des dons au lieu de pourboires. Lorsque les options de pourboire sont activées, une section Ajouter un pourboire apparaît à l’étape du moyen de paiement de la page de paiement. La section Ajouter un pourboire comprend trois options de pourboire présélectionnées en plus d’un champ permettant de saisir un montant de pourboire personnalisé.

En savoir plus sur les options de pourboire.

  • Lorsque les options de pourboire sont activées, une section Ajouter un pourboire apparaît à l’étape du moyen de paiement de la page de paiement.

Retrait et livraison sur place

Le retrait en magasin et la livraison locale sont de nouveaux modes de livraison, qui permettent aux clients de recevoir leurs commandes localement. Lorsque ces modes sont activés, les clients peuvent sélectionner le retrait en magasin ou la livraison locale à l’étape d’expédition de la page de paiement.

En savoir plus sur l'activation du retrait en magasin et de la livraison locale.

  • Des champs supplémentaires pour la livraison locale apparaissent lorsque le client active et sélectionne ce mode.
  • Si le retrait en magasin est activé, la section du mode de livraison s'affiche pour le client à la page des informations du processus de paiement. Si l’expédition n’est pas disponible, seules les informations de retrait s’affichent.

  • Les modes de livraison s’affichent sous la forme d'onglets distincts.

    • Après avoir sélectionné l'option Expédier, les clients sont invités à saisir leurs informations d’expédition. Lorsqu'ils cliquent sur Continuer vers l'expédition, les modes d’expédition disponibles s'affichent.
    • Lorsque les clients sélectionnent Service de retrait, une liste de centres de retrait s'affiche. Les clients cliquent sur la case d’option correspondant au centre de retrait désiré, puis sur Continuer vers le paiement.

  • Si les clients choisissent Retrait à l’étape d’expédition de la page de paiement, les informations d’expédition ne sont pas collectées. Les clients doivent saisir les informations de facturation à l’étape de paiement de la page de paiement.

  • Les instructions pour la livraison locale s'affichent à la page de statut de la commande. Celles-ci peuvent être modifiées en allant dans l’interface administrateur Shopify sous Paramètres > Expédition et livraison. Dans la section Retrait en magasin, cherchez le centre de retrait que vous souhaitez modifier, puis cliquez sur Gérer.

  • La page de statut de la commande a été mise à jour pour indiquer les progrès des livraisons et des retraits. Les messages sont affichés lorsque :

    • une commande a été préparée et est prête à être livrée ;
    • une livraison a été effectuée. Ce message fournit également un lien pour réorganiser les mêmes articles ;
    • une commande avec retrait a été confirmée, indiquant que le client recevra un e-mail dès qu’elle sera prête à être retirée ;
    • une commande avec retrait est prête à être ramassée ;
    • une commande avec retrait a été ramassée.

Champs internationaux supplémentaires

Certains pays disposent de réglementations d’expédition uniques auxquelles vous devrez vous conformer pour que vos envois parviennent à vos clients. D’autres champs sont maintenant disponibles pour les pays ayant des réglementations d’expédition uniques. Ces nouveaux champs apparaissent à l’étape du moyen de paiement de la page de paiement.

En savoir plus sur les champs internationaux supplémentaires.

  • Les champs de passage à la caisse supplémentaires ne s’affichent que pour les clients situés au Brésil, en Corée du Sud, en Italie et en Chine.

Suivre une commande avec le bouton Shop

Le bouton Suivre une commande avec Shop sur le statut de la commande et sur les pages de remerciements a été mis à jour et relooké.

En savoir plus sur l’application Shop.

  • Un bouton de texte a été ajouté, qui incite les clients à suivre leur achat sur l’application Shop.
  • Des paramètres ont été ajoutés pour afficher le suivi avec Shop Pay.
  • Rendu pour le bouton Suivre une commande avec Shop pour les cas suivants :
    • tentative de livraison
    • confirmation
    • livré
    • Échoué
    • en transit
    • non livrable
    • en cours de livraison

Mise à jour de la page de statut d'une commande

Plusieurs mises à jour ont été effectuées sur la page de statut de la commande.

  • Une section dédiée où saisir les informations des cartes-cadeaux a été créée et s'affiche à l'achat d’une carte-cadeau.
  • Les informations d’abonnement ont été ajoutées.
  • La classe icon-svg--align-text-bottom a été supprimée.
  • data-step="thank-you" a été remplacé par data-step="thank_you". Si vous utilisez cet attribut pour identifier la page du paiement sur laquelle le client se trouve, utilisez plutôt l’objet JavaScript Shopify.Checkout.page.
  • Une carte de statut de commande a été ajoutée.

Modifications apportées aux fichiers généraux

  • div.content-box__row a maintenant role="table".
  • Si le client en est à l’étape de remerciement et possède le lot QR, show_qr.js est ajouté.
  • Un chèque a été ajouté pour s’assurer que le client a accès à la page de paiement.
  • Les cartes-cadeaux sont maintenant affichées avec checkouts/order_status/gift_cards.
  • La directive sur les coordonnées a été corrigée avec enforce_content_directionality.
  • Les informations d’expédition ont été déplacées vers checkouts/web/checkouts/contact_information/pickup.
  • L’affichage de plusieurs lignes d’expédition dans la barre latérale du récapitulatif de la commande est maintenant pris en charge.
  • tr.total-line s’affichera uniquement si les totaux sont mis à jour.
  • Les lignes de paiement génériques sont maintenant prises en charge.
  • Le changement de devise à la page de paiement est maintenant pris en charge.

  • #payment-gateway-subfields a maintenant des classes :

    • .radio-wrapper content-box__row .content-box__row--secondary
    • .card-fields-container

  • L’info-bulle de la carte de crédit a été ajustée et est maintenant en div.field__icon.

  • L’étiquette Aria a été supprimée de la description complète des frais d’expédition.

  • Les champs du formulaire des tarifs d’expédition ont été transférés vers checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Structures/États de chargement

Les états de chargement des pages de paiement ont été mis à jour, avec l'ajout de structures visibles lors du chargement de la page ou de la dissimulation sélective de certains éléments jusqu’à ce que le chargement soit terminé. Ces modifications optimisent les temps de chargement.

  • Objets cachés lors du chargement :

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • Objets présentant une structure lors du chargement :

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

Message d’erreur

La nouvelle erreur de messagerie a été ajoutée à la page de paiement.

  • Un avertissement portant un numéro civique a été ajouté au champ d'adresse.
  • Un avertissement indiquant qu’aucun tarif d’expédition n’est disponible pour un panier, une destination ou un pays a été divisé en deux messages d’avertissement distincts : un message indiquant qu’il n’y a pas de tarifs disponibles pour un panier ou une destination, et un autre avertissement indiquant qu’aucun tarif n'est disponible pour un pays.
  • Une bannière d’avertissement a été ajoutée à la page de paiement lorsqu'un achat est effectué dans une boutique de développement.
  • Un avis a été ajouté, qui apparaît lorsque le client n'est pas facturé à la page de paiement.
  • Une bannière d’avertissement a été ajoutée pour indiquer une erreur de modification d’authentification.
  • Un message d’erreur a été ajouté pour indiquer que des modes d’expédition ne sont pas disponibles à l’étape d’expédition de la page de paiement.

Modifications d’attributs de données

Trekkie a été supprimé des objets suivants :

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • Champs de saisie de la page de paiement :
    • {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

Améliorations de l’accessibilité

Plusieurs modifications ont été apportées sur la page de paiement 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.

  • Ajout de role="list" sur ul pour les éléments suivants :

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • L’info-bulle a été retirée de aria-labelledby sur telephone_field.

  • Dans Shop, l’étiquette d’entrée a été modifiée pour faire référence au téléphone.

  • Ajout de titres h3 lorsque vous attendez des taxes.

  • Ajout de titres de h3 lors de la redirection.

  • Lors du chargement des modes d’expédition, la balise p a été modifiée et est devenue h3.

  • Autocomplete renvoie maintenant à mobile tel au lieu de phone.

  • div[data-processing-order] mis à jour en ajoutant role="region".

  • div[data-announce-change] mis à jour avec les éléments suivants :

    • ajouté role="region"
    • définir aria-labelledby en fonction de l’id de l’élément d’en-tête
    • définir aria-describedby en fonction de l'id de l’élément conteneur de contenu

  • div.content-box blank-slate mis à jour avec les éléments suivants :

    • ajouté role="region"
    • définir aria-labelledby en fonction de l’id de l’élément d’en-tête

  • La grille de paiement Express a été améliorée pour utiliser les éléments ul et li au lieu de div.

  • Le récapitulatif de la commande a été mis à jour comme suit :

    • clarté améliorée sur le prix promotionnel et le prix normal
    • l'étendue a été remplacée par la balise dl
    • la balise del a été remplacée par les balises dt et dd.

  • Méthodes de paiement mises à jour comme suit :

    • span.radio__label__accessory remplacé par div.radio__label__accessory
    • span.visually-hidden remplacé par h3.visually-hidden
    • span.payment-icon-list__more remplacé par li.payment-icon-list__more
    • span.content-box__small-text remplacé par small.content-box__small-text

Liens connexes

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

Essayez gratuitement