Nous allons voir dans ce tutoriel comment estimer une date de livraison sur une fiche produit Shopify. Le but est de proposer une tranche de date du style 5 à 7 jours et le système calculera automatique la date approximative de livraison. Ce système prend en compte les jours ouvrés et ne calculera donc pas le samedi et le dimanche du jour d’achat.

Le résultat obtenu: 

date livraison shopify

Vous pouvez voir le résultat sur cette page: https://dgeodev.myshopify.com/products/produit-1

Pourquoi afficher la date de livraison sur Shopify ?

Permettre l’accès à cette information vous évitera pas mal de sav. En effet le client pourra clairement voir le délai de livraison avant de commander sur chaque produit. Il sera donc au courant d’une livraison entre une date minimale et une date maximale. De plus vous allez pouvoir définir cette tranche au niveau des options du code fourni.

En bonus je vous propose aussi d’indiquer 2 informations intéressantes comme…

  • Echange gratuit sous x jours,
  • Exclusivement en ligne,
  • Et livraison entre le xxx et le xxx

Comment installer les codes ?

La partie CSS

Cette partie vous permet de mettre en forme la zone et les couleurs des textes.

Rendez-vous dans boutique en ligne -> Actions – Modifier le code

Ouvrez le dossier « Ressources (Assets) » et cliquez sur le fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

Tout en bas des lignes de codes coller le code ci-dessous:

/* Date de livraison */
.dg-shipping-date {
margin:10px 0 10px 0;letter-spacing:0.01em;text-transform: uppercase;
}
.dg-shipping-date p {
color:#333;
font-size:11px;line-height:22px;color:#333;
}
.dg-shipping-date p span {
color:#4ca868;
}

Code de la formation Speedfly

Les codes de la formation sont désormais présent dans l’application Speed Ecom – Hack CSS – Codes de la formation

La partie JS

Nous allons calculer la date approximatif de livraison entre 5 et 7 jours. N’oubliez pas de changer les variables « dateDebut », « dateFin » et de mentionner si vous livré le samedi en mettant livraisonSamedi = « oui » ou « non » selon vos propres préférences.

Rendez-vous dans boutique en ligne -> Actions – Modifier le code

Ouvrez le dossier « Ressources (Assets) » et cliquez sur le fichier « theme.js, global.js« ,  ou tout autre fichier « xxx.js » pris en compte par votre thème.

Tout en bas des lignes de codes coller le code ci-dessous:

if(document.getElementById('fromDate')) { 

/* Partie administrable */
let dateDebut = 2,
dateFin = 4,
livraisonSamedi = "oui";
/* Fin - Partie administrable */

let fromDate = new Date(new Date().getTime() + 24 * dateDebut * 3600 * 1000),
toDate = new Date(new Date().getTime() + 24 * dateFin * 3600 * 1000);

const adjustDateForWeekend = (date) => {
let day = date.getDay();
if (day === 6 && livraisonSamedi !== "oui") { // Samedi
date.setDate(date.getDate() + 2); // Reporte à lundi
} else if (day === 0) { // Dimanche
date.setDate(date.getDate() + 1); // Reporte à lundi
}
return date;
};

fromDate = adjustDateForWeekend(fromDate);
toDate = adjustDateForWeekend(toDate);

// Formatage des dates pour l'affichage
let fromDateDay = fromDate.getDate(),
fromDateMonth = fromDate.getMonth() + 1, // Les mois sont indexés à partir de 0
toDateDay = toDate.getDate(),
toDateMonth = toDate.getMonth() + 1; // Les mois sont indexés à partir de 0

fromDateMonth = (fromDateMonth < 10 ? '0' : '') + fromDateMonth;
toDateMonth = (toDateMonth < 10 ? '0' : '') + toDateMonth;

document.getElementById('fromDate').innerHTML =`${fromDateDay}/${fromDateMonth}`;
document.getElementById('toDate').innerHTML =`${toDateDay}/${toDateMonth}`;
document.querySelector('.dg_shipping-date').style.display = 'block';
}

La partie HTML

Si vous avez un thème récent OS 2.0 vous pouvez vous rendre la la personnalisation du thème – se rendre sur une fiche produit et ajouter un Bloc de type HTML ! Sinon suivez les étapes suivantes…

Rendez-vous dans boutique en ligne -> Actions – Modifier le code

Ouvrez le dossier Sections et cliquez sur le fichier « product-template.liquid » (si vous n’avez pas de product-template.liquid rendez vous dans « Templates -> product.liquid »).

Vous allez devoir trouver une zone pour afficher le système. Idéalement le mettre juste avant le formulaire en dessous du titre du produit. Pour ce faire faite un ctrl + F ou cmd + F et recherchez le terme: « <h1 » et coller le code sur la ligne du dessous.

Pour plus de facilité je vous invite à regarder le tuto Vidéo disponible un peu plus bas !

Code à copier/coller:

<!-- Date de livraison + infos -->
<div class="dg-shipping-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/dollar-symbol.png?7836362982984239286" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;">Échange gratuit <span>sous 30 jours</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/package_1_4fdab5e4-e664-4a7d-be7b-838d8ff12915.png?4359582636050475579" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Exclusivement <span>en ligne</span>
</p>
<p class="dg_shipping-date" style="display:none;">
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/truck.png?8138466027095184927" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Livraison entre le <span id="fromDate">...</span> et le <span id="toDate">...</span>
</p>
</div>

Le code sans le échange gratuit et l’exclusivité internet

<!-- Date de livraison -->
<p class="dg_shipping-date" style="display:none;">
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/truck.png?8138466027095184927" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Livraison entre le <span id="fromDate">...</span> et le <span id="toDate">...</span>
</p>

voir la version vidéo sur youtube

Bon tuto à toutes et tous 🙂

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 36 votes]

Besoin d'aide ?

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.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 153 commentaires

  1. Installé sans aucun souci 🙂 Merci pour tous ces tutos 😉

  2. Merci au top, j’ai un soucis avec la date affichée, il apparaît: Livraison entre le 20/11 et le 29/11

    1. Hello, le theme n’a peut être pas la bibliothèque jquery d’installée. Essaie de mettre ce script dans Layout – theme.liquid avant la fermeture du < / head https://code.jquery.com/

      1. Bonjour j’ai le meme probleme malgré l’ajout de jquery .

        Dans ton code html il y’a cette partie : 20/11 et le 29/11
        on voit qu’il a figé la date sur 20/11 et 29/11
        Donc ça doit être sa le problème ou c’est moi qui me trompe .

        1. Hello, peut être que le thème n’est pas compatible 🙁 faut regarder si y a des bugs dans la console de développement sinon MP le lien du site 😉

          1. Hello même en le testant sur mon serveur local avec un script sur visual studio code ça ne marche pas j’ai le même problème cité ci-haut. Pourtant j’ai inclus jquery ! Pouvez vous nous aider ?

          2. Hello, étrange, vous avez le code sur codepen pour jeter un oeil ?

  3. Encore mille mercis pour vos tutos.
    Sinon j’ai un petit soucis avec la date quand je mets « 7 » jours (dans la date du début) ça me compte 7 jours d’affilés avec le samedi et dimanche inclus par contre quand je met 10 jours ou + il y a seulement un « seul » week-end qui est sauté (le dernier je présume)
    J’ai l’impression que seul un week-end est pris en compte dans le code.
    Je ne sais pas si je me suit bien fait comprendre mais vous pouvez le vérifier avec votre site exemple,
    je suppose que vous avez laisser le 14 à 18 jours (comme sur la vidéo) si vous vérifier seul un week-end est sauté dans l’affichage de date.

    1. Hello, je me suis mal expliqué dans le tuto mais le système des we est juste calculé sur le 1er we si le client achète le samedi ou le dimanche 🙂

  4. Merci Tuto au top !!
    Peut on mettre ce code sur la page d’accueil « Produit en vedette » ?
    Encore chapeau et merci pour votre travail !

    1. Hello et merci, oui il faut au lieu du product-template.liquid trouver le featured-product.liquid 😉

      1. Merci pour le travail que tu fais ! TOP
        J’ai réussi ) appliquer le code pour le product-template par contre je n’arrive pas à faire la même chose pour le featured-product. La date de la livraison ne change pas, il apparaît: Livraison entre le 20/11 et le 29/11
        Y a t il une astuce ?
        Merci

        1. Hello, il doit y avoir un conflit quelque part… Au besoin me MP pour voir cela ensemble

          1. bonjour j’ai le même soucis , sur la page produit l’estimation de livraison est correcte , en revanche sur la page d’acceuil , concernant le produit vedette la date est bloquée à « Livraison entre le 20/11 et le 29/11 »

            Merci d’avance.

  5. Bonjour Dgeo, super tuto encore une fois !
    Je souhaiterais ajouter la vérification du stock pour l’affichage de la date de livraison, à savoir :
    – quand la variante sélectionnée dispose de stock : afficher la date de livraison,
    – quand le stock de la variante sélectionnée est à zéro : afficher « épuisé »,

    J’ai tenté de rajouter {%- if selected_variant.available -%} (avec un {% else %} pour les autres cas) dans le script mais ça plante, tu as un tuyau ?

    Merci 🙂

    1. Hello, c’est délicat car le code n’est pas au niveau des variantes, on ne peut donc que vérifier le stock global et mettant {%- if out_stock -%} pour le reste faudrait faire un developpement sur mesure dans ce cas nous contacter ici : speedecom.freshdesk.com

      1. Merci pour ton retour, je vais tester avec cela déjà et sinon je me tournerais vers vous :). Bonne soirée !

  6. Bonjour Dgeo,
    Encore merci pour ce tuto, cela fonctionne au top (Y)
    Cependant je constate une problématique dans notre cas concernant le WE,
    En effet j’ai configuré « 2 » pour date de début et « 4 » pour date de fin.
    Si je prends exemple de ce qui est affiché aujourd’hui il est noté livraison entre le 27/04 et le 28/04

    Du coup j’ai modifié le JS comme ceci

    // estimer date de livraison
    var dateDebut = 2;
    var dateFin = 4;

    var fromDate = Date.today().addDays(dateDebut);
    if (fromDate.is().saturday() || fromDate.is().sunday()) {
    fromDate = fromDate.next().tuesday();
    }
    var toDate = Date.today().addDays(dateFin);
    if (toDate.is().saturday() || toDate.is().sunday() || toDate.is().monday() || toDate.is().tuesday()) {
    toDate = toDate.next().thursday();
    }
    document.getElementById(‘fromDate’).innerHTML = fromDate.toString(‘dd/MM’);
    document.getElementById(‘toDate’).innerHTML = toDate.toString(‘dd/MM’);

    Ce qui donne à l’exemple d’aujourd’hui pour une commande effectuée Livraison estimée entre le 28/04 et le 30/04

    Penses-tu que ca restera fonctionnel et cohérent comme ceci?

    Merci d’avance

    1. Hello, yes bravo c’est une bonne idée !

  7. Hello,

    Bon bah j’ai été un peu trop optimiste, en regardant ce matin il m’indiquait du coup from date 27/04 to date 29/04,
    Du coup ce n’est pas cohérent par rapport à l’affichage du Vendredi.

    Le fait de faire sauter des jours aura une incidence par exemple à partir du mercredi ou Jeudi, cela renverra automatiquement aux jours plus loin.

    Saurais-tu comment résoudre cela ? Que ce soit toutes les commandes à partir du Vendredi au Lundi qui soient afficher comme une livraison estimée entre le Mardi et le Jeudi suivant pour chaque semaine? sans que cela n’ai d’incidence les autres jours de la semaine?

    Merci d’avance

    1. Oui effectivement, à vrai dire on est sur du tuto gratuit, pour quelque chose de bcp plus évolué il faudrait coder un truc plus costaud 🙂 la de base la prise en compte du samedi et dimanche repose simplement sur le cas de figure ou client achète le WE uniquement ! ensuite le calcule se fait mais ne prendra pas les samedis et dimanches suivants. J’essaierai de rendre la chose plus poussée sur la V2 dés que je me libère un peu de temps 🙂

      1. Bonjour Dgeo Dev
        Super tuto c’est un vrai + pour mon site
        A quand le V2 évoqué ici ?
        J’ai le même problème que JWeb, je suis sur des délais de livraison courts (Entre J+1 et J+2) et je dois modifier manuellement pour le week end
        Merci
        Julien

        1. C’est corrigé au besoin 🙂

  8. Hello,

    Merci Dgeo, oui effectivement j’en ai bien conscience, c’était pourquoi je me demandais si vous aviez une idée concernant cela ^^,

    C’est noté, merci beaucoup en tout cas!
    Bon courage

    1. Hello, il faudrait me linker le lien du site en MP pour voir si une erreur est visible dans la console de developpement de chrome

  9. Hello,
    Merci de ce retour,

    Effectivement il y a bien une erreur mais qu’une seule il me note « date.today is not a function »

    Pourtant le script fonctionne,

  10. Hello, très bon tuto.

    Je n’ai pas le product.template donc je passe par le product.liquid mais aucun moyen de le mettre au bon c’est soit tout en haut de la page produit, soit en bas de la description (je suis sur fastlane) merci pour ton aide.

    1. Hello, je ne connais pas vraiment la structure du thème Fastlane mais je pense q’il doit prévoir des emplacements pour cela. Essayer de trouver un include « nomdufichier » appelé dans le product.liquid c’est des fichiers présent dans le dossier « sections » c’est donc un de ces fichiers qu’il faut investiguer… un product.description.liquid peut être ou nomenclature assimilée. Bonne chance.

  11. salut Dgeo j’espère que tu vas bien je ne trouve pas la Balise : H1dans product-template.liquid

    mon theme est streamline

    1. Hello, navré je ne connais pas du tout ce thème. l’idéal est de fouiller un peu ou demander au dev du thème de te renseigner 🙂

  12. Malheureusement ne semble pas fonctionner avec Pagefly :(.

    1. Hello, à ça les builders c’est tjs problématique 😀 en général cela fonctionne sur les thèmes non modifiés 😉

  13. Hello, j’utilise un thème le code fonctionne etc niquel, sauf le JS du coup ca reste affiché en 29/11 qui à une idée ? merci sinon super tuto

    1. Hello, étrange faudrait voir sur place 🙂

  14. super vidéo tres pratique 😉 le beug des jours de la semaine n’est pas bien grave j’ai mis les dates sans les conter pour etre sur mais j’aimerais savoir comment affichez la date de cette maniere sur le chekout.
    merci bcp

    1. Hello et merci pour le commentaire. Impossible sur le checkout shopify bloque l’accès désormais il faut passer par checkout x.

  15. Au top le tuto c’est super simple avec la video !! Merci Dgeo

  16. Tout les tutorielles sont très bien expliquer vraiment merci
    SVP pourriez vous faire une vidéo comment on faire une publicité FB ads?

  17. Bonjour,
    Ça fonctionne nickel et le rendu est très pro sur le thème Début.

    Merci bcp !!

    1. Hello, cool 😉

  18. Bonjour,

    J’ai un thème début, cela fonctionne parfaitement bien pour les pages produits.

    En revanche, je l’ai mis sur le produit mis en avant (featured.product template) mais la date apparait au 20/11 et 29/11.

    Que faut-il faire svp ?
    Merci beaucoup

    1. Hello, dans le code il faut modifier .template-product par body (sans le point)

    2. Bonjour encore! moi aussi j’utilise le theme debut et j’ai suivi les instructions mais ça ne fonction pas chez moi il y’a que la date livraison qui affiche et ce tout en desous des produits récommandés. j’ai besoin d’aise svp

      1. Bonjour, vous pouvez prendre contact avec nous ici pour voir si on peut vous aider : speedecom.freshdesk.com 🙂

  19. Bonjour,

    La date ne fonctionne pas sur le produit mis en avant sur le thème début.
    La date est bloquée au 20/11 et 29/11.

    Comment faire svp

    1. Hello, dans le code il faut modifier .template-product par body 🙂 (sans le point)

      1. bonjour j’ai le même soucis mais je ne vois pas de quel code vous parlez

        1. Le code du tuto a été mis à jour y a peu pour corriger ce problème. logiquement ca devrait être bon maintenant 🙂

        2. Il faut dans ce cas essayer de mettre le script js dans le featured-product.liquid en l’englobant d’une balise <script>le code </script>

  20. Désolé je ne m’y connais pas en code. De quel code parlez vous ? La partie SCSS, JS ou Html ?

    1. la partie js, changer : (".template-product") par ("body")

  21. dans la partie html comment faire pour avoir le bonne date ?

    1. Désolé je n’ai pas compris la question 🙂

  22. Bonjour, Dgeo. Merci pour le tuto. Cependant,une petite question : j’ai deux templates produits pour deux catégories de produits différents.
    Le premier template c’est dus stock que j’ai donc livraison 2 à 3 jours ouvrés.
    Le deuxième template c’est du drop livraison 10 à 20 jours.
    Comment pourrais-je mettre ce système en place avec deux délais de livraison différents.
    Merci à toi

    1. Il faudrait faire des conditions d’affichage selon l’identifiant du produit mais ce n’est pas évident sinon dans speedfly c’est possible 😉

  23. Bonjour et merci pour ce tuto ! j’aimerai le mettre en page produit mis en avant sur la page d’accueil, comment fair stp, encore merci pour tes tuto expliquer au millimètre !

    1. Hello et merci pour le message. Il faut le mettre dans le fichier Sections – featured-product.liquid 🙂

  24. bonjour, Dgeo merci pour ton tuto je voulais changer le texte que tu as mis dans le tuto « livré entre le et le  » pour plutot mettre  » si vous commandez maintenant vous serez livré entre le et le  »

    merci pour tout bonne journée

    1. Hello et merci pour le message. Il suffit de modifier le texte dans la partie HTML 😉

  25. Ma question précédente – Bonjour et merci pour ce tuto ! j’aimerai le mettre en page produit mis en avant sur la page d’accueil, comment fair stp, encore merci pour tes tuto expliquer au millimètre !

    Vôtre réponse – Hello et merci pour le message. Il faut le mettre dans le fichier Sections – featured-product.liquid

    Doit-je mètre uniquement ce code ?

  26. C’est bon j’ai réussi super merci beaucoup !!!

    1. Hello, ok super bravo ! 🙂

  27. Superbes explications.
    Mais comment doit-on procéder si on a des délais de livraisons différents selon les produits et fournisseurs. Par exemple entre 2 et 3 semaines sur certains produits. Tandis que pour d’autres les délais seraient plus courts. Par exemple entre 4 et 7 jours. Voire même d’autres variantes possibles de délais. Est-ce possible ou trop complexe?

    Merci d’avance pour votre réponse.

    1. Hello, c’est possible seulement sur speedfly en utilisant les champs personnalisés de la gestion avancée des produits dans l’app Speedecom

  28. Par ailleurs, je viens de me rendre compte qu’ en ayant fait vos modifications (pour ce tuto et un autre tuto, celui permettant de créer un Footer avec badges de confiance sur shopify), j’ai désormais un soucis à l’étape qui suit la validation du panier. Quand le client veut payer, la page de paiement ne s’affiche plus correctement. Tout est désordonné. En revenant au thème précédant que j’avais dupliqué avant ces modifications, tout revient à la normale. C’est bien dommage car tout fonctionnait parfaitement mais je ne peux pas conserver ces enregistrements car ça pose problème au niveau de la page de paiement (après validation du panier). Avez-vous une solution svp? Je précise que j’utilise speedfly. Mais peut être que speedfly permet de faire ces modif.sans suivre votre procédure de code.

    Merci d’avance.

    1. Hello, surement une erreur JS. le mieux si vous avez speedfly est de contacter le SAV ici 😉 speedecom.freshdesk.com

  29. Bonjour, j’ai résolue le problème de la validation de la commande qui s’affichait mal (du moins je crois que j’ai réussis) en utilisant le champ « optimisation et performances » et en cliquant sur Activer le surcharge.scss.liquid et Activer le surcharge.js.liquid J’ai l’impression que ça a permis de résoudre le soucis car depuis la partie validation de la commande s’affiche bien. . En tout cas speedfly est vraiment bien. Tout semble prévu quasiment. Faut juste bien chercher. Je le recommande.
    Sinon je vais aller voir sur speedfly les champs personnalisés de la gestion avancée des produits pour essayer d’adapter mes délais de livraison.

    Merci beaucoup. Vous êtes au top.

    1. Bonsoir et merci pour le message 🙂 parfait si vous avez réussi à résoudre votre soucis et si vous avez des interrogations sur le Thème Speedfly n’hésitez surtout pas à contacter notre équipe de support à cette adresse : speedecom.freshdesk.com 🙂 Merci et bonne continuation

  30. Bonjour,

    Est-ce possible de l’appliqué que pour une collection ?
    Par exemple un collection qui est livrée en 15/20j et une livrée en 5/10j

    1. Hello, oui mais c’est un peu complexe à faire 🙁

  31. Hello, merci pour le tuto ! C’est très soft et donc cool ! Je voulais demandé s’il était possible de mettre ça sur le produit en vedette ?
    J’ai aussi une autre question. J’ai une version de mon shop en anglais, et j’voulais avoir s’il y avait un moyen de faire en sorte que la version anglaise s’affiche lorsque quelqu’un change la langue ?

    Merci d’avance !

    1. Hello et merci pour le com. c’est en effet possible de le mettre sur le produit mis en avant. Il suffit de trouver dans le dossier sections le fichier généralement nommé featured-product.liquid. En ce qui concerne le changement de langue vous pouvez vous renseigner sur Weglot ou un device converter sur l’app store de Shopify 😉 Bonne journée

      1. Hello ! Merci beaucoup pour la réponse ! Je m’en vais donc le mettre sur le produit vedette. Ca fait super plaisir que tu répondes vite, je n’ai pas l’habitude de poster ahah. Bonne journée et merci !

        1. Hello, ok super 😉 bonne continuation !

  32. Hello à tous, j’ai une question pour DGEO dev. J’ai utilisé votre code pour implémenter les délais de livraison avec le logo du camion vert. Est-il possible d’ajouter une commande pour faire une exception sur une fiche produit ?

  33. Bonjour,
    le tuto marche tres bien mais le problème est que je suis en mono produit et quand j’ajoute mon produit sur ma page d’accueil avec la section produit en vedette rien ne s’affiche.. je suis obligé de créer une section page avec texte en calque avec bouton produit pour redirigez le client vers la fiche produit… auriez vous une solution ?

    1. Bonjour, il faut mettre le code prévu dans product-template.liquid dans le featured-product.liquid 🙂

  34. salut !
    je souhaiterais mettre 2 dates de livraisons différentes , j’ai donc copié collé les codes dans les mêmes fichiers que sur ton tuto mais ca ne marche pas , comment afire pour avoir 2 dates de livraison différentes sur la meme page produit stp ?

    1. Hello, navré le code n’est pas adapté pour être utilisé 2 fois 🙁

  35. Bonjour Dgeo, merci pour ce super tuto qui fonctionnait superbement bien sous le theme brooklyn, mais je suis a présent passée a un theme prestige et je galère a le faire apparaitre, est ce que ce tuto est adaptable sur tous les themes ? Merci encore pour ton travail !!!!

    1. Hello, oui c’est compatible sur tous le thèmes car c’est un fonctionnement standard 🙂 le mieux et de demander à leur support car ils parlent fr 😉

    2. Salut Eva ! Je suis sur le thème prestige aussi. J’aimerais savoir si tu as trouvé la solution ?
      Merci pour ta réponse !

  36. Bonjour, merci pour ce tuto très utile. Petit bemol, je souhaiterai mettre cette section sous le prix, malgré plusieurs essais je n’ai pas trouvé l’endroit. Soit il s’insère entre le titre du produit et le prix soit en dessous de la zone ajouter au panier…
    Pourriez-vous m’aiguiller sur la bonne manipulation à faire svp ?
    Cordialement.

    1. Bonjour, tout dépend du thème, le mieux serait de demander au support ce celui pour qu’ils puissent vous aider

  37. Merci pour ton tuto ! Ca m’intéresserait énormément de savoir comment procéder pour mettre en place le même bouton bleu qu’on peut voir dans la vidéo « LA LIVRAISON EST OFFERTE »

  38. Super merci beaucoup pour ces informations. J’aurai voulu indiquer le jour de la semaine en toute lettre avec le terme suivi de la date de ce même jour « dddd dd » pour donner ex. livré entre Lundi 04 et Mercredi 07. Tout fonctionne à merveille sauf que les jours « lundi, mardi » etc sorte en anglais. Y a t-il une fonction à intégrer dans la boucle pour faire paraître ces mots en français s’il vous plaît ?
    Merci pour tout

    1. Hello, oui ca ne fonctionnera pas avec les jours en lettre, il faut rester en chiffre 🙂

  39. Hello
    Merci pour ce super tuto mais je ne trouve pas le theme.scss.liquid dans asset, ni rien d’autre qui s’appelle .liquid.
    j’utilise le theme debut.
    J’ai essayé de telecharger un nouveau theme debut tout neuf mais il n’existe vraiment pas…Est-ce qu’il y a un moyen de le faire autrement ou alors de creer l’asset (ca j’ai reussi), mais quel code mettre a l’interieur?

    Merci pour votre aide!

    1. Hello, C’est tout simplement theme.scss du coup 😉

  40. Bonjour! super tuto comme d’habitude. pour moi ça a fonctionner tout de suite après avoir suivi tes explications. Nickel encore merci et bravo pour tout ton travail !

    1. Hello ! super et merci pour le commentaire 😉

      1. salut. aujourd’hui je me rend compte que ma date de fin n’avance plus. alors que ma date de début fonctionne bien. je m’explique, g régler 10 de début et 19 de fin. aujourd hui nous sommes le 10 -02, ça me mets livraison entre le 22-02 et le 01-03. Donc si mes calculs sont bon en comptant les 2 jours du premier week-end je devrais me retrouver à 03-03 pour la date de fin . serais dus au fait qu’il y a que 28 jours au mois de février? n’y a t-il pas une condition à rajouter? et si c le cas comment faire?
        Merci d’avance pour ta réponse. à++++

        1. Hello, en effet ne prend pas en compte les WE sauf si la commande est passée un samedi ou un dimanche ou la on rajoute 1 ou 2 jours sur la commande.

  41. bonjour
    es ce que il y a une moyenne pour changer le date de livraison pour certain produits seulement car il ya des produit livré en 3 jours par exemple
    merci

    1. Hello, c’est possible mais cela demande un développement sur mesure ou un mix avec d’autres tutos comme celui qui explique comment personnaliser une fiche produit

  42. Bonjour,

    Merci beaucoup pour l’astuce. Je souhaite savoir comment ajouté « Livraison demain » plutôt qu’entre telle et telle date?

    Bon courage

    1. Hello, dans ce cas il faut supprimer la partie JS et ne garder que l’image et remplacer le texte

  43. Merci bien! 🙂

  44. Bonjour merci beaucoup pour tout ces tutos, vraiment top ! Par contre, vous savez comment personnaliser les dates selon deux produits ? Par exemple j’ai un produit que je livre en 10 jours et un autre en 15 jours, comment différencier dans le code ? Merci beaucoup !

    1. Hello, c’est un peu plus complexe, le mieux serait de passer par une app ou un dev sur mesure.

  45. Merci pour vos conseils. J’aimerais si possible savoir comment modifier le style de texte ?

    1. Hello, il faut aller dans votre ficher .scss.liquid ou css.liquid ou css et mettre ceci : .dg-shipping-date { votre style } remplacer votre style par le style voulu

  46. Bonjour et merci pour toutes ces astuces. Est-il possible d’afficher le nom du mois en remplacement de son numéro ?

  47. Bonjour et merci pour ce génial tuto.
    J’ai une question pour vous :c’est quoi le code pour {{la date d’aujourd’hui +30 jours }} qui peut êtres utilisé sur un e-mail shopify ?
    merci d’avance pour votre réponse

    1. Merci, c’est assez complexe à expliquer surtout si ca doit être dans une notification 🙁

  48. Bonjour,

    J’ai suivi le tuto cependant les dates restent figées à « LIVRAISON ENTRE LE 20/11 ET LE 29/11 »
    J’ai bien ajouté le jquery mais rien n’y fait :/

    1. Hello, il faut regarder si y a des erreurs dans la console (outil de développement chrome)

  49. Bonjour super tuto! J’aimerais savoir si c’est possible d’aligner cote à cote ces 3 éléments? Merci par avance

    1. Hello, oui mais il faut avoir des connaissances en CSS et média queries 🙂

  50. bonjour, la date de livraison reste de 20/11 au 29/11 comment on peut changer cela je suis sur le theme

    1. Hello, c’est un soucis javascript, faudrait voir selon le thème

  51. Bonjour,

    j’ai réussi à paramétrer le code pour la page produit
    mais par contre pour collection vedette en page d’accueil la date de livraison reste de 20/11 au 29/11, quel manip faut-il faire ? possible

    comment te contacter en mp ?

    1. Hello, il doit y avoir un conflit quelque part. essayer d’ouvrir la console de développement et de regarder les erreurs js rouge.

  52. Bonjour ,
    J’ai rien qui s’affiche j’ai parametre comme sur la vidéo mais rien

    1. Hello, pas le bon fichier peut être ? sinon le mieux est de demander au support du thème en question qui pourra aiguiller 🙂

  53. Je n’arrive pas a le mettre sous le prix 🙁 j’ai tout essayez mais il s affiche entre le nom du produit et le prix c’est trop moche :'(
    peux tu m’aider GDEO

    1. Hello, hum ca dépend du thème, il faut persévérer 🙂 met des toto1, toto2 etc partout dans le fichier histoire de mieux repérer les zones

  54. Cool j »ai réussi DGEO 😀 , mais un autre soucis s’avere etre compliquer
    la date delai de livraison est repoussé à plus d’un mois malgré que j’ai bien inscrit 5 à 7 jours :((
    Je te met le lien de mon site

    1. Hello, étrange, y a des erreurs dans la console chrome -> outils de developpement ?

  55. Bonjour et merci pour ton site pour commencer !
    Le code fonctionne bien et j’essaie de le modifier pour changer les var dateDebut et dateFin en fonction du vendeur {%if product.vendor ==XXX %} , j’y suis presque mais je bloque, si tu as un tuyau c’est cool !

    1. Hello, malheureusement on ne peut pas si facilement car tu essaie de mettre du langage liquid dans du javascript… Il faudrait un dev spécifique ou alors dupliquer salement le code 2 fois entouré des conditions. if vendor … mettre tout le script avec dates différentes etc…

  56. Salut dgeo, est il possible d’ajouter un emoji sur la page panier ?? en passant par du code

  57. Bonjour petit soucis la date reste la meme depuis une semaine….Merci

    1. Hello, il faut regarder si y a un pas une erreur console rouge. Demander au support du thème la compatibilité. Sinon retirer le code 🙂

  58. Bonjour,
    Merci et bravo pour ces tutos très utiles !!
    Je débute en la matière, comment modifier les informations, comme la date de livraison, selon les produits, le stock, délai, etc.. ?
    Ici la modif’ du code agit sur tous les produits du website ..
    Merci bcp !

    1. Bonjour et merci pour le com 🙂 c’est trop complexe pour un tuto. Il faudrait un développement sur mesure pour cela.

  59. bonjour, quand je publie le code la date c’est avril alors qu’on est au mois de mai .

    1. Hello, c’est que le js est mal interprété ou mal mis 🙂 faudrait voir avec le support de votre thème 🙂

  60. Bonjour,

    J’ai le même problème que Jean, j’ai un mois d’écart sur la date affichée.
    Exemple nous somme le 07/06 avec livraison en 5 jours cela m’affiche une livraison pour le 12/05.

  61. Hello. Encore merci pour ce tuto mais problème identique à 2 pers avant moi. C’est le mois précédent qui s’affiche (theme debut).
    Merci bcp.

    1. Du coup j’ai ajouter +30 aux 2 paramètres de jours.

    2. Hello, effectivement j’ai fais une boulette sur mon code 😀 c’est désormais corrigé – reprendre uniquement la partie JS (javascript) 😉 Merci d’avoir insisté 😉

      1. Merci pour la réactivité, j’avais passé du temps à chercher d’où venait le souci sans jamais trouver donc en attendant, j’avais ajouté +30, mais là avec le nouveau code ça marche nickel. Merci encore à toi.

        1. Merci à toi pour la remontée du bug 😉 bonne soirée

  62. bonjour, je voulais savoir si vos codes marchent aussi pour un site six et comment faire pour le connecter sur wix

    1. Bonjour, non navré c’est uniquement pour shopify

  63. Bonjour
    Merci pour ce Tuto. J’ai réussi sans problème à l’école mettre en place
    Toutefois, comment modifier le langage svp ?

    1. Hello, pour le langage c’est au niveau de la partie html 🙂

  64. Bonjour,
    Super les tutos, merci pour ces partages.
    Thème DAWN. Je rencontre un pb déjà évoqué précédemment avec un décalage d’un mois sur les dates (mois de mai qui s’affiche alors qu’on est en juin). Du coup j’utilise l’astuce du +30… Ceci dit il est mentionné que le code a été corrigé pour pallier ce dysfonctionnement… or j’ai bien utilisé celui qui est fourni sur cette page mais le pb est toujours là… pouvez-vous m’aider ? merci

  65. Salut dgeo TOP CE TUTO
    mais c’estetrange car il n y a pas la 3e partie qui s’affiche sur mon site , celle de la date de livraison entre etc
    elle n’apparait pas

    1. Hello et merci pour le com 🙂 c’est surement que le thème n’est pas compatible ou un soucis de copier / coller dans le mauvais fichier peut être ?

  66. Hello Dgeo Dev, merci pour ce tuto et pour les autres d’ailleurs 🙂
    Je remarque un souci aujourd’hui cependant : on est le 15/12, j’ai un paramètre à +15 jours pour date de début et la date affichée est le 32/12.. ^^
    Sais-tu de quoi cela peut venir ?
    Merci pour ton retour

    1. Hello, merci c’est sympa 🙂 étrange je vais regarder ça et mettre à jur le tuto si y a un soucis 🙂

  67. bonjour, même problème, la date de livraison estimé affiche 28/01 – 32/01…

    1. Bonjour, le code a été modifié – vous pouvez retester juste en modifier la partie js 😉 bonne journée

  68. Salut Dgeo!

    Merci pour la vidéo et les codes !
    Cependant j’ai besoin de mettre un délais plus long que celui affiché actuellement sur mon site, car je fais du Dropp.
    Je suis actuellement entre 2 et 4 jours, j’aimerai passer à 8 à 10 jours environ,
    J’ai lu dans les précédents message qu’on pourrait rajouter un « +(nombre) » quelque part ? mais je ne m’y connait pas du tout en code..

    Pourrez tu me dire la marche à suivre ? (je suis sur Dawn si besoin)

    merci 🙂

    1. Hello ! oui il faut simplement adapter les variables suivantes :
      dateDebut = 2, et mettre 8
      dateFin = 4, mettre 10

Laisser un commentaire

Fermer le menu
×
×

Panier