Ajouter un sélecteur de date de livraison à votre panier
Vous pouvez inclure un calendrier à votre page de panier pour permettre aux clients de préciser une date de livraison pour leur commande.

Sur cette page
Inclure jQuery à votre theme.liquid
Pour que cette personnalisation fonctionne, certains thèmes nécessitent l’ajout d’une balise de script pour jQuery au fichier de mise en page theme.liquid. Si vous utilisez un thème Shopify gratuit, vous devriez peut-être effectuer l’étape suivante :
Dans le répertoire Mise en page, cliquez sur
theme.liquid
.Recherchez la balise de fermeture
</head>
dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture</head>
, collez le code suivant :
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
- Cliquez sur Enregistrer.
Créer un extrait de date de livraison
Pour créer un extrait pour votre sélecteur de date de livraison :
Bureau
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Extraits, cliquez sur Ajouter un nouvel extrait :
Créez l'extrait :
- Nommez votre extrait
delivery-date
. - Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre dans l’éditeur de code.
- Nommez votre extrait
Dans votre nouvel extrait
delivery-date.liquid
, collez le code suivant :
1. Cliquez sur Enregistrer.
iPhone
Dans l’application Shopify, appuyez sur le
.
Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
Appuyez sur Manage themes (Gérer les thèmes).
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Extraits, cliquez sur Ajouter un nouvel extrait :
Créez l'extrait :
- Nommez votre extrait
delivery-date
. - Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre dans l’éditeur de code.
- Nommez votre extrait
Dans votre nouvel extrait
delivery-date.liquid
, collez le code suivant :
1. Cliquez sur Enregistrer.
Android
Dans l’application Shopify, appuyez sur le
.
Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
Appuyez sur Manage themes (Gérer les thèmes).
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Extraits, cliquez sur Ajouter un nouvel extrait :
Créez l'extrait :
- Nommez votre extrait
delivery-date
. - Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre dans l’éditeur de code.
- Nommez votre extrait
Dans votre nouvel extrait
delivery-date.liquid
, collez le code suivant :
1. Cliquez sur Enregistrer.
Insérer l’extrait dans la page de votre panier
Pour insérer l’extrait de date de livraison dans la page de votre panier :
Dans le répertoire Sections, cliquez sur
main-cart-items.liquid
.Recherchez la balise de fermeture
</form>
dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture</form>
, collez le code suivant :
{% render 'delivery-date' %}
- Cliquez sur Enregistrer.
Vous avez maintenant un champ de saisie de date de livraison sur votre page de panier. Lorsque vous cliquez à l'intérieur du champ de texte, un calendrier s’affiche :

Le sélecteur de date utilisé dans cette personnalisation est un widget de la bibliothèque jQuery pour interface utilisateur.