Cet article est aussi disponible en :

🚀 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 disponible
  • 400 + 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

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !