Comment installer Checkout X sur Shopify?

Installer l’application Checkout X sur ta boutique Shopify te permettra de gagner en taux de conversion sur ton Shop. Il s’agit d’une application qui viendra se substituer aux trois pages de passage à la caisse traditionnelles de Shopify.

Au fil du temps, Shopify est devenu de plus en plus restrictif concernant la personnalisation pages de paiement sur les boutiques. En effet il était possible de les modifier grâce à une méthode enseignée sur le blog Conversion Pirate. Cependant ce petit hack a pris fin.

Dans cet article je t’explique comment installer Checkout X, une application qui permet de contourner la restriction de Shopify. Elle propose à tes acheteurs potentiels une expérience de paiement sur une seule page au lieu des trois pages de Shopify.

Edit : Depuis le 1er Janvier 2021 il n’est plus possible pour les boutiques Shopify d’installer des Checkout externes comme Checkout X.

Pourquoi installer Checkout X?

Les inconvénients du passage à la caisse classique de Shopify.

Comme indiqué dans l’introduction, le checkout de Shopify est dispatché sur trois pages différentes. La première page est affichée quand ton visiteur va, depuis son panier, venir cliquer sur le bouton « passage à la caisse » .

Une fois qu’il viendra cliquer sur ce bouton, il se trouvera sur une page où il sera invité à entrer ses coordonnées de livraison (nom, prénom, adresse, adresse mail etc.). Ensuite, quand ces informations seront renseignées, il devra cliquer sur un nouveau bouton afin de choisir son mode de livraison. Une fois ces deux pages passées, il se retrouvera enfin sur la page où il pourra entrer ses coordonnées de paiement afin de régler sa commande.

Comme tu peux le constater, il s’agit d’un processus assez long. Il y a donc un certain temps entre le moment où ton visiteur aura décidé d’acheter en cliquant sur « Ajouter au panier » et le moment où il pourra effectivement le faire en entrant son numéro de carte bleue ou en payant via Paypal.
L’inconvénient est donc qu’il y a beaucoup de friction. Chaque seconde passée sur le checkout et chaque page supplémentaire donne à tes visiteurs une occasion de réfléchir et de remettre en question leur décision d’achat.

Enfin, le checkout de Shopify n’est absolument pas personnalisable. Les seules choses qui peuvent être modifiées sont : la police de caractères, l’intitulé et la couleur des boutons. Mais tu ne pourras en aucun cas ajouter des éléments de réassurance ou encore un timer si tu choisis de rester sur le checkout en trois étapes classique de Shopify.

Les avantages de Checkout X par rapport au passage à la caisse classique de Shopify.

L’application CheckoutX va venir solutionner les problèmes des pages de paiements classiques de Shopify.

D’abord, le processus de paiement ne sera plus étalé sur trois pages différentes mais il sera concentré sur une seule page. Cela va donc venir fluidifier l’expérience d’achat de tes clients.

De plus, l’application dispose de 30% de champs en mois à renseigner avant de passer la commande.

Ce deux éléments viennent déjà diviser par plus de deux le temps que tes visiteurs auront à passer sur ta boutique lors du processus de paiement. Cette durée passe en effet de 66 secondes en moyenne à seulement 25 secondes.

En plus de la rapidité, Checkout X propose également un grand choix dans la personnalisation de la page de paiement. Ainsi, tu pourras facilement intégrer des badges de confiance, ce qui créera de la réassurance au moment du paiement.

Grâce au timer tu pourras aussi créer de l’urgence en indiquant par exemple que les produits du panier sont réservés pour uniquement 10 minutes.

Je pense que maintenant tu te rends bien compte des avantages que tu as à utiliser Checkout X par rapport au checkout de base. Je vais donc te montrer comment l’installer sur ta boutique Shopify.

Checkout X : Installation

Avant, Checkout X était très facile à installer, cependant Shopify a serré la vis cela demande un peu plus de temps. La plupart des autres tutos que vous pourrez trouver sur google sont d’ailleurs obsolètes.

Si tu cherches l’application dans le Shopify App store tu ne le trouvera pas! En effet c’est une application qui demande de telles modifications dans ta boutique qu’elle n’y est pas listée.

Je t’explique comment l’installer de A à Z.

30 jours d’essai sur Checkout X au lieu de 15 jours.

De base, les éditeurs de l’appli proposent une période d’essai de 15 jours. J’ai obtenu pour toi une extension de cette période d’essai pour la ramener 30 jours. Cela te permettra de bien prendre en main l’application et de voir si elle réponds bien à tes attentes.

Pour bénéficier de ces 30 jours il te suffira de passer par ce lien et de cliquer sur le bouton « BEGIN MY 30 DAY TRIAL » .

Créer son compte

Une fois que tu auras cliqué sur le lien tu sera invité à entrer tes informations afin de créer ton compte. Cette page te donne la confirmation que tu vas bien bénéficier des 30 jours d’essai.

Maintenant que ton compte est créé, tu as une page qui t’indique les différents avantages de l’outil. Clique en bas à droite sur le bouton « CONTINUE TO NEXT STEP » .

Intégrer Checkout X à sa boutique Shopify.

Ensuite clique sur la partie droite de ton écran sur le bouton « connect with Shopify » .

A partir de cette étape tu as deux possibilités, soit tu décides de réaliser l’intégration seul (à l’aide de cet article) en quelques minutes, soit tu laisses un membre de l’équipe de checkout X la réaliser pour toi. Si tu choisis la deuxième option cela peut prendre jusqu’à trois jours.

Si tu choisis le première option clique sur le bouton « CONNECT MANUALLY » à gauche. Une fois que tu auras cliqué, tu sera invité à entrer le nom en « .myshopify.com » de ta boutique afin de gérer les autorisations pour la génération d’une clé API. Alors entre ton nom de boutique et clique en bas à droite sur le bouton « CONTINUE TO NEXT STEP » .

Tu seras redirigé sur une page contenant une vidéo où le créateur de Checkout X t’explique ce qui l’a amené à créer l’application. Si tu comprends l’anglais et si ça t’intéresse tu peux regarder la vidéo. Sinon tu peux simplement cliquer de nouveau sur le bouton « CONTINUE TO NEXT STEP » .

Créer une application privée Shopify.

Les choses un peu techniques commencent maintenant. Tu vas devoir créer une application privée pour que permettre à Checkout X d’accéder aux informations nécessaires afin de se substituer à ton checkout de base.

Clique sur le bouton « OPEN SHOPIFY TO CREATE A PRIVATE APP » . Tu seras redirigé vers ton compte Shopify sur la page de création d’une application privée. Clique sur le bouton « Activer le développement d’applications privées » .

Clique sur les trois case d’accord de consentement puis clique à nouveau sur le bouton « Activer le développement d’applications privées » . Enfin sur la nouvelle page clique sur « Créer une application privée » .

Sur cette page tu devras remplir les différentes autorisations pour l’application privée. Ce sont les informations disponibles sur la page Checkout X sur laquelle tu te trouves mais j’ai créé le tableau ci-dessous afin de te récapituler les différents champs en Français.

⚠️Tu ne dois modifier que les champs qui sont indiqués dans le tableau ci dessous.⚠️

Eléments de l’appli privée de Checkout X

Nom de l’application privée : Checkout
E-mail d’urgence du développeur : help@eri.digital

Nom de l’autorisation	Type d’autorisation
Produits (Champs d’accès : read_products, write_products)	Lire l’accès
Thèmes (Champs d’accès : read_themes, write_themes)	Lire et écrire
Expédition (Champs d’accès : read_shipping, write_shipping)	Lire l’accès
Fiches produits (Champs d’accès : read_product_listings, write_product_listings)	Lire l’accès
Règles de tarification (Champs d’accès : read_price_rules, write_price_rules)	Lire l’accès
Commandes (Champs d’accès : read_orders, write_orders)	Lire et écrire
Modification des commandes Champs d’accès : read_order_edits, write_order_edits	Lire et écrire
Stocks (Champs d’accès : read_inventory, write_inventory)	Lire l’accès
Cartes-cadeaux (Champs d’accès : read_gift_cards, write_gift_cards)	Lire l’accès
Demandes de données RGPD (read_gdpr_data_request)	Lire l’accès
Services de traitement des commandes (read_fulfillments, write_fulfillments)	Lire l’accès
Réductions (read_discounts, write_discounts)	Lire l’accès
Clients (Champs d’accès : read_customers, write_customers)	Lire et Ecrire

API Storefront :

Autoriser cette application à accéder aux données de vitrine à l’aide de l’API Storefront : LAISSER CETTE CASE DECOCHEE.

Suite de la création de l’application privée.

Une fois que tu as remplis les différentes autorisations cliques sur le bouton « Enregistrer » en haut à droite de ton écran puis sur le bouton « créer une application » .

Une fois que c’est fait, reviens sur la fenêtre de Checkout X et cliques sur le bouton « continue to next step » en bas à droite.

Copie et colle la clé API qui a été générée lors de la création de l’application privée sur Shopify dans la case « Generated API key from Shopify » .

Ensuite copie le mot de passe généré sur Shopify et viens le coller dans la case « Generated Password from Shopify » .

Enfin fais de même pour le mot de passe partagé que tu viendras coller dans la case « Generated Shared secret from Shopify » .

Une fois que c’est fait, clique sur bouton « Verify App Details » en bas à droite. En cas d’erreur lors de la configuration des autorisations, Checkout X t’indiquera quelles autorisations modifier sur Shopify. Modifie-les et cliques sur « modifier les autorisations » . Ensuite reviens à nouveau sur Checkout X et cliques à nouveau sur « Continue to next step » puis « VERIFY APP DETAILS » .

A partir de là tu peux considérer que la partie la plus « difficile » du tutoriel est passée. Cependant ton installation n’est pas encore terminé.

Implémenter Checkout X sur sa boutique.

Pour remplacer le checkout de base de Shopify visuellement sur ta boutique il faudra suivre ces différentes étapes :

Etape 1 : Ajouter Checkout X au thème de ta boutique.

Pour se faire il te suffit de de cliquer sur le bouton « Add » à côté de « Add Checkout X on your store’s theme » . Une fois que tu auras cliqué, le bouton « Add » disparaitra et tu pourras passer à l’étape suivante.

Etape 2 : Confirmer les modes de livraison de ton passage à la caisse.

Clique sur le bouton « confirm » en face de « Confirm Shipping Rates on your checkout » . Une fois que ce sera fait, Checkout X va se synchroniser avec les différents modes et tarifs de livraison que tu pratiques sur ta boutique.

Clique simplement sur le bouton « Confirm Shipping Rates » pour valider.

Etape 3 : Ajouter les moyens de paiement.

Les principaux moyens de paiement utilisés sont généralement Stripe et Paypal. Clique sur le bouton « Add » à droite de « Add Payment Methods to your checkout » .

Connecter Stripe à Checkout X.

Un menu déroulant avec différents processeurs de paiement va alors s’afficher.

Sélectionne « Stripe – Credit Card » . Deux éléments te seront demandés : ta « Publishable Key » et ta « Secret Key » . Pour les retrouver tu dois te connecter à ton Dashboard Stripe. Une fois connecté, dans la colonne de gauche, clique sur « Développeurs » puis sur « Clés API » . Vérifie bien que tu n’es pas en « mode test » sur Stripe.

La clé publique correspond à la « Publishable Key » et la clé secrète correspond à la « Secret Key » . Tu dois donc copier/coller les éléments de ton compte Stripe vers ton compte Checkout X pour faire l’association.

Une fois que tu as renseigné tes clés, coches les cases « Visa », « MasterCard », « American Express » et « Maestro » .

Dans la case « Custom transaction description » renseigne simplement le nom de ta boutique.

Tu peux maintenant cliquer sur « Save Payment Method » . Une fois l’intégration de Stripe terminée tu peux débuter celle de Paypal si tu proposes également ce mode de paiement sur ton site.

Connecter Paypal à Checkout X.

Clique sur « Payment Method » puis de nouveau sur le bouton « add payment method » .

Dans le menu déroulant sélectionne « Paypal Express » puis entre l’adresse email correspondant à ton compte paypal. Clique sur « Save Payment Method » .

Ca y est ton Paypal est connecté à Checkout X.

Etape 4 : Ajouter tes informations de paiement.

Dans la barre supérieure de l’écran clique sur dashboard. Ensuite, en face de « Add your billing details to begin 14 days free trial » clique sur le bouton « Add » .

Il est indiqué « 14 days free trial » mais pas de panique, c’est bien de 30 jours d’essai dont tu bénéficiera si tu es bien passé par mon lien d’invitation.

Sélectionne le plan de ton choix, celui à 39€ par mois ou celui à 199€ par mois. Entre tes informations de facturation puis cliques sur « Save Details » .

Etape 5 : Publier ton checkout

Une fois tes informations de facturations entrées et validées , clique sur « dashboard » sur la barre supérieure puis sur le bouton « Preview and Publish » et face de « Preview and publish your checkout » .

Tu auras un aperçu de ton checkout. Clique sur « 🚀Publish Checkout » .

Ca y est tu es enfin arrivé au bout de ce tuto ! Je te félicite pour ta détermination. Je te conseille de faire un test d’achat sur ta boutique pour vérifier qu’il soit bien fonctionnel.

Si tu as bien respecté chaque étape de ce tutoriel ça devrait être nickel !

FAQ Checkout X.

Comment connecter mon pixel Facebook à Checkout X?

Sur la barre supérieure clique sur « configuration » ensuite clique sur « Integration » .

Sélectionne « Facebook Ads Pixel » et clique sur la flèche de droite pour faire dérouler la section.

Colle ton pixel facebook dans le champ « FB Pixel ID » puis cliques sur « Save Changes » .

Comment programmer des upsells?

Checkout X te permet de créer des one click Upsells. C’est à dire des ventes additionnelles qui sont proposées après que le client ait entrées ses coordonnées de paiement.

Il suffira donc au client de cliquer sur un bouton pour ajouter le produit que tu vas proposer en upsell pour l’ajouter à sa commande. De quoi catapulter ton panier moyen.

Pour créer tes upsells, dans la barre supérieure clique sur « Upsell » puis sur le bouton « CREATE YOUR FIRST UPSELL » . Choisis le titre de ton upsell, opte pour un titre du style « Profitez de ces articles à prix cassé » .

Dans la partie « Upsell triggers » tu vas devoir sélectionner les produits ou collections qui, une fois achetés par tes clients déclencherons l’apparition de la fenêtre d’upsell.

Dans la partie « Upsell products » tu vas sélectionner le produit que tu proposes en upsell. Une fois que tu as sélectionne ton produit, n’oublie de cliquer sur la flèche verte à droite afin d’indiquer le prix d’origine du produit ainsi que le prix soldé auquel tu le proposes en tant qu’upsell.

Une fois que c’est fait clique sur « SAVE UPSELL » pour sauvegarder.

Comment supprimer Checkout X?

Si Checkout X ne correspond pas à tes attentes tu peux le supprimer cliquant sur « configuration » dans la barre supérieure. Ensuite, dans la section « Store Connection » clique simplement sur « Uninstall Checkout X » .

Des questions supplémentaires?

En cas de questions supplémentaires tu peux cliquer ici et consulter la liste des conseils de Checkout X ou laisser un commentaire sous cet article. Je me ferai un plaisir de t’aider.

Conclusion.

J’espère que cet article t’aura été très utile et que tu as pris de plaisir à le lire que j’en ai eu à l’écrire.

A bientôt et profite bien de tes 30 jours d’essai gratuits pour bien prendre en main et personnaliser Checkout X.