Ce tutoriel vous expliquera comment utiliser l’application Probance Newsletter Form&PopUp dans l’éditeur de thème de Shopify pour personnaliser votre popup d’inscription à la newsletter.
1. Créer le formulaire
Avant toute chose, cliquez sur Probance POP-UP dans la liste des composants de votre éditeur de thème Shopify, puis sélectionnez Test mode dans la liste de sélection Display mode.
Cela vous permettra d’afficher la popup en continu dans l’éditeur pendant vos modifications.
La popup Probance est vide par défaut, vous devez définir son contenu en ajoutant des blocs à l’élément Probance POP-UP dans votre éditeur de thème Shopify
Celle-ci doit contenir :
- Au moins un champ de profil de type email
- Un bouton
- Un bloc de libellés et traductions
1.1. Ajout d’un champ Email et autres champs de profil
Dans l’élément Probance POP-UP, cliquez sur Ajouter un bloc, puis sélectionnez Contact Field.
Cliquez sur l’élément Contact Field nouvellement ajouté dans la liste des blocs pour accéder à son détail. Par défaut, le champ de profil est de type email. Cochez la case Required pour le rendre obligatoire.
Deux autres types de champ de profil sont disponibles : last name et first name, qui vous permettent d’ajouter des champs Nom et Prénom à votre formulaire.
1.2. Ajout d’un bouton
Dans l’élément Probance POP-UP, cliquez sur Ajouter un bloc, puis sélectionnez Button.
1.3. Ajout de libellés
Dans l’élément Probance POP-UP, cliquez sur Ajouter un bloc, puis sélectionnez Labels and translation.
2. Définir les libellés
Le bloc Labels and translation vous permet de modifier les textes et les libellés de votre popup ainsi que le message de confirmation affiché après validation du formulaire d’inscription, et les décliner pour chaque langue disponible (Français, Anglais et Espagnol).
Les champs Heading (correspondant au titre de la popup), Paragraph (correspondant au texte) et Success message (correspondant au message de confirmation) vous permettent de saisir du code HTML pour mettre en forme vos textes. Un lien vers l’éditeur WYSIWYG Online HTML Editor vous est fourni pour vous permettre de générer facilement le code HTML pour une mise en forme spécifiée.
Saisissez votre texte puis appliquez le style voulu à l’aide de l’éditeur. Cliquez ensuite sur Edit HTML source code pour générer le code HTML, que vous pourrez ensuite copier dans les champs de saisie de l’éditeur Probance POP-UP.
La section Label vous permet de modifier les libellés des champs de profil et du boutton de votre formulaire.
Note : Votre site est multilingue ? Lorsque vous paramétrez les labels pour chaque version, la popup s’affichera dans la bonne langue sans paramétrage supplémentaire. Si votre site est décliné en une langue qui n’est pas disponible dans les traductions, alors la popup ne s’affichera pas sur la version du site en cette langue.
3. Personnaliser la pop-up
Vous pouvez modifier l’apparence de chaque élément de la popup pour ajuster celle-ci à la charte graphique de votre site.
3.1. Apparence générale
Pour modifier l’apparence générale de la popup, cliquez sur Probance POP-UP dans la liste des composants de votre thème puis accédez à la section General. Elle contient les options suivantes:
- Background Color (1) vous permet de modifier la couleur de fond de la popup. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Overlay Opacity (2) vous permet d’ajuster l’assombrissement de la page en fond lorsque la popup est affichée. Plus l’opacité est élevée, plus le fond sera sombre. Une opacité à 100% affichera la popup sur un fond noir.
- Position (3) vous permet de modifier l’emplacement d’affichage de la popup dans la page.
- Rounded (4) vous permet d’arrondir les coins de la popup.
- Text position (4) vous permet de modifier l’alignement du titre, du paragraphe et du message de validation de la popup.
Vous pouvez modifier la couleur de l’icone de fermeture dans la popup dans la section Icon close, dans le champ Color.
3.2. Customisation des champs de profil
Pour modifier l’apparence des champs du formulaire de la popup, cliquez sur Probance POP-UP dans la liste des composants de votre thème puis accédez à la section Inputs. Elle contient les options suivantes:
- Size (1) vous permet de modifier la hauteur des champs formulaire.
- Background Color (2) vous permet de modifier la couleur de fond des champs du formulaire. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Color (3) vous permet de modifier la couleur du texte saisi dans les champs du formulaire. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Borderless (4) vous permet de masquer les bordures des champs du formulaire (option cochée) ou de les afficher (option décochée).
- Border color (5) vous permet de modifier la couleur de bordure des champs du formulaire. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Rounded (6) vous permet d’arrondir les coins des champs du formulaire (visible uniquement si l’option Borderless est décochée).
- Placeholder (7) only vous permet d’afficher les libellés dans les champs du formulaire (option cochée) ou au dessus des champs (option décochée).
- Text position (8) vous permet de définir l’alignement des libellés et textes saisis dans les champs du formulaire.
3.3. Ajout d’une image
Pour ajouter une image dans la popup, cliquez sur Probance POP-UP dans la liste des composants de votre thème puis accédez à la section Image.
Dans le champ Logo, cliquez sur sélectionner une image. Vous pouvez choisir l’image à intégrer dans la popup dans votre bibliothèque, ou choisir une image de votre répertoire en cliquant sur Importer. Cliquez sur l’image à utiliser puis sur Sélectionner.
- Position (1) vous permet de modifier l’emplacement de l’image dans la popup.
- Size (2) vous permet d’ajuster la taille de l’image.
- Margin (3) vous permet d’appliquer (option cochée) ou non une marge entre l’image et le bord de la popup.
Note: par défaut le champ Position est paramétré à None, ce qui masque l’image.
3.4. Customisation du bouton
Pour modifier l’apparence du bouton, sélectionnez le bloc Button dans la liste des éléments de la popup.
La section General contient les options suivantes:
- Font weight (1) vous permet de définir l’épaisseur de la police du libellé.
- Label color (2) vous permet de modifier la couleur de police du libellé. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Background color (3) vous permet de modifier la couleur de fond du bouton. Cliquez sur la pastille pour afficher le sélecteur de couleur.
- Position (4) vous permet de choisir l’alignement en largeur du bouton.
- Full width (5) vous permet de d’afficher le bouton en pleine largeur (option cochée).
- Size (6) vous permet de choisir la taille en hauteur du bouton.
La section Border contient les options suivantes:
- Border color (1) vous permet de modifier la couleur de bordure du bouton
- Border weight (2) vous permet de modifier l’épaisseur de la bordure du bouton
- Border radius (3) vous permet de modifier le rayon de courbe des coins du bouton
Les sections Hover et Transition vous permettent de configurer l’animation du bouton lorsqu’il est survolé par le curseur. Elles contiennent les options suivantes:
- Label color (1) vous permet de modifier la couleur de police du libellé au survol par le curseur
- Background color (2) vous permet de modifier la couleur de fond du bouton au survol par le curseur
- Border color (3) vous permet de modifier la couleur de bordure du bouton au survol par le curseur
- Border weight (4) permet de modifier l’épaisseur de la bordure du bouton au survol par le curseur
- Duration (5) permet d’ajuster la durée de la transition du bouton au survol par le curseur
- Position (6) permet de choisir le type d’animation au survol par le curseur
4. Définir les conditions d’affichage de la pop-up
Une fois votre popup construite, vous pouvez configurer son mode d’affichage. Pour cela, cliquez sur Probance POP-UP dans la liste des composants de votre thème puis accédez à la section Display rule.
4 affichages sont proposés dans le champ Display Mode:
- After scroll: la popup apparait lorsque le visiteur déroule la page
- Le champ Scroll offset vous permet de définir le niveau à partir duquel la popup doit s’afficher
- After delay: la popup apparait après après un délai défini
- The champ Displaying delay vous permet de définir le délai au bout duquel la popup doit s’afficher
- Disabled: la popup n’apparait pas
- Test mode: la popup s’affiche en continu – cet affichage est à reservée pour l’édition de la popup
Le champ Days between two displays vous permet de paramétrer la fréquence d’affichage de la popup aux visiteurs non enregistrés. Un paramètre à 0 affichera la popup à chaque fois que le visiteur accède à la page.
N’oubliez pas de sauvegarder régulièrement votre travail en cliquant sur Enregistrer, et de sélectionner le bon mode d’affichage avant chaque sauvegarde pour ne pas conserver votre popup en Test Mode.