🚀 Comment placer le slot pickers sur la page du panier
ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.
Chaque thème pose sa page Cart un peu différemment — de sorte que le sélectionneur de fentes devrait s'asseoir exactement là où il a un sens pour Votre magasin 📍
Avec Fonction paramètres dans Hoppy Delivery Dates, vous pouvez contrôler où le slot se trouve sur la page du panier, comment il est aligné, et comment il est large — séparément pour le bureau et Mobile.
📌 Avant de commencer
- Hoppy Delivery Dates est installé et l'intégration de l'application est activée dans votre thème
- Vous êtes connecté à votre Shopify administrateur
- (facultatif) Si vous prévoyez d'utiliser un sélecteur CSS personnalisé, il aide à connaître la structure HTML de votre thème — l'outil Inspect de votre navigateur est votre ami ici 🔍
Étape 1 — Ouvrir la page d'apparence
Dans la navigation de l'application, allez Ă :
Hoppy Delivery Dates → Apparence
Trouvez la Fonction carte — c'est la première carte sur la page.
Étape 2 — Choisir un onglet de périphérique
La carte a deux onglets :
- Bureau 🖥️
- Mobile 📱
Les paramètres sont enregistrés séparément pour chacun, de sorte que vous pouvez affiner la position pour les écrans plus grands et plus petits. Configurez un onglet, puis passez à l'autre et répétez si nécessaire.
Étape 3 — Choisir Où le piqueur apparaît
Sous "OĂą voulez-vous placer le choix de date?", choisissez une des options radio:
- Par défaut (avant le bouton de caisse ou la fin de la page du panier) → l'application place automatiquement le récupérateur près de votre bouton de caisse. Cela fonctionne hors de la boîte pour la plupart des magasins, puisque l'application détecte votre thème et utilise un placement correspondant — aucune configuration nécessaire ✅
- Avant un élément HTML → le sélecteur est placé juste avant l'élément que vous spécifiez
- Au début d'un élément HTML → le sélecteur est placé à l'intérieur de l'élément, avant son contenu existant
- À la fin d'un élément HTML → le sélecteur est placé à l'intérieur de l'élément, après son contenu existant
- Après un élément HTML → le sélecteur est placé juste après l'élément que vous spécifiez
Utiliser un sélecteur CSS personnalisé
Choix de toute option autre que Par défaut révèle un champ texte supplémentaire. Saisissez le sélecteur CSS de l'élément que vous voulez cibler.
- Exemple d'emplacement :
.cart_input - Exemple de classe:
.cart-footer - Exemple d ' identification :
#main-cart-footer
⚠️ Si le sélecteur CSS ne correspond à aucun élément de votre page Panier, le sélecteur de fentes peut ne pas apparaître du tout. Vérifiez le sélecteur à l'aide de l'outil Inspect de votre navigateur, et visualisez toujours la page Cart après l'enregistrement pour confirmer que le sélecteur est visible.
💡 Si le sélecteur disparaît après avoir défini un sélecteur personnalisé, retournez à Par défaut et sauver — c'est le moyen le plus rapide de le restaurer.
Étape 4 — Définir l'alignement
Choisissez comment le récupérateur se range à l'intérieur de son contenant :
- Centre
- Gauche
- Droite
Exemple
- Un thème large et minimal semble souvent mieux avec Centre
- Si votre panier est à droite, Gauche peut garder les choses équilibrées
Étape 5 — Régler la largeur du conteneur (facultatif)
Utilisation Largeur du contenant du slot pour contrĂ´ler la largeur de l'appareil:
- Saisissez un nombre dans le champ largeur (p. ex.
100) - Choisissez l'unité dans la liste déroulante à côté : % ou Px
Exemple
100+%→ le piqueur s'étire pour remplir l'espace disponible400+px→ un ramasseur compact et fixe
ℹ️ Ce champ est facultatif — laissez-le vide pour laisser le piqueur utiliser sa largeur naturelle.
Étape 6 — Enregistrer et vérifier votre vitrine
Cliquez sur Enregistrer en haut de la page.
Puis ouvrez la page Cart de votre magasin et confirmez que le piqueur est assis exactement où vous le vouliez. N'oubliez pas de vérifier sur le bureau et mobile si vous avez configuré les deux onglets 👀
⚠️ Remarques importantes
⚠️ Les positions de bureau et de mobile sont configurées de manière indépendante — changer un onglet n'affecte pas l'autre.
ℹ️ Les Par défaut option est thème-aware: l'application détecte votre thème et choisit un endroit approprié automatiquement, donc c'est le choix le plus sûr si vous n'êtes pas sûr.
⚠️ Un sélecteur CSS incorrect ou périmé (par exemple, après avoir changé de thème) est la raison la plus courante pour laquelle le sélecteur cesse d'afficher — revérifiez-le d'abord si cela se produit.
🎉 Résultat final
Une fois configuré avec succès :
✅ Le sélectionneur de fentes apparaît exactement où vous le voulez sur la page du panier ✅ Desktop et Mobile obtiennent chacun leur placement idéal ✅ Alignement et largeur font que le sélectionneur se sent comme une partie naturelle de votre thème ✨
Mis Ă jour le : 10/09/2026
Merci !