🚀 Comment configurer un formulaire popup
ℹ️ 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.
Vous voulez recueillir des courriels, des numéros de téléphone ou des détails personnalisés quand les acheteurs sont les plus engagés? 📝
C'est exactement ce que Formulaire popup en Hoppy Popups est construit pour. Il vous permet de créer un formulaire d'inscription entièrement personnalisable qui apparaît n'importe où sur votre magasin — et transforme les visiteurs occasionnels en abonnés que vous pouvez commercialiser à plus tard ✨
Avec un formulaire Popup, vous pouvez collecter :
- 📧 Adresses e-mail pour votre newsletter
- 📱 Numéros de téléphone pour les mises à jour SMS
- 🎂 Détails personnalisés comme anniversaires, préférences ou tailles
- 🎁 Récompenser les nouvelles inscriptions avec un code de réduction automatique
Ce guide vous accompagne dans la configuration de votre premier formulaire Popup étape par étape, en utilisant seulement les paramètres dont vous avez besoin pour l'obtenir en direct.
⚠️ Avant de commencer
Avant de configurer votre formulaire Popup, assurez-vous:
- Les Hoppy Popups app est installé sur votre Shopify magasin
- Les App Intégré est activé dans votre thème (configuration unique — couvert ci-dessous)
- Vous savez quelles informations vous voulez recueillir auprès des acheteurs
Facultatif, mais utile pour décider à l'avance:
- 🎁 Un code de réduction que vous souhaitez récompenser les nouveaux abonnés avec
- 🔗 Où les abonnés doivent être stockés (à l'intérieur de l'application, ou synchronisés avec un outil de messagerie comme Klaviyo)
ℹ️ Ce guide met l'accent sur Formulaire popup type, qui prend en charge les champs de formulaire personnalisés. Les Email Capture PopUp fonctionne presque de la même façon — il saute simplement les champs personnalisés — de sorte que vous pouvez suivre ces étapes pour cela aussi.
✅ Étape initiale — Activer l'application intégrée
Pour que tout popup apparaisse sur votre boutique, l'intégration de l'application doit être activée à l'intérieur de votre Shopify thème.
Allez à :
Shopify Admin → Boutique en ligne → Thèmes → Personnaliser → App Embeds
Alors :
- Rechercher Hoppy Popups
- C'est parti. SUR
- Cliquez sur Enregistrer
💡 Tu n'as besoin de faire ça qu'une fois. Si elle n'est pas activée, Hoppy Popups vous rappellera également avec une bannière juste avant de publier — de sorte que vous ne le manquerez pas.
🛠️ Étape 1 — Créer un nouveau formulaire popup
Ouvrir la Hoppy Popups application de votre Shopify Admin.
Alors :
→ Cliquez sur Créer un nouveau popup
Cela ouvre la Choisir le type de pop-up écran.
→ Trouvez la Formulaire popup carte → Cliquez Créer un formulaire popup
La page de configuration s'ouvre automatiquement avec :
- A Contenu onglet — ce que le formulaire dit et recueille
- A Conception onglet — comment le popup ressemble
- A Placement onglet — quand et où il apparaît
- A Aperçu en direct sur la droite, pour que vous puissiez voir les changements que vous allez 👀
📝 Étape 2 — Ajouter votre contenu de formulaire
Vous commencerez à l'intérieur Contenu onglet. Ceci contrôle les acheteurs de texte voir et les informations que votre formulaire recueille.
🏷️ Nom du formulaire popup
Ce nom est uniquement pour votre référence interne.
Les acheteurs ne le verront jamais.
Utilisez quelque chose de reconnaissable, comme :
- Accueil Newsletter Inscription
- Formulaire du club d'anniversaire
- Welcome Discount Popup
💡 Un nom clair facilite la gestion de plusieurs popups plus tard.
💬 Titre & Description
C'est le message principal shoppers voir en haut de la popup.
Exemple
- Titre: "Joignez-vous à notre club d'anniversaire 🎂"
- Exposé succinct: "Inscrivez-vous et recevez un cadeau spécial pour votre anniversaire."
Soyez bref, amical et concentrez-vous sur l'avantage de vous inscrire.
Vous pouvez également ajouter une Logo au-dessus du titre si vous voulez que le popup se sente plus sur la marque.
📧 Champ de courriel
C'est le noyau de la plupart des formulaires d'inscription.
Quand Afficher le champ Email est activé, deux champs supplémentaires apparaissent:
- Emplacement du champ de courriel → le texte de l'indice à l'intérieur de la boîte, par exemple "Entrer votre email"
- Message d'erreur → montré si un client entre un courriel invalide
📱 Champ Téléphone / SMS
Allumez Afficher le champ Numéro de téléphone (SMS) si vous voulez également collecter des numéros de téléphone.
Lorsque activé, quelques autres options apparaissent :
- Code pays par défaut → pré-sélectionne le pays pour le numéro de téléphone
- Porte-champ téléphonique
- Message d'erreur du téléphone
Ceci est utile si vous prévoyez d'envoyer des offres SMS ou de commander des mises à jour plus tard 📲
🧩 Champs de formulaire personnalisés
C'est ce qui fait Formulaire popup spécial — vous pouvez demander presque n'importe quoi, pas seulement un email.
→ Cliquez sur Ajouter un champ pour créer une nouvelle question
Pour chaque champ, choisissez Type de champ:
- Champ texte
- Lignes multiples
- Boutons radio
- Cochez les cases
- Décrochage
- Sélection multiple
- Numéro
- Lien
- Téléchargement de fichier
- Date
- Heure
- Évaluation
Alors donne-lui une Étiquette — c'est la question que les acheteurs voient, comme "Votre anniversaire" ou "Comment avez-vous entendu parler de nous?".
Selon le type de champ, quelques options supplémentaires apparaissent automatiquement :
- 📝 Titulaire → apparaît pour les champs texte (texte, plusieurs lignes, nombre, lien, temps)
- ✅ Options → apparaît pour les champs de choix (radio, cases à cocher, menu déroulant, multi-sélection), où vous ajoutez les réponses shoppers peuvent choisir
- ❗ Requis → allumer si les acheteurs doivent répondre avant de soumettre
⚠️ Votre formulaire doit inclure au moins une de ceux-ci: un champ Email, un champ Téléphone, ou un champ Personnalisé. Sinon, il n'y a rien à remplir pour les acheteurs.
💡 Un tout nouveau formulaire Popup commence déjà avec un champ Email, un champ Téléphone et un échantillon Anniversaire champ de date — afin que vous puissiez lancer rapidement et ajuster à partir de là.
🔘 Soumettre le texte du bouton
C'est le bouton shoppers cliquez pour envoyer le formulaire.
Définir la Texte du bouton à quelque chose qui est axé sur l'action, comme:
- Inscrivez-moi.
- "Get My Discount"
- "Rejoins le Club"
Lorsque votre formulaire a des champs, ce bouton automatiquement soumet le formulaire — pas de configuration supplémentaire nécessaire.
✔️ Case à cocher (facultative)
Vous pouvez ajouter un Boîte à cocher Opt-In donc les acheteurs acceptent activement de recevoir du marketing de vous.
Une fois allumé, Texte de l'option l'éditeur apparaît où vous pouvez écrire votre message de consentement, comme:
"Oui, envoyez-moi des offres et des mises à jour exclusives."
Cela vous aide à recueillir le consentement de marketing clair et de rester conforme 🙌
🎉 Étape 3 — Définir ce qui se passe après l'inscription
Après qu'un shopper soumet le formulaire, le popup passe à un État de réussite. - C'est votre chance de les remercier et de les récompenser.
Vous trouverez ces paramètres au bas de la Contenu onglet.
💌 Message et description de la réussite
Écrivez les shoppers de remerciement voir juste après avoir soumis.
Exemple
- Message de réussite : "Vous êtes dedans ! 🎉"
- Description du succès : "Voici ta récompense pour t'être joint à nous."
🎁 Récompense avec un rabais (facultatif)
Une petite récompense peut augmenter considérablement les inscriptions.
ℹ️ Ce champ est disponible une fois Afficher le code de coupon est porté à OUI.
Pour afficher un code de coupon, vous pouvez :
- Sélectionnez l'un des codes de coupon que vous avez créé dans Shopify Admin → Réductions en cliquant sur Sélectionner/Modifier la Réduction.
- Vous pouvez en créer un nouveau en cliquant sur Créer un nouveau rabais.
Exemple
- SAUVE10
- BIENVENUE20
- COUPON123
💸 Demande de rabais
Cette option contrôle l'application de la réduction. Il a deux options:
- Le client devra appliquer la réduction manuellement — le client devra entrer le code de coupon lors de la commande pour recevoir la réduction.
- Appliquer automatiquement la réduction — la réduction sera appliquée automatiquement pendant la commande sans que le client ait à entrer le code de coupon.
⚠️ Important:
- Notre application ne crée pas ou ne gère pas les codes de coupons/réductions. Vous devez les créer dans Shopify Admin → Réductions avant de les utiliser dans le popup.
➡️ Bouton de réussite (facultatif)
Vous pouvez également afficher un bouton sur l'écran de réussite.
Allumez Afficher le bouton Success CTA, et deux champs apparaissent:
- Texte du bouton succès → Par exemple "Démarrer le shopping"
- Lien du bouton succès → où le bouton doit emmener les acheteurs
C'est une belle façon d'envoyer de nouveaux abonnés directement sur une page de collection ou de vente 🛍️
ℹ️ Chaque inscription est enregistrée automatiquement à l'intérieur Hoppy Popups → Abonnés. Si vous souhaitez des abonnés envoyés à un outil de messagerie comme Klaviyo ou Mailchimp, vous pouvez le connecter dans le Intégrations onglet — voir le guide consacré aux intégrations pour la configuration.
📍 Étape 4 — Choisissez quand et où elle apparaît
Maintenant ouvre le Placement onglet. Ceci contrôle le moment, la fréquence et l'emplacement du popup.
Quand doit - il apparaître? (Trigeur)
Choisir une Type de déclenchement, puis utiliser Afficher pop up après pour affiner le timing:
- Après le temps (Durée) → immédiatement, ou après quelques secondes sur la page
- Retour à la page → après qu'un shopper défile partiellement vers le bas
- Objet de sortie → quand un acheteur est sur le point de partir
- Ajouter au panier le bouton est cliqué → quand un article est ajouté, ou quand le panier passe une valeur
- Après les vues de la page → après qu'un client ait vu un certain nombre de pages
Certains déclencheurs révèlent des options supplémentaires — par exemple, Objet de sortie vous laisse choisir ce que signifie « quitter » et Ajouter au panier vous permet de réagir à une valeur minimale du panier.
💡 Un court délai (quelques secondes) est un défaut amical – il donne aux acheteurs un moment pour regarder autour avant que le formulaire apparaît.
🔁 Combien de fois devrait - il se manifester?
Sous Affichage des paramètres, choisissez à quelle fréquence le popup revient:
- Afficher chaque fois → apparaît sur chaque visite
- Une fois à chaque visite → une fois par visite, et s'arrête après la présentation du formulaire
- Fréquence limite → après avoir été fermé, attendez un certain nombre de jours avant de montrer à nouveau
ℹ️ Une fois qu'un shopper soumet le formulaire, le popup cesse de leur montrer automatiquement — donc vous ne demandez jamais deux fois.
📄 Où devrait - il apparaître?
Utilisation Affichage pour choisir les pages où le formulaire apparaît :
- Chaque page
- Page d'accueil seulement
- Toutes les pages de produits
- Pages spécifiques de produits
- Collections ou collections spécifiques
- Produits avec des étiquettes spécifiques
Lorsque vous choisissez une option spécifique (comme un produit ou une collection), un sélecteur apparaît pour que vous puissiez choisir exactement laquelle.
📐 Fonction
Choisissez où se trouve le popup à l'écran :
- Centre pour un popup classique et captivant
- A coin (comme en bas à droite) pour une sensation plus douce, glisse
ℹ️ La visibilité de l'appareil (Desktop, Mobile, ou les deux) est définie dans le Conception onglet. Des règles plus avancées, comme le ciblage par l'état de connexion client, les balises, les dépenses à vie, le pays ou la source UTM, sont également disponibles. Ceux-ci sont couverts par le Cible guide donc cette configuration reste simple.
📅 Une campagne limitée ? Vous pouvez ajouter un Démarrer et Fin date Calendrier. Par défaut, le formulaire s'exécute en continu (démarre dès maintenant, jamais fini). Voir Calendrier guide pour les campagnes d'information.
🎨 Étape 5 — Styler le popup (facultatif)
Ouvrir la Conception onglet pour faire la popup correspondre à votre marque.
Ici vous pouvez rapidement ajuster des choses comme:
- Les Modèle pour commencer par un look prêt à l'emploi
- Les Taille du popup et style de position
- Couleurs, policeset espacement
- Les bouton et champ d'entrée Style
- A recouvrement de fond et entrée animation
Vous n'avez pas besoin de toucher n'importe quel de ceci pour aller en direct — les défauts sont superbes hors de la boîte ✨
Pour une visite complète de chaque option de style, voir Conception et style guide. Pour les ajustements avancés, les CSS personnalisé guide vous permet d'affiner les détails avec votre propre code.
✅ Étape 6 — Enregistrer et publier
Une fois que tout semble bon dans l'aperçu:
- Enregistrer votre formulaire popup
- Cliquez sur Publier pour le faire vivre sur votre devant de magasin
⚠️ Sauver seul ne fait pas publier le formulaire. Toujours cliquer Publier Quand tu seras prêt pour le voir.
Après la publication, les mises à jour du badge d'état du popup afin que vous puissiez dire en un coup d'oeil si c'est Publié, Non publié, Prévuou Expiré.
💡 Si l'intégration de l'application n'est pas encore activée, Hoppy Popups montrera un rappel avec un Activer l'intégration de l'application bouton juste après avoir publié — il suffit de le suivre et vous êtes réglé.
💡 Conseils utiles
- Testez votre formulaire en ouvrant votre magasin Incognito / Privé fenêtre et soumettre un courriel de test — puis vérifier Abonnés pour confirmer son arrivée
- Garder les formulaires courts — demander juste un email obtient généralement le plus d'inscriptions 📈
- Assurez-vous qu'au moins un champ (Courriel, Téléphone ou Personnalisé) est activé, ou le formulaire ne peut pas être soumis
- Vous voulez le formulaire dans une autre langue? Vous pouvez ajouter des traductions dans le Traductions section — voir le guide de traduction
🎉 Résultat final
Une fois configuré et publié :
✅ Les acheteurs voient un beau formulaire d'inscription sur la marque
✅ Les courriels, numéros de téléphone et détails personnalisés sont collectés automatiquement
✅ Les nouveaux abonnés peuvent recevoir instantanément une remise
✅ Le formulaire apparaît au bon moment, sur les bonnes pages
✅ Chaque inscription est enregistrée et prête à être synchronisée avec vos outils marketing
Un formulaire Popup bien conçu est l'une des façons les plus faciles de faire croître votre public et de transformer les visiteurs pour la première fois en clients à long terme 🚀
Mis à jour le : 10/09/2026
Merci !