Dans ce tutoriel nous allons voir comment créer un système de direct checkout en ajoutant un bouton Acheter maintenant en plus du ajouter au panier.
Comme vous le savez Shopify permet depuis peu de rajouter ce type de bouton mais ils sont dynamiques ! Ce qui veut dire que le bouton s’adapte aux moyens de paiements connectés de l’utilisateur. En effet ce bouton va se transformer et pouvoir proposer le paiement par Paypal, Google pay etc…
C’est bien mais beaucoup de personnes ne souhaitent qu’un bouton acheter maintenant simple et efficace ! eh ça tombe bien on va apprendre à en créer un 😀
Version Thèmes Récents – (OS 2.0 – après 2022)
Installation du système
Création du Snippet (Extrait)
Rendez vous sur votre administration et cliquez sur « Boutique en ligne ».
Cliquez sur le bouton Action puis « Modifier le code ».
Trouvez le dossier Extraits (Snippets) et cliquez sur Ajouter une nouvelle ressource et nommez le « dg-btn-direct-checkout ».
Ouvrez le et mettez l’intégralité du code ci-dessous:
.dg-btn-direct-checkout { /* modifiez le code hexadecimal du fond du bouton et le scale pour l'intensité du zoom au survol */ --dg-btn-direct-checkout-bg-color: #fca311; --dg-btn-direct-checkout-scale: 1.01; /* 1 for reset or 1.01 max */ }
Trouvez le dossier Sections et cliquez sur fichier « product-template.liquid », si vous ne l’avez pas allez dans Templates – « product.liquid » ou dans section « product-template.liquid » sur Dawn c’est le fichier « main-product.liquid ». Dans certains cas le formulaire d’achat peut se trouver dans un fichier du dossier Extraits (Snippets) généralement product-form… ou product-grid-item etc…
A ce stade vous allez devoir trouver votre formulaire et plus précisément la balise button.
Faites un ctrl + F et recherchez l’occurrence « {% endform %} » ou « </form> ». une fois trouvé vous allez copier/coller le code ci-dessous juste au dessus de cette balise.
{%- render 'dg-btn-direct-checkout' -%}
Il ne vous reste plus qu’a cliquer sur le bouton « Enregistrer » en haut à droite pour valider vos modifications !
Vous avez maintenant un nouveau bouton pour permettre de raccourcir votre tunnel de vente au maximum 😉
Si vous souhaitez remplacer votre bouton ajouter au panier par un bouton acheter maintenant c’est ce tutoriel qu’il vous faut: Remplacer mon bouton existant
Version Thèmes Vintages (OS 1.0 – avant 2022)
Installation du système
Création du Snippet (Extrait)
Rendez vous sur votre administration et cliquez sur « Boutique en ligne ».
Cliquez sur le bouton Action puis « Modifier le code ».
Trouvez le dossier Extraits (Snippets) et cliquez sur Ajouter une nouvelle ressource et nommez le « dg-btn-direct-checkout ».
Ouvrez le et mettez l’intégralité du code ci-dessous:
<script> /** * Module to ajaxify all add to cart forms on the page. * * Copyright (c) 2015 Caroline Schnapp (11heavens.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ $( "#dg-go-checkout" ).click(function() {
Shopify.AjaxifyCart = (function($) {
// Some configuration options. // I have separated what you will never need to change from what // you might change.
var _config = {
// What you might want to change addingToCartBtnLabel: 'Commande en cours...', soldOutBtnLabel: 'Sold Out', howLongTillBtnReturnsToNormal: 1000, // in milliseconds. cartCountSelector: '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count', cartTotalSelector: '#cart-price', // 'aboveForm' for top of add to cart form, // 'belowForm' for below the add to cart form, and // 'nextButton' for next to add to cart button. feedbackPosition: 'nextButton',
// What you will never need to change addToCartBtnSelector: '#dg-go-checkout', addToCartFormSelector: 'form', shopifyAjaxAddURL: '/cart/add.js', shopifyAjaxCartURL: '/cart.js' };
// We need some feedback when adding an item to the cart. // Here it is. var _showFeedback = function(success, html, $addToCartForm) { $('.ajaxified-cart-feedback').remove(); var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>'; switch (_config.feedbackPosition) { case 'aboveForm': $addToCartForm.before(feedback); break; case 'belowForm': $addToCartForm.after(feedback); break; case 'nextButton': default: $addToCartForm.find(_config.addToCartBtnSelector).after(feedback); break; } // If you use animate.css // $('.ajaxified-cart-feedback').addClass('animated bounceInDown'); $('.ajaxified-cart-feedback').slideDown(); }; var _setText = function($button, label) { if ($button.children().length) { $button.children().each(function() { if ($.trim($(this).text()) !== '') { $(this).text(label); } }); } else { $button.val(label).text(label); } }; var _init = function() { $(document).ready(function() {
Par défaut j’ai mis le style d’un bouton Amazon mais vous pouvez reprendre la main sur les couleurs. Pour ce faire regardez la vidéo tout en bas 😉
Placement du bouton
Trouvez le dossier Sections et cliquez sur fichier « product-template.liquid », si vous ne l’avez pas allez dans Templates – « product.liquid » ou dans section « product-template.liquid » sur Dawn c’est le fichier « main-product.liquid ». Dans certains cas le formulaire d’achat peut se trouver dans un fichier du dossier Extraits (Snippets) généralement product-form… ou product-grid-item etc…
A ce stade vous allez devoir trouver votre formulaire et plus précisément la balise button.
Faites un ctrl + F et recherchez l’occurrence « {% endform %} » ou « </form> ». une fois trouvé vous allez copier/coller le code ci-dessous juste au dessus de cette balise.
{% include "dg-btn-direct-checkout" %}
Il ne vous reste plus qu’a cliquer sur le bouton « Enregistrer » en haut à droite pour valider vos modifications !
Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.
Hey merci pour ce nouveau tuto 🙂 on en avait parlé en plus 🙂 je l’ai bien installé mais il y a pas moyen de le rendre vibrant comme le ajouter au panier?
Salut, j’ai bien le bouton mais quand on clique dessus c’est le bouton « ajouter au panier qui s’anime (chargement en cours avec le cercle de chargement) et ça ne me fait pas passer à la caisse. Ça fait un ajout au panier.
Pareil aussi pour mon cas, j’ai bien suivi le tuto mais quand on clique sur le bouton que je viens d’ajouter c’est le bouton « ajouter au panier qui s’anime. Ça fait un ajout au panier et non acheter maintenant
Merci pour ce tuto en revanche ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 241): Could not find asset snippets/direct-checkout.liquid
Bonjour et merci pour t’es video qui nous apportent tant ! j’ai utiliser ton code pour ajouter le bouton « acheter maintenant » car il n’y était pas sur le format téléphone par contre bizarrement sur le format ordinateur il y était déjà . Donc en installant ton code j’ai pu le mettre sur le format smatphone ( cool ) mais du coup il s’est mis en deux fois sur le format ordi. Aurais tu une manip a me conseiller sans vouloir abuser de ta générosité .
Bonjour, étrange… surement le fonctionnement du thème 🙁 faudrait voir le pourquoi du comment directement avec leur support car je n’ai pas la moindre idée pour le coup 🙂
Merci pour ce tuto mais ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 201): Could not find asset snippets/direct-checkout.liquid
J’ai déja réessaye plusieurs fois ..
Bonjour, j’ai le même problème que certain. Quand je clik sur acheter maintenant sa ajoute au panier. J’ai lue les réponses donner et le truc c’est que comment faire pour passer en « type de page panier ». Je cherche mais je voie pas comment faire cela. Merci beaucoup pour t’est multiple tuto, c’est le seul ou j’ai eu un probléme.
BONJOUR ET MERCI POUR VOS TUTOS VOUS M’AVEZ BEAUCOUP AIDER MON SEUL SOUCI ET QUE LE BOUTON MAINTENANT ACHETER EST TROP PETIT PAR RAPPORT AU BOUTON AJOUTER AU PANIER ILS N’ONT PAS LA MÊME TAILLE
Hello et merci pour le commentaire 🙂 il faudrait voir avec le support du thème utilisé car le code est tjs différent. Il y a certainement une class spécifique à rajouter 🙂
Salut, et merci pour tes nombreux tips !
J’utilise une appli qui remplace le check-out de shopify.
Comment faire que le bouton mène à cette page de check-out plutôt que celle de shopify (si ça se trouve il faut juste mettre un URL spécifique dans tes lignes de code) ?
Hello, c’est délicat selon l’app utilisée. généralement c’est compliqué mais le mieux est de demander au support de l’app en question pour savoir sil ils peuvent vous aider 🙂
Salut Mister, j’ai posé une question ce matin mais j’ai trouvé la réponse te casse pas la tête.
J’ai une autre question : Comment mettre ce bouton juste SOUS le bouton « Ajouter au panier » ? (ce qui serait bien mieux) ?
Merci
Hello, ok super 🙂 il suffit de mettre au dessus un code <br /> ou englober le code d’une div du genre <div style="clear:both;width:100%;overflow:hidden;"></div>
… je sais j’abuse mais c’est mon dernier message !!
tu vois sur mon site, la police n’est pas la même pour ton bouton que celui de « ajouter au panier ».
je vois bien sur ton code pour changer la couleur du texte, mais pour la police ?
Salut Geo ! merci pour ton contenues ! Cependant j’ai réaliser le tutoriel et un problème apparaît (Brooklyn):
« Il semble que cette page redirige vers une page qui n’est pas compatible avec cet éditeur. Pour vous assurer que votre redirection n’interfère pas avec l’édition, remplacez window.location.href = par window.top.location.href = dans le code JavaScript de votre thème à ici. »
Hello je viens de réaliser la manipulation est malheureusement j’ai un soucis quand je clique sur le bouton acheter maintenant il me renvoi sur la page ajouter au panier. J’ai beau retourner la situation je n’arrive pas. Merci pour ton aide
Hello, étrange il doit manquer quelque chose ou alors le thème n’est pas compatible 🙁 il faudrait voir avec le support de votre thème pour plus de détails 🙂 bonne journée.
Salut, merci pour ce super tuto mais malheureusement ça na marche pas pour moi ;(
j’utilise le thème début et même lorsque je teste « toto » il se passe rien 🙁
le panier est déjà en mode page pourtant
une idée stp?
Hello!
J’aimerais que les boutons « Ajouter au panier » et « Acheter maintenant » soient de la même largeur que le trust badge comme sur votre site de démonstration. Comment faire ?
Où est-ce que je peux trouver la taille des boutons en pixel ? je ne le vois pas dans product-template.liquid.
Je pensais que l’on pouvait avoir un ajustement automatique des boutons pour qu’ils prennent la largeur totale entre l’image de gauche et la marge de droite.
Hello, merci beaucoup pour tes tutos géniales qui m’aident tellement !
Tout comme les commentaires plus haut, j’ai vu qu’il fallait passer le panier en mode page sauf qu’il y a pas de changement possible dans le thème Narrative.
Est ce que tu aurais un code à intégrer que tu pourrais nous conseiller ? 🙂
Hello, c’est assez délicat… L’idéal serait d’utiliser les thèmes 2.0 de shopify comme speedfly permettant d’utiliser au mieux la contextualisation des contenus en utilisant les champ méta shopify.
max Harder'Z
20 Avr 2020Hey merci pour ce nouveau tuto 🙂 on en avait parlé en plus 🙂 je l’ai bien installé mais il y a pas moyen de le rendre vibrant comme le ajouter au panier?
Dgeo Dev
20 Avr 2020Hello, répondu en MP 😉
Shine Project
1 Mai 2020Salut, j’ai bien le bouton mais quand on clique dessus c’est le bouton « ajouter au panier qui s’anime (chargement en cours avec le cercle de chargement) et ça ne me fait pas passer à la caisse. Ça fait un ajout au panier.
Dgeo Dev
2 Mai 2020Hello, étrange surement un conflit avec ton thème. Faudrait voir ça plus en détail en MP 🙂
Yolas
5 Mai 2020Pareil aussi pour mon cas, j’ai bien suivi le tuto mais quand on clique sur le bouton que je viens d’ajouter c’est le bouton « ajouter au panier qui s’anime. Ça fait un ajout au panier et non acheter maintenant
Dgeo Dev
5 Mai 2020MP au besoin 😉
Maxime Crisanto
4 Mai 2020Merci pour ce tuto en revanche ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 241): Could not find asset snippets/direct-checkout.liquid
Dgeo Dev
5 Mai 2020Hello, il manque une étape 😉 reprends le tuto depuis le début
Tony
13 Mai 2020Bonjour,
j’ai le thème debutify 2.02 je vois le bouton, mais il ne lance rien lorsque je clique dessus…
merci
Dgeo Dev
14 Mai 2020Hello, désolé je ne connais pas ce thème 🙁 peut être voir avec leur support 🙂
Sonia
5 Fév 2021Bonjour et merci pour t’es video qui nous apportent tant ! j’ai utiliser ton code pour ajouter le bouton « acheter maintenant » car il n’y était pas sur le format téléphone par contre bizarrement sur le format ordinateur il y était déjà . Donc en installant ton code j’ai pu le mettre sur le format smatphone ( cool ) mais du coup il s’est mis en deux fois sur le format ordi. Aurais tu une manip a me conseiller sans vouloir abuser de ta générosité .
Dgeo Dev
5 Fév 2021Bonjour, étrange… surement le fonctionnement du thème 🙁 faudrait voir le pourquoi du comment directement avec leur support car je n’ai pas la moindre idée pour le coup 🙂
Tony
15 Mai 2020Merci de votre réponse, je viens de tester avec Brooklyn, c’est pareil 🙁
Dgeo Dev
16 Mai 2020Essayer de passer en mode de panier de type page si c’est possible, ca pourrait résoudre le problème 😉
tony
16 Mai 2020merci, ça marche 🙂
Mikael
16 Mai 2020Bonjour,
Ca ne fonctionne pas pour moi, j’ai le theme Debut et le bouton acheter maintenant ajoute au panier uniquement.
merci
Dgeo Dev
18 Mai 2020hello, essaie de passer en type de page panier 🙂
ANGE MENGUE NTYAME
17 Mai 2020Merci pour ce tuto mais ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 201): Could not find asset snippets/direct-checkout.liquid
J’ai déja réessaye plusieurs fois ..
Dgeo Dev
18 Mai 2020C’est qu’il ne trouve pas le snippet 🙂 le nom ou l’appel doit être mal noté
volkan
29 Mai 2020une petite question, pour center ou corriger la largeur que je dois faire??
Dgeo Dev
29 Mai 2020Hello, modifier la valeur
width:100%;
selon la largeur voulueKusty
29 Mai 2020Bonjour, j’ai le même problème que certain. Quand je clik sur acheter maintenant sa ajoute au panier. J’ai lue les réponses donner et le truc c’est que comment faire pour passer en « type de page panier ». Je cherche mais je voie pas comment faire cela. Merci beaucoup pour t’est multiple tuto, c’est le seul ou j’ai eu un probléme.
Kusty
30 Mai 2020Bonjours, comment passer en type de page panier ? merci
Dgeo Dev
30 Mai 2020Hello, logiquement c’est dans options du thèmes – Type de panier
DIOUF
14 Août 2020BONJOUR ET MERCI POUR VOS TUTOS VOUS M’AVEZ BEAUCOUP AIDER MON SEUL SOUCI ET QUE LE BOUTON MAINTENANT ACHETER EST TROP PETIT PAR RAPPORT AU BOUTON AJOUTER AU PANIER ILS N’ONT PAS LA MÊME TAILLE
Dgeo Dev
21 Août 2020Hello et merci pour le commentaire 🙂 il faudrait voir avec le support du thème utilisé car le code est tjs différent. Il y a certainement une class spécifique à rajouter 🙂
Flo
27 Août 2020Salut, et merci pour tes nombreux tips !
J’utilise une appli qui remplace le check-out de shopify.
Comment faire que le bouton mène à cette page de check-out plutôt que celle de shopify (si ça se trouve il faut juste mettre un URL spécifique dans tes lignes de code) ?
Dgeo Dev
27 Août 2020Hello, c’est délicat selon l’app utilisée. généralement c’est compliqué mais le mieux est de demander au support de l’app en question pour savoir sil ils peuvent vous aider 🙂
Flo
27 Août 2020Salut Mister, j’ai posé une question ce matin mais j’ai trouvé la réponse te casse pas la tête.
J’ai une autre question : Comment mettre ce bouton juste SOUS le bouton « Ajouter au panier » ? (ce qui serait bien mieux) ?
Merci
Dgeo Dev
27 Août 2020Hello, ok super 🙂 il suffit de mettre au dessus un code
<br />
ou englober le code d’une div du genre<div style="clear:both;width:100%;overflow:hidden;"></div>
Flo
27 Août 2020… je sais j’abuse mais c’est mon dernier message !!
tu vois sur mon site, la police n’est pas la même pour ton bouton que celui de « ajouter au panier ».
je vois bien sur ton code pour changer la couleur du texte, mais pour la police ?
Merci !!!
Dgeo Dev
27 Août 2020La malheureusement c’est au niveau du thème qu’il faut gérer cela 🙂 faudrait demander au support de celui-ci 😉
Guessoum
4 Sep 2020Salut Geo ! merci pour ton contenues ! Cependant j’ai réaliser le tutoriel et un problème apparaît (Brooklyn):
« Il semble que cette page redirige vers une page qui n’est pas compatible avec cet éditeur. Pour vous assurer que votre redirection n’interfère pas avec l’édition, remplacez window.location.href = par window.top.location.href = dans le code JavaScript de votre thème à ici. »
Merci de m’aider !!
Dgeo Dev
5 Sep 2020Hello, ça arrive lorsque l’on teste en mode préview logiquement ce problème n’est pas grave et le système doit fonctionner 🙂
Guessoum
6 Sep 2020Comment te dire que t’es le meilleur !
Dgeo Dev
6 Sep 2020Hello, merci 😉
Maxime
16 Oct 2020Hello je viens de réaliser la manipulation est malheureusement j’ai un soucis quand je clique sur le bouton acheter maintenant il me renvoi sur la page ajouter au panier. J’ai beau retourner la situation je n’arrive pas. Merci pour ton aide
Dgeo Dev
17 Oct 2020Hello, étrange il doit manquer quelque chose ou alors le thème n’est pas compatible 🙁 il faudrait voir avec le support de votre thème pour plus de détails 🙂 bonne journée.
christelle
17 Nov 2020Salut, merci pour ce super tuto mais malheureusement ça na marche pas pour moi ;(
j’utilise le thème début et même lorsque je teste « toto » il se passe rien 🙁
le panier est déjà en mode page pourtant
une idée stp?
Dgeo Dev
19 Nov 2020Hello, il faut essayer dans d’autres fichiers alors afin de trouver le bon emplacement
William
13 Déc 2020Hello!
J’aimerais que les boutons « Ajouter au panier » et « Acheter maintenant » soient de la même largeur que le trust badge comme sur votre site de démonstration. Comment faire ?
Merci d’avance.
Will
Dgeo Dev
14 Déc 2020Hello, il faut regarder le nombre de pixel que les 2 boutons prennent et créer une image en conséquence 🙂
William
16 Déc 2020Hello, merci pour la réponse,
Où est-ce que je peux trouver la taille des boutons en pixel ? je ne le vois pas dans product-template.liquid.
Je pensais que l’on pouvait avoir un ajustement automatique des boutons pour qu’ils prennent la largeur totale entre l’image de gauche et la marge de droite.
Merci d’avance.
Shera
18 Déc 2020Hello, merci beaucoup pour tes tutos géniales qui m’aident tellement !
Tout comme les commentaires plus haut, j’ai vu qu’il fallait passer le panier en mode page sauf qu’il y a pas de changement possible dans le thème Narrative.
Est ce que tu aurais un code à intégrer que tu pourrais nous conseiller ? 🙂
Encore un grand merci !
Shera
18 Déc 2020Oups, j’ai rien dit je viens de réussir ! Encore merci pour tes tutos !
Dgeo Dev
19 Déc 2020Hello et super ! bravo 🙂
far
24 Oct 2021Salut dgeo, quand on clique dessus (acheter maintenant) ça n’emmène pas au checkout 🙁 as-tu une idée??
Dgeo Dev
25 Oct 2021Hello, surement que le thème ne l’autorise pas ou que tu es en mode modal ou ajout sans aller directement sur la page du panier ?
far
25 Oct 2021Comment faire sur la page du panier ?? ou bien Peux-tu le faire sur ma boutique directement?
Dgeo Dev
25 Oct 2021Essaie de demander au support du thème sinon tout bon thème propose cette option nativement 🙂
far
25 Oct 2021D’acc, merci pour ta reponse 🙂
Kael
3 Avr 2022Bonjour Dgeo Dev
Je souhaite ajouter un bouton « demander votre devis » sur certains produits de mon site web
Pourriez-vous me dire comment on peut faire ?
Dgeo Dev
4 Avr 2022Hello, c’est assez délicat… L’idéal serait d’utiliser les thèmes 2.0 de shopify comme speedfly permettant d’utiliser au mieux la contextualisation des contenus en utilisant les champ méta shopify.
JB
12 Déc 2022Bonjour, a priori le code ne fonctionne plus, meme si on n’est sous le theme Speed Ecom
Dgeo Dev
13 Déc 2022Hello, effectivement un bug temporaire c’est corrigé ! les codes s’afficheront désormais correctement 🙂