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 14 à 18 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 colleurs des textes.

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

Ouvrez le dossier « Assets » et cliquez sur le fichier « theme.scss.liquid, style.scss.liquid, timber.scss.liquid » ou tout autre fichier « xxx.scss.liquid » pris en compte par votre thème.

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

.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;
}

La partie JS

Nous allons calculer la date approximatif de livraison entre 14 et 18 jours. N’oubliez pas de changer les variables « dateDebut » et « dateFin » selon vos propres préférences.

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

Ouvrez le dossier « Assets » et cliquez sur le fichier « theme.js, style.js, timber.js » (il peut y avoir le terme .liquid à la fin),  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:

(function() {
// estimer date de livraison
if(document.getElementById('fromDate')) {
  
  var dateDebut = 6;
  var dateFin = 12;

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

La partie HTML

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:

<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<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>
<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">20/11</span> et le <span id="toDate">29/11</span>
</p>
</div>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<div class="dg-shipping-date">
<p>
<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">20/11</span> et le <span id="toDate">29/11</span>
</p>
</div>

Si le tuto ne fonctionne vous pouvez essayer de rajouter ce code dans -> Layout – theme.liquid -> trouver la fermeture de la balise /head et sur la ligne du dessus copier/coller le code ci-dessous:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>  

 

Par contre si après cela cela ne va tjs pas je ne pourrai rien faire pour vous 😀

Bon tuto à toutes et tous 🙂

Ce tutoriel existe aussi en vidéo

Merci de me laisser une petite note 😉
[Note moyenne de: 4.8 sur 13 votes]

Cet article a 44 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 😉

  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

  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 🙂

  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)

  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)

  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 🙂

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine