Nous allons voir dans ce tutoriel comment créer un bouton direct checkout sur shopify
Afin de minimiser le tunnel de vente nous allons supprimer l’étape du panier. Par conséquent vous allez passer directement à l’étape checkout en cliquant sur le bouton Acheter maintenant.
Je vous conseille donc de renommer dans les traductions le « Ajouter au panier » par « Acheter maintenant ».
Passons directement au tuto
1. Rendez vous sur votre administration et cliquez sur « Boutique en ligne« .
2. Cliquez sur le bouton Actions puis Modifier code.
3. Trouvez le dossier Sections et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient.
4. Trouvez le fichier product-template.liquid ou product.liquid selon le thème et cliquez dessus.
5. Trouvez la partie de code se terminant par </form> ou {% endform %} et copiez/collez le code ci-dessous juste avant (idéalement avant une balise button).
Si vous avez Dropicheckout ou Checkout X vous pouvez essayer ce code mais je ne promets rien 😉
6. Il ne vous reste plus qu’a cliquer sur le bouton « Enregistrer » en haut à droite pour valider vos modifications !
Voila vous avez maintenant raccourci votre tunnel de vente au max 😉
Ce tutoriel existe aussi en vidéo
Bon tuto à tous !
Kévin Badet
28 Nov 2017Bonjour je n’arrive pas à ajouter ce code dans mon thème je ne trouve pas le bon endroit .. si vous pourriez m’aidez .. Merci 🙂
dgeo22
30 Nov 2017Salut, c’est dans sections et le fichier product-template.liquid ou product.liquid ou une fichier avec un from dedans (ctrl + f et rechercher form pour trouver l’endroit)
maxime
8 Juin 2021bonjour, dans la nouvelle version shopify il n’y as plus (form) je ne le trouve pas
Dgeo Dev
9 Juin 2021hello, oui c’est nouveau, il faut chercher le {% form … mnt 🙂
max
8 Déc 2017Bonjour,
Ca ne change absolument rien. Quand je suis sur la page produit et que je clique sur ajout au panier, j’ai juste mon panier qui apparait sur la droite, mais aucun changement de page etc…
Merci de votre retour,
dgeo22
17 Déc 2017Ce système ne fonctionne pas avec le panier sur la droite mais sur un panier de type page
Josh
17 Déc 2017Bonjour, j’ai le thème brooklyn sur mon site et j’ai l’impression que ce ne fonctionne pas pourtant j’ai suivi toute les étapes.
dgeo22
17 Déc 2017Ce système ne fonctionne pas avec le panier sur la droite mais sur un panier de type page
coffin
31 Jan 2018Après avoir suivi tous les tutos…Le Acheter maintenant que j’ai rajouter dans le bas de page, lui, redirige toujours vers le panier…une solution?
Et j’en profite pour demander ou changer la couleur du texte de ce » acheter maintenant » en bas de page qui n’est pas la même que celui » normal » en haut..
merci encore pour tout
cordialement
coffin
1 Fév 2018J’ai rajouté le code de redirection vers le checkout en revanche je n’arrive toujours pas à changer la couleur du texte du bouton..( plus qu’un problème ) 🙂
dgeo22
1 Fév 2018Trouver l’identifiant du bouton son id=… aller dans le theme.scss.liquid ou timber.scss.liquid et reprendre la main dessus #iddubouton et le style que tu veux
dgeo22
1 Fév 2018Salut, ca ne fonctionne que si le thème a un type de panier page et non modal ni en colonne de droite
Emilie
18 Jan 2018Bonjour, qu’est ce que vous appelez par « panier de type page » ?
dgeo22
20 Jan 2018Bonjour, Panier qui s’affiche au format page donc au clic sur ajouter au panier on arrive sur une panier page contrairement à un panier en popup ou qui apparaît sur le côté droit
Emilie
22 Jan 2018et peut on installer ce genre de panier ? je suis sur le theme supply et donc j’ai un panier pop-up, peut on changer cela ?
(en tout cas merci j’adore votre travail)
dgeo22
23 Jan 2018Oui dans customize – theme settings – cart – choisir page
Bonne journée
JN
4 Sep 2019Merci frérot !
Gael
23 Jan 2018Salut et déjà merci pour ce que tu fais c’est vraiment bien!
Pour ce qui est du code à insérer pour accéder directement au checkout, je n’arrive pas du tout à trouver sur la page du code et d’autres. J’utilise le thème Narrative.
Ca fonctionne différemment pour ce thème?
Merci pour ton retour!
dgeo22
25 Jan 2018Salut, va dans snippeds – product-form.liquid tu trouvera le formulaire ici sur ce thème 😉
renaux
30 Jan 2018Bonjour j’ai bien ajouté le code mais quand je clique sur ajouter au panier cela ne m’amène pas directement sur la page de checkout
dgeo22
1 Fév 2018Bonjour, tu as sans doutes un panier de type modal ou draw, ca ne fonctionne que sur les thèmes avec un panier de type page
doty
18 Fév 2018Bonjour,
j’ai mis le code mais je souhaite l’enlever. Je l’ai supprimé et sauvegardé mais çà reste toujours, comment faire? merci
dgeo22
18 Fév 2018Bonsoir, tu as du mal supprimer la portion de code revérifie et ensuite save. sur le site fait un ctrl + f5 pour vider tes caches et revérifie 😉
Jenny
19 Fév 2018Bonjour tout d’abord j’aimerais te dire que je trouve ce que tu as vraiment pratique.
J’ai pu insérer beaucoup de tes codes sauf celui la.
J’aimerais avoir aussi s’il est possible après que le client ai mit ajouter au panier, d’aller sur la page voir le panier au lieu de directement check out qui fait un peu aggressif.
Egalement comment modifier ajouter au panier par acheter maintenant pour tester les deux méthodes
dgeo22
24 Fév 2018Bonjour et merci pour le com
Le acheter maintenant se gère dans les traductions de ton thème, pour aller directement au panier il suffit de ne pas faire ce tuto car c’est le fonctionne natif de shopify. ce tuto va justement faire l’inverse t’amener directement au checkout. Bonne soirée
Quentin
4 Mar 2018Salut,
Je ne trouve pas la partie du code qui se termine par mais j’ai <form action…..
Avec commande F je ne trouve pas nonplus.
Si je colle devant <form… ça ne change strictement rien.
Je suis bien sur SECTION. Product template liquid.
Merci de votre aide
Quentin
4 Mar 2018Et je confirme que c’est pour un panier de type page
dgeo22
7 Mar 2018Bonsoir, tout dépend du thème. regarder dans section si y a une form.liquid ou autre
Paul
14 Avr 2018Bonjour,
J’utilise le théme Venture donc un panier « page » j’ai trouvé la section, j’ai collé le code mais aucun changement :/ Une idée ?
Dgeo GD
18 Avr 2018Bonjour,
Regarde bien qu’il n’y ai pas des conditions d’affichage ou plusieurs formulaires
Camille
8 Juil 2018Bonjour, j’utilise le thème supply et je ne trouve pas le « ».
J’ai regarder et même en faisant le crtl+f je ne le retrouve pas. Du coup je ne sais pas ou rajouter ce bout de code.
Y-a-t-il une solution svp ? Merci !
cindy
26 Août 2018Bonjour, Je suis dans la même situation que toi Camille, as tu réussie? Merci
Dgeo Dev
6 Sep 2018Essayez de trouver une balise button et mettez le code du tuto avant
MERCIER
19 Déc 2019Bonjour, je ne trouve pas le form sur le thème supply.. une idée ?
Merci:
Dgeo Dev
19 Déc 2019Hello, essayer de regarder un peu dans tous les fichiers, je ne connais pas trop supply.
Romain
5 Oct 2018Bonjour j ‘ai un problème avec ce bout de code il met un temps enorme à faire transiter de ma page produit à ma page check out
Dgeo Dev
18 Oct 2018Hello, tout dépend du thème et du nombre d’app installées 😉
thibaut saule
28 Nov 2018même problème avec le thème minimal
Dumel
3 Déc 2018bonsoir. j’ai monté un site de e commerce et je suis bloqué au niveau du checkout. En effet comment paramétrer cette fonction de manière à importer les articles du panier?
Dgeo Dev
7 Déc 2018Hello, je suis désolé je n’ai pas compris la question… Importer ? ce tuto passe d’une fiche produit au checkout donc un achat impulsif unitaire
Valou
3 Déc 2018Bonjour, je ne trouve pas le mot même en cherchant avec ctrl + f
Comment puis-je faire ?
Je suis sur le thême supply
Dgeo Dev
7 Déc 2018Hello, essayer de trouver une balise et le coller avant. régulièrement dans product-template.liquid sur supply
Thomas
19 Déc 2018Bonjour, je ne trouve pas le mot même en cherchant avec ctrl + f
Comment puis-je faire ?
Je suis sur le thême Jumpstart
Shazane
10 Jan 2019Salut, Comment peux t’on faire si on utilise l’application GemPages?
Je precise que je suis avec le theme debut et que, a l’heure actuelle, mes clients sont rediriges vers une page panier.
Merci a vous 🙂
Dgeo Dev
29 Jan 2019Bonsoir, Gempages doit venir écraser la modif 🙂 je ne sais pas trop je n’utilise pas gempages désolé 🙂
RemiK
8 Fév 2019Bonjour, je suis sur le thèmes Debut et je ne trouve pas la formule
Une solution ?
Je suis bien dans dans Sections / product-template.liquid et j’ai essayer avec ctrl+F rien n’y fais
Merci
Gabor
3 Avr 2019Moi aussi la même chose, avez-vous trouvé la solution ?
Merci bcp!
Zbaeren Vincent
4 Avr 2019moi aussi… Avez vous trouvé une solution ?
Hugo
16 Mai 2019Bonjour,
Tout d’abord, un grand BRAVO et MERCI pour tout ton travail et ton partage!.. si précieux !!! Tout ce qui se trouve ici est incroyablement utile, efficace et de grande qualité. Merci encore !
Je crois avoir rencontré un pb avec ce code : en fait j’ai un pb sur mon site depuis qlques jours. Il arrive parfois (de manière complètement aléatoire apriori) que le bouton ne renvoit pas au checkout comme prévu mais actualise simplement la page.
Ce n’est pas sytématique, loin de là puisqu’il y a quand même ds ventes, mais en visionnant les captures vidéos (hotjar) on va dire que 1 à 3 fois par jour (sur 3-4 sessions) il y a ce problème. Après avoir galéré à essayer de trouver la source du pb parmi les modifs apportées à mon site… il semblerait que ça vienne de là. Je viens de le supprimer et je serai fixé rapidement pr confirmer ou non. Mais je voulais t’en faire part au cas où ça puisse t’être utile à toi ou à un lecteur de cette page.
Pour info : thème BROOKLYN
NB: ne trouvant pas la balise je l’ai collé avant la balise qui me semblait la plus proche et cohérente (en bon NON initié que je suis :-/ ) c’est à dire {% endform %}
Est-ce que j’ai bien fait ?
Dgeo Dev
16 Mai 2019Hello, merci pour le sympathique message 😉
Merci pour la précision mais ca me semble étrange car personne ne m’a remonté ce bug pour le moment. Après c’est peut être du au thème et au mode de panier utilisé. Il faut avoir le mode en page.
Pour le placement oui c’est parfait et idéalement avant le bouton submit
Bonne soirée.
hugo
25 Août 2019Salut ! Je reviens quelques mois après pour un petit feedback et revenir sur mon commentaire !!! (pardon de ne pas avoir pensé à le faire + tôt ^^ )
Finalement, aucun changement en supprimant le code. Toujours ces espèces de bugs de temps en temps, de manière aléatoire et irrégulière (en terme de quantité de cas), qui fait soit actualiser la page soit un envoi à la page d’accueil lorsque l’utilisateur clique sur le bouton d’achat… Le problème vient donc d’ailleurs (aucun idée de son origine après des mois) et relève peut-être même d’une simple normalité statistiques…
Quoiqu’il en soit, primordial pour moi de te prévenir qu’il faut complètement oublier mon commentaire du 16 mai ci-dessus ! 😉
Tu peux même le supprimer si tu veux/peux, car il n’apporte vraiment plus rien de constructif maintenant que tu as précisé le coup de la balise {%endform} dans le tuto.
Avec encore mille mercis au passage pour tout ton taf prodigieux! Et à bientôt pour un TIP dès que possible de mon côté 😀
Dgeo Dev
26 Août 2019Hello, ok merci pour le message et le retour 😉 ca fait plaisir ! Bonne soirée
Charles David de Vignerte
18 Juin 2019Bonjour Dgeo 😉
Merci tout d’abord pour ce tuto 🙂
Je suis sur le Thème Speedfly et je viens d’installer Dropicheckout.
Je souhaite donc aller directement sur le checkout dropicheckout, celà ne fonctionne pas via les outils interne du template.
Du coup je me tourne vers toi, j’ai cherché avec ta méthode dans « Section » en faisant un CMD + F avec « » rien à faire, tu aurais une piste peut être 🙂 ?
Bonne journée à toi 😉
Dgeo Dev
25 Juin 2019Hello, cela ne fonctionne pas avec Dropicheckout 🙂 il faut rester en mode panier
joseph
27 Juin 2019Bonjour Dgeo Dev je suit sur le théme début et je n’arrive pas a trouver le j’ai déja installer l’aplication dropicheckout. mais je voudrais ajouter ce bout de code pour ne plus que mes client passe par la page panier help pleaseeee .
Dgeo Dev
28 Juin 2019Hello, si tu ne trouve pas la balise recherche {% endform %} – tuto mis à jour en conséquence au besoin 😉
joseph
27 Juin 2019Bonjour, je suis sur le thèmes Début et je ne trouve pas la formule
Une solution ?
Je suis bien dans dans Sections / product-template.liquid et j’ai essayer avec ctrl+F rien n’y fais
et j’ai dèja installer l’application dropicheckout pour avoir 1 seul page lors du checkout
Merci
Dgeo Dev
28 Juin 2019Hello, ce tuto n’est malheureusement pas compatible avec dropicheckout qui n’accepte pas le directcheckout des formulaires. Bonne soirée.
Wood
14 Juil 2019Dans le passage a la caisse je voudrais ajouter un icon pour un paiment personnalise.vous pouvez me montrer comment svp
Dgeo Dev
15 Juil 2019Bonjour, ce n’est malheureusement pas possible. le checkout est verrouillé par shopify depuis le 1er févreier 2019
Hugo
23 Juil 2019Bonjour,
Avec le thème Debut, j’ai un panier de type pop-up (le client peut continuer ses achats). J’aimerai que le bouton envoie directement sur une panier de type page.
J’ai lu plus haut que l’on pouvait modifier cela dans customize>theme settings>cart mais je n’ai pas de menu cart dans theme settings.
Avez-vous une autre solution?
Merci de votre aide.
Dgeo Dev
24 Juil 2019Hello, sur le thème debut un panier de type popup ? hum il me semble que seul le type de panier page est disponible sur ce thème ? Peut être un code particulier installé par un developpeur sur votre thème ? Sinon je ne vois pas navré 🙁
Camille Labrousse
5 Nov 2019J’ai trouvé la solution :
1. Coller la ligne de code comme indiquée dans le tuto
2. Aller dans :
-> Personnaliser le thème
-> Paramètres de thèmes
-> Ajouter à la notification de panier
3. Décocher la case « Afficher la notification lorsque l’article est ajouté au panier »
4. Enregistrer
Jonathan
30 Juil 2019Hey, j’ai installé dropicheckout et je vois que ce n’est pas possible apparement ta méthode? Avant d’installer dropi j’avais une appli qui zap le panier justement skip to checkout! Pense tu qu’elle me créer des bugs? On dirai qu’elle essaye de reprendre son taf et me fait repasser par l’ancien checkout! soit je passe par le panier et bon checkout soit elle zap le panier et ancien check out! aurait tu une solution ?
Merci d’avance
Dgeo Dev
4 Août 2019Hello, effectivement ce tuto n’est pas compatible avec les Chechout alternatifs. Bonne journée
piere
5 Sep 2019Bonjour, est-ce que dropicheckout est compatible avec speedfly ?
Dgeo Dev
5 Sep 2019Bonjour, oui 🙂
adrien
4 Oct 2019salut c’est quelle dossier dans fastlane ?
je trouve pas ou coller le texte
Dgeo Dev
5 Oct 2019Hello, je ne connais pas trop Fastlane désolé, par contre il me semble que c’est dans les options. A voir avec leur support du coup 😉
Camille L
5 Nov 2019[Conseils pour le thème début avec pop up ajout au panier]
Hello et merci pour le contenu !
Pour ceux qui, comme moi, utilisent le thème début et dont l’ajout au panier se fait en pop up en haut à droite, voici comment j’ai fait pour faire fonctionner le code :
1. Coller la ligne de code comme indiquée dans le tuto
2. Aller dans :
-> Personnaliser le thème
-> Paramètres de thèmes
-> Ajouter à la notification de panier
3. Décocher la case « Afficher la notification lorsque l’article est ajouté au panier »
4. Enregistrer
Et voilà, l’ajout au panier amène directement au passage à la caisse. Cheers !
Dgeo Dev
5 Nov 2019Hello, Super merci pour la trouvaille 🙂 bonne journée.
Brice
26 Jan 2020Bonjour et merci pour ces precieux conseils
Je bloque . Je suis sur Début , et je vois pas exactement où mettre la ligne de code.
Merci bien
Dgeo Dev
26 Jan 2020Hello, merci pour la remarque j’ai pu remarquer que j’avais mis la mauvaise vidéo sur cette article 🙂 tu peux donc la regarder car je fais le tuto sur le thème debut justement 😉
Jano
5 Jan 2020Salut Dgeo Dev,
Excellent travaille, ça fonctionne parfaitement, j’essaye maintenant de réaliser la même opération cependant pour le bouton ajouter au panier quand la page produit est sur ma page d’accueil, sais-tu ou dois-je insérer le code dans ce cas?
Je te remercie d’avance.
Dgeo Dev
5 Jan 2020Hello, oh super 😉 oui généralement dans sections – featured-product.liquid. Bonne soirée.
Jano
5 Jan 2020Parfait, ça a fonctionné je te remercie 😉
Alexis PLAINCHAMP
25 Fév 2020Merci beaucoup 🙂
said
10 Mar 2020Bonjour, pouvez-vous m’aider à supprimer le code postal des informations d’expédition?
Dgeo Dev
13 Mar 2020Hello, question étrange mais je ne pense pas que cela soit possible. étant donné que le checkout ne dépend pas du thème il faudrait demander directement à shopify 🙂
Ben
18 Mar 2020Hello Dgeo Dev,
Je suis sur le thème Impulse et dans section –> product.liquid il n’y a pas , une idée d’où il pourrait se trouver ?
Merci d’avance pour votre retour 🙂
Dgeo Dev
19 Mar 2020Hello, je ne connais pas ce thème mais dans la vidéo j’explique comment trouver le fichier voulu grâce à une recherche d’un form. y a surement un include.
William
31 Mar 2020Salut Merci pour ton tuto. J’ai le thème DEBUT et j’ai la page panier simple par défaut. J’ai bien suivi ce que tu dis de faire, bien enregistré après avoir collé le code mais rien ne passe. La page panier est toujours présente. Aurais-tu une idée ?
Merci d’avance
Alliance
8 Avr 2020Bonjour, j’ai suivi vos indications et ça a marché. Pour info, j’ai le thème Début 🙂
Merci pour cette astuce 🙂
sacha
25 Avr 2020Bonjour Dgeo, merci pour le tuto, pour ma part c’était dans: product-form-1.liquid
Adrien
14 Mai 2020Bonjour, j’ai essayé plusieurs choses avec le thème prestige mais sans succès, pourriez-vous m’aider ?
Dgeo Dev
14 Mai 2020Hello, désolé je ne connais pas ce thème 🙁 peut être voir avec leur support 🙂
lEO
12 Juin 2020Bonjours, est ce que ca marche sur le thème VENTURE ,,,,,,,,,,,,,???????????
Dgeo Dev
13 Juin 2020Hello, oui si venture possède un panier de type page
hakim
18 Sep 2020bonjour sur le theme turbo je trouve pas (% form ni endform
Dgeo Dev
20 Sep 2020Hello, turbo est assez bordélique 🙁 il faut essayer de trouver dans snippets un fichier avec form quelque chose.
REDA
10 Nov 2020Bonjour,
Merci pour le contenu
J’utilise le thème Supply, j’aimerai supprimer la fenêtre Popup qui sort lors d’un ajout au panier,
j’aimerai que l’ajout se fait directement sans qu’il y ait une « fenêtre popup », « tiroir » ou « page » qui sort, est ce que c’est possible ?
Dgeo Dev
11 Nov 2020Hello, il me semble que c’est dans les options du thème dans param du thème – Panier
Valentin
17 Nov 2020Bonjour, j’aimerai enlever le bouton ajouter au panier de mon shop comment puis-je procéder ? Merci
Dgeo Dev
19 Nov 2020Hello, logiquement c’est dans les options du thème. Sinon faut demander au support du theme en question 😉
Yann
12 Déc 2020Bonjour 😉 ,
Je suis sur le thème Début.
J’ai suivi à la lettre le tuto et je te remercie car il a résolu le problème.
Cependant, ça marche sur ma page produit, mais pas sur ma page d’accueil, y a t-il une section où je dois reproduire le même procédé ?
Merci et bonne journée 😉
Dgeo Dev
14 Déc 2020Hello, oui dans Sections – featured-product.liquid ou fichier similaire selon le thème utilisé 😉
régis
8 Fév 2021Bonjour. ça fonctionne bien, sauf que moi sur la page d’accueil j’ai un bouton panier que g transformer en bouton acheter maintenant suivant ta procédure et g aussi un bouton acheter maintenant que j’aimerais supprimer du coup. as-tu une idée de comment faire ça? je précise que je suis sur debut. merci d’avance a+++
régis
8 Fév 2021C bon g trouvé c’était le bouton de paiement dynamique qu’était resté activer. désolé du dérangement. et encore bravo pour tout ce que tu fais c génial. a++
Dgeo Dev
10 Fév 2021Hello, ok super 🙂
Lucas
15 Jan 2022Bonjour,
Sur le thème dawn nous n’avons pas la possibilité de désactivé la notification d’ajout au panier et cela pose problème, je ne trouve pas de tuto sur youtube concernant cela.
Pouvez vous faire quelque chose ?
Dgeo Dev
17 Jan 2022Bonjour, Dawn est assez récent et encore en développement permanent chez shopify. L’idéal serait de demander à leur support étant donné que vous avez doit à 60mn d’intervention Gratuite de leurs part vu que c’est leur thème alors autant en profiter 😉
Lucas
18 Jan 2022Merci je vais le faire, mais il est pas possible de supprimer la notification de panier dans le code du thème ?
Dgeo Dev
19 Jan 2022Oui mais ca devrait être dans les options du thème en principe si le thème est bien fait 🙂