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:

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>

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.

« Comment créer une animation CSS sur Shopify

Comment créer un vrai Bouton Acheter Maintenant en Direct Checkout sur Shopify »

Cet article a 151 commentaires

Max Harder'Z
13 Avr 2020 Répondre

Installé sans aucun souci 🙂 Merci pour tous ces tutos 😉
Julien Lescure
13 Avr 2020 Répondre

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. Dgeo Dev
  14 Avr 2020 Répondre
  
  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. Kouami
    17 Avr 2020 Répondre
    
    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. Dgeo Dev
      17 Avr 2020 Répondre
      
      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. Diallo
        27 Juil 2021
        
        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. Dgeo Dev
        30 Juil 2021
        
        Hello, étrange, vous avez le code sur codepen pour jeter un oeil ?
SANCHES
15 Avr 2020 Répondre

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. Dgeo Dev
  17 Avr 2020 Répondre
  
  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 🙂
Luc
19 Avr 2020 Répondre

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. Dgeo Dev
  20 Avr 2020 Répondre
  
  Hello et merci, oui il faut au lieu du product-template.liquid trouver le featured-product.liquid 😉
  1. Idir
    13 Juin 2020 Répondre
    
    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. Dgeo Dev
      15 Juin 2020 Répondre
      
      Hello, il doit y avoir un conflit quelque part… Au besoin me MP pour voir cela ensemble
      1. Haris
        13 Oct 2020
        
        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.
Maxime
24 Avr 2020 Répondre

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. Dgeo Dev
  24 Avr 2020 Répondre
  
  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. Maxime
    24 Avr 2020 Répondre
    
    Merci pour ton retour, je vais tester avec cela déjà et sinon je me tournerais vers vous :). Bonne soirée !
JWeb
24 Avr 2020 Répondre

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. Dgeo Dev
  24 Avr 2020 Répondre
  
  Hello, yes bravo c’est une bonne idée !
JWeb
25 Avr 2020 Répondre

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. Dgeo Dev
  25 Avr 2020 Répondre
  
  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. Julien
    31 Juil 2021 Répondre
    
    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. Dgeo Dev
      17 Mar 2023 Répondre
      
      C’est corrigé au besoin 🙂
JWeb
27 Avr 2020 Répondre

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. Dgeo Dev
  27 Avr 2020 Répondre
  
  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
JWeb
28 Avr 2020 Répondre

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,
Alexis
29 Avr 2020 Répondre

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. Dgeo Dev
  29 Avr 2020 Répondre
  
  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.
VDP
1 Mai 2020 Répondre

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

mon theme est streamline
1. Dgeo Dev
  2 Mai 2020 Répondre
  
  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 🙂
atchi
1 Mai 2020 Répondre

Malheureusement ne semble pas fonctionner avec Pagefly :(.
1. Dgeo Dev
  2 Mai 2020 Répondre
  
  Hello, à ça les builders c’est tjs problématique 😀 en général cela fonctionne sur les thèmes non modifiés 😉
damien crocq
3 Mai 2020 Répondre

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. Dgeo Dev
  4 Mai 2020 Répondre
  
  Hello, étrange faudrait voir sur place 🙂
tessier
6 Mai 2020 Répondre

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. Dgeo Dev
  11 Mai 2020 Répondre
  
  Hello et merci pour le commentaire. Impossible sur le checkout shopify bloque l’accès désormais il faut passer par checkout x.
Stephen LE GUEN
25 Mai 2020 Répondre

Au top le tuto c’est super simple avec la video !! Merci Dgeo
Thierno PLV
26 Mai 2020 Répondre

Tout les tutorielles sont très bien expliquer vraiment merci
SVP pourriez vous faire une vidéo comment on faire une publicité FB ads?
1. Dgeo Dev
  27 Mai 2020 Répondre
  
  Hello, merci 😉 non navré j’y connais rien en FB ads mais vous pouvez poser vos questions directement ici: https://arene.lecolisee.net/
Anaïs
26 Mai 2020 Répondre

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

Merci bcp !!
1. Dgeo Dev
  27 Mai 2020 Répondre
  
  Hello, cool 😉
Marco
17 Juin 2020 Répondre

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. Dgeo Dev
  18 Juin 2020 Répondre
  
  Hello, dans le code il faut modifier .template-product par body (sans le point)
2. ROSE
  7 Déc 2020 Répondre
  
  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. Dgeo Dev
    7 Déc 2020 Répondre
    
    Bonjour, vous pouvez prendre contact avec nous ici pour voir si on peut vous aider : speedecom.freshdesk.com 🙂
Marc-Ansley SAINVIL
17 Juin 2020 Répondre

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. Dgeo Dev
  18 Juin 2020 Répondre
  
  Hello, dans le code il faut modifier .template-product par body 🙂 (sans le point)
  1. bgbg
    13 Oct 2020 Répondre
    
    bonjour j’ai le même soucis mais je ne vois pas de quel code vous parlez
    1. Dgeo Dev
      14 Oct 2020 Répondre
      
      Le code du tuto a été mis à jour y a peu pour corriger ce problème. logiquement ca devrait être bon maintenant 🙂
    2. Dgeo Dev
      14 Oct 2020 Répondre
      
      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>
Marco
19 Juin 2020 Répondre

Désolé je ne m’y connais pas en code. De quel code parlez vous ? La partie SCSS, JS ou Html ?
1. Dgeo Dev
  19 Juin 2020 Répondre
  
  la partie js, changer : (".template-product") par ("body")
theo
6 Juil 2020 Répondre

dans la partie html comment faire pour avoir le bonne date ?
1. Dgeo Dev
  6 Juil 2020 Répondre
  
  Désolé je n’ai pas compris la question 🙂
Joel
14 Juil 2020 Répondre

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. Dgeo Dev
  16 Juil 2020 Répondre
  
  Il faudrait faire des conditions d’affichage selon l’identifiant du produit mais ce n’est pas évident sinon dans speedfly c’est possible 😉
Ali GUESSOUM
19 Juil 2020 Répondre

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. Dgeo Dev
  20 Juil 2020 Répondre
  
  Hello et merci pour le message. Il faut le mettre dans le fichier Sections – featured-product.liquid 🙂
  1. Dgeo Dev
    20 Juil 2020 Répondre
    
    Hello 🙂 il suffit de mettre le code de cette page : https://shopify.github.io/liquid-code-examples/example/show-product-sku
franck
19 Juil 2020 Répondre

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. Dgeo Dev
  20 Juil 2020 Répondre
  
  Hello et merci pour le message. Il suffit de modifier le texte dans la partie HTML 😉
Ali GUESSOUM
20 Juil 2020 Répondre

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 ?
Ali GUESSOUM
20 Juil 2020 Répondre

C’est bon j’ai réussi super merci beaucoup !!!
1. Dgeo Dev
  23 Juil 2020 Répondre
  
  Hello, ok super bravo ! 🙂
Momo
12 Août 2020 Répondre

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. Dgeo Dev
  13 Août 2020 Répondre
  
  Hello, c’est possible seulement sur speedfly en utilisant les champs personnalisés de la gestion avancée des produits dans l’app Speedecom
momo
13 Août 2020 Répondre

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. Dgeo Dev
  13 Août 2020 Répondre
  
  Hello, surement une erreur JS. le mieux si vous avez speedfly est de contacter le SAV ici 😉 speedecom.freshdesk.com
Momo
13 Août 2020 Répondre

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. Dgeo Dev
  16 Août 2020 Répondre
  
  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
Brimaen
17 Sep 2020 Répondre

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. Dgeo Dev
  18 Sep 2020 Répondre
  
  Hello, oui mais c’est un peu complexe à faire 🙁
SkinLover
24 Sep 2020 Répondre

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. Dgeo Dev
  25 Sep 2020 Répondre
  
  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. SkinLover
    26 Sep 2020 Répondre
    
    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. Dgeo Dev
      29 Sep 2020 Répondre
      
      Hello, ok super 😉 bonne continuation !
Laurent
14 Oct 2020 Répondre

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 ?
1. Dgeo Dev
  15 Oct 2020 Répondre
  
  Hello, une condition pour ne pas l’afficher sur une page précise ? oui c’est possible mais il faut s’y connaitre en css 🙂 au besoin regarder cette vidéo qui donnera une piste https://youtu.be/MItTZYhn_iE sinon nous contacter sur https://speedecom.freshdesk.com
beretta Amaury
17 Nov 2020 Répondre

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. Dgeo Dev
  19 Nov 2020 Répondre
  
  Bonjour, il faut mettre le code prévu dans product-template.liquid dans le featured-product.liquid 🙂
curtis
21 Nov 2020 Répondre

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. Dgeo Dev
  23 Nov 2020 Répondre
  
  Hello, navré le code n’est pas adapté pour être utilisé 2 fois 🙁
Eva
6 Déc 2020 Répondre

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. Dgeo Dev
  7 Déc 2020 Répondre
  
  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. Am
  12 Fév 2021 Répondre
  
  Salut Eva ! Je suis sur le thème prestige aussi. J’aimerais savoir si tu as trouvé la solution ?
  Merci pour ta réponse !
Meunier
9 Déc 2020 Répondre

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. Dgeo Dev
  9 Déc 2020 Répondre
  
  Bonjour, tout dépend du thème, le mieux serait de demander au support ce celui pour qu’ils puissent vous aider
Clément
31 Déc 2020 Répondre

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 »
1. Dgeo Dev
  31 Déc 2020 Répondre
  
  Hello, c’est ici 😉 https://dgeodev.com/rajouter-bandeau-clignotant-informatif-livraison-gratuite/
Batiste
29 Jan 2021 Répondre

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. Dgeo Dev
  29 Jan 2021 Répondre
  
  Hello, oui ca ne fonctionnera pas avec les jours en lettre, il faut rester en chiffre 🙂
Guillaume
2 Fév 2021 Répondre

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. Dgeo Dev
  4 Fév 2021 Répondre
  
  Hello, C’est tout simplement theme.scss du coup 😉
régis
4 Fév 2021 Répondre

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. Dgeo Dev
  5 Fév 2021 Répondre
  
  Hello ! super et merci pour le commentaire 😉
  1. régis
    10 Fév 2021 Répondre
    
    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. Dgeo Dev
      11 Fév 2021 Répondre
      
      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.
fatma DJEDID
10 Fév 2021 Répondre

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. Dgeo Dev
  11 Fév 2021 Répondre
  
  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
Hitch
16 Fév 2021 Répondre

Bonjour,

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

Bon courage
1. Dgeo Dev
  16 Fév 2021 Répondre
  
  Hello, dans ce cas il faut supprimer la partie JS et ne garder que l’image et remplacer le texte
Hitch
18 Fév 2021 Répondre

Merci bien! 🙂
max
6 Avr 2021 Répondre

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. Dgeo Dev
  10 Avr 2021 Répondre
  
  Hello, c’est un peu plus complexe, le mieux serait de passer par une app ou un dev sur mesure.
Amiemba
8 Avr 2021 Répondre

Merci pour vos conseils. J’aimerais si possible savoir comment modifier le style de texte ?
1. Dgeo Dev
  10 Avr 2021 Répondre
  
  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
Raphaël
11 Avr 2021 Répondre

Bonjour et merci pour toutes ces astuces. Est-il possible d’afficher le nom du mois en remplacement de son numéro ?
Tijani
16 Avr 2021 Répondre

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. Dgeo Dev
  16 Avr 2021 Répondre
  
  Merci, c’est assez complexe à expliquer surtout si ca doit être dans une notification 🙁
Thomas
23 Avr 2021 Répondre

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. Dgeo Dev
  23 Avr 2021 Répondre
  
  Hello, il faut regarder si y a des erreurs dans la console (outil de développement chrome)
jerome
16 Mai 2021 Répondre

Bonjour super tuto! J’aimerais savoir si c’est possible d’aligner cote à cote ces 3 éléments? Merci par avance
1. Dgeo Dev
  17 Mai 2021 Répondre
  
  Hello, oui mais il faut avoir des connaissances en CSS et média queries 🙂
sajeeben
1 Juil 2021 Répondre

bonjour, la date de livraison reste de 20/11 au 29/11 comment on peut changer cela je suis sur le theme
1. Dgeo Dev
  2 Juil 2021 Répondre
  
  Hello, c’est un soucis javascript, faudrait voir selon le thème
Yaco
25 Juil 2021 Répondre

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. Dgeo Dev
  27 Juil 2021 Répondre
  
  Hello, il doit y avoir un conflit quelque part. essayer d’ouvrir la console de développement et de regarder les erreurs js rouge.
Luca
4 Août 2021 Répondre

Bonjour ,
J’ai rien qui s’affiche j’ai parametre comme sur la vidéo mais rien
1. Dgeo Dev
  5 Août 2021 Répondre
  
  Hello, pas le bon fichier peut être ? sinon le mieux est de demander au support du thème en question qui pourra aiguiller 🙂
SAAB
13 Oct 2021 Répondre

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. Dgeo Dev
  14 Oct 2021 Répondre
  
  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
SAAB
18 Oct 2021 Répondre

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. Dgeo Dev
  20 Oct 2021 Répondre
  
  Hello, étrange, y a des erreurs dans la console chrome -> outils de developpement ?
William
19 Oct 2021 Répondre

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. Dgeo Dev
  20 Oct 2021 Répondre
  
  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…
far
26 Oct 2021 Répondre

Salut dgeo, est il possible d’ajouter un emoji sur la page panier ?? en passant par du code
1. Dgeo Dev
  28 Oct 2021 Répondre
  
  Hello, oui il suffit de trouver le fichier panier souvent cart.liquid ou cart-template.liquid et de rajouter un émo sur la liste suivante : https://fr.piliapp.com/facebook-symbols/
lauren
4 Déc 2021 Répondre

Bonjour petit soucis la date reste la meme depuis une semaine….Merci
1. Dgeo Dev
  5 Déc 2021 Répondre
  
  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 🙂
Nicolas
15 Jan 2022 Répondre

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. Dgeo Dev
  15 Jan 2022 Répondre
  
  Bonjour et merci pour le com 🙂 c’est trop complexe pour un tuto. Il faudrait un développement sur mesure pour cela.
Jean
26 Mai 2022 Répondre

bonjour, quand je publie le code la date c’est avril alors qu’on est au mois de mai .
1. Dgeo Dev
  27 Mai 2022 Répondre
  
  Hello, c’est que le js est mal interprété ou mal mis 🙂 faudrait voir avec le support de votre thème 🙂
Ygrekesse
7 Juin 2022 Répondre

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.
1. Dgeo Dev
  10 Juin 2022 Répondre
  
  Hello, vous pouvez me faire une demande ici et j’irai regarder sur votre boutique : support@speed-ecom.eu
Patrick
12 Juin 2022 Répondre

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. Patrick
  12 Juin 2022 Répondre
  
  Du coup j’ai ajouter +30 aux 2 paramètres de jours.
2. Dgeo Dev
  13 Juin 2022 Répondre
  
  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. Ygrekesse
    15 Juin 2022 Répondre
    
    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. Dgeo Dev
      17 Juin 2022 Répondre
      
      Merci à toi pour la remontée du bug 😉 bonne soirée
emy
1 Oct 2022 Répondre

bonjour, je voulais savoir si vos codes marchent aussi pour un site six et comment faire pour le connecter sur wix
1. Dgeo Dev
  2 Oct 2022 Répondre
  
  Bonjour, non navré c’est uniquement pour shopify
Jerry
5 Juin 2023 Répondre

Bonjour
Merci pour ce Tuto. J’ai réussi sans problème à l’école mettre en place
Toutefois, comment modifier le langage svp ?
1. Dgeo Dev
  6 Juin 2023 Répondre
  
  Hello, pour le langage c’est au niveau de la partie html 🙂
sossette
8 Juin 2023 Répondre

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
Sab
25 Sep 2023 Répondre

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. Dgeo Dev
  13 Oct 2023 Répondre
  
  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 ?
Flo
15 Déc 2023 Répondre

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. Dgeo Dev
  18 Déc 2023 Répondre
  
  Hello, merci c’est sympa 🙂 étrange je vais regarder ça et mettre à jur le tuto si y a un soucis 🙂
guiraud
26 Jan 2024 Répondre

bonjour, même problème, la date de livraison estimé affiche 28/01 – 32/01…
1. Dgeo Dev
  1 Fév 2024 Répondre
  
  Bonjour, le code a été modifié – vous pouvez retester juste en modifier la partie js 😉 bonne journée

Pourquoi afficher la date de livraison sur Shopify ?

Comment installer les codes ?

La partie CSS

Code de la formation Speedfly

La partie JS

La partie HTML

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment faire un Footer avec badges de confiance sur shopify ?

Comment mettre un lecteur audio pour lire de la musique sur Shopify

Comment Créer un Carrousel d’Avis sur Shopify

Cet article a 151 commentaires

Max Harder'Z

Julien Lescure

Dgeo Dev

Kouami

Dgeo Dev

Diallo

Dgeo Dev

SANCHES

Dgeo Dev

Luc

Dgeo Dev

Idir

Dgeo Dev

Haris

Maxime

Dgeo Dev

Maxime

JWeb

Dgeo Dev

JWeb

Dgeo Dev

Julien

Dgeo Dev

JWeb

Dgeo Dev

JWeb

Alexis

Dgeo Dev

VDP

Dgeo Dev

atchi

Dgeo Dev

damien crocq

Dgeo Dev

tessier

Dgeo Dev

Stephen LE GUEN

Thierno PLV

Dgeo Dev

Anaïs

Dgeo Dev

Marco

Dgeo Dev

ROSE

Dgeo Dev

Marc-Ansley SAINVIL

Dgeo Dev

bgbg

Dgeo Dev

Dgeo Dev

Marco

Dgeo Dev

theo

Dgeo Dev

Joel

Dgeo Dev

Ali GUESSOUM

Dgeo Dev

Dgeo Dev

franck

Dgeo Dev

Ali GUESSOUM

Ali GUESSOUM

Dgeo Dev

Momo