Planifiez l’affichage de popup sur votre boutique Prestashop

Savez-vous ce qu’est un « splash screen » ? C’est un popup qui s’ouvre lorsqu’on arrive sur la page d’accueil d’un site. Le nouveau module Op’art planned popup va vous permettre de créer des splash screen mais bien plus encore.

Mon précédent module, Op’art ajax popup, ayant beaucoup de succès j’ai eu un grand nombre de retour à son sujet et notamment des utilisateurs qui voulaient « programmer » l’affichage de popup. Ce module n’étant pas fait pour cela, je ne pouvais pas intégrer cette fonction directement. J’ai donc développé « Op’art planned popup » un nouveau module dédié qui propose beaucoup d’options, voici quelques explications.

A noter: Vous pouvez retrouver tous mes modules de création de popup sur ma boutique.

Comme son nom l’indique ce module va vous permettre de planifier l’affichage de vos popup en indiquant une date de début et une date de fin, vous allez donc pouvoir, très simplement, indiquer à vos clients qu’une promotion est en cours par exemple. Mais je trouve qu’il est dommage de se limiter à la page d’accueil pour informer les visiteurs, c’est pourquoi j’ai fait en sorte qu’il soit possible de définir la ou les pages où les popups sont actifs. Cela vous permet par exemple d’afficher un popup sur une page produit spécifique afin d’indiquer au client qu’il y a un délai plus long pour la livraison où qu’il y a d’autres produits en rapport avec celui actuellement visité.

Vous allez également pouvoir créer autant de popup que nécessaire et les configurer indépendamment les uns des autres.

Vous pourrez définir une durée avant que le popup ne s’affiche ce qui permet de laisser un peu de répit à l’utilisateur lorsqu’il arrive sur votre page ou de lui afficher un popup s’il consulte une page depuis un certain temps pour lui proposer par exemple de contacter un conseiller.

Comme pour le module op’art ajax popup le contenu des popups peut être généré de différentes manières: en tapant directement le texte ou le code html, en incluant une Iframe ou en utilisant votre boutique.

A noter que le module est multilangue.

Il permet aussi de créer un popup pour votre newsletter afin d’augmenter sensiblement le nombre d’inscrits à votre mailing list.

Vidéo de démonstration

Afficher/masquer la transcription texte

Bonjour, aujourd’hui je vais vous parler du module « O’part planned popup » qui va vous permettre de planifier l’affichage automatique de pop-up sur votre boutique Prestashop.

Donc la première étape est d’installer le module, ce que j’ai déjà fait. Une fois que votre module est installé, vous avez un onglet « O’part planned popup » qui apparait ici et il vous suffit de cliquer sur « pop-up ». Vous arrivez alors sur le système d’administration des pop-up. Ici pour l’instant il n’y a pas encore de pop-up de créé donc je vais en créer un. Le titre vous permet de retrouver plus facilement le pop-up dans la liste. Je vous parlerai de la partie CMS plus tard et la partie responsive également. Donc dans un premier temps, je vais rajouter un texte. Vous pouvez utiliser l’option HTML pour ajouter une iframe ou une vidéo ou toute autre chose plus complexe que du texte et vous pouvez évidemment utiliser les systèmes ici, pour faire de la mise en page. La largeur correspond à la largeur du pop-up ainsi que la hauteur. Etant donné qu’il s’agit de planifier l’affichage des pop-up, on peut spécifier une date de début d’affichage et une date de fin. Donc là je vais mettre aujourd’hui pour la date de début et demain pour la date de fin. La durée du cookie va vous permettre de spécifier un nombre de jours pendant lequel le pop-up se n’affichera plus lorsque l’utilisateur aura fermé le pop-up une première fois en fait. Donc là pour la démonstration je vais mettre 0 afin qu’il s’affiche systématiquement. Le temps avant affichage vous permet d’indiquer une durée avant que le pop-up ne s’affiche lorsque le visiteur arrive sur la page. Donc si vous mettez par exemple 6000, c’est des millisecondes, le pop-up attendra 6 secondes avant de s’afficher. Pour le coup je vais mettre également 0 afin que le pop-up s’affiche immédiatement et je vais mettre « visible sur toutes les pages ». Donc là mon pop-up apparait bien ici. Il suffit d’aller rafraichir la page d’accueil et on voit que le pop-up apparait. Etant donné qu’on a mis « visible sur toutes les pages », si je vais voir une page fournisseurs par exemple, le pop-up apparait également. Une page catégorie, idem. Donc maintenant qu’on a créé notre premier pop-up, on va en créé un second. Donc la démarche est exactement la même, vous cliquez sur le bouton « créer », vous donnez un titre. Pour le coup on va utiliser une page CMS donc on coche cette case et ici il faut indiquer l’ID d’une page CMS donc pour retrouver l’ID d’une page CMS, vous allez dans l’onglet « préférences » et « CMS » et ici vous avez un tableau avec un ID de chaque page. Pour le coup, on va prendre le 3 pour les conditions générales de ventes. Donc ici j’indique « 3 ». On va également spécifier que le pop-up est responsive c’est à dire qu’il va s’adapter à la taille de l’écran et du coup lorsqu’on a sélectionné responsive, la largeur et la hauteur correspondent à un pourcentage de la taille de l’écran de l’utilisateur. En fait la valeur ne doit pas dépasser 100. Pour le coup je vais mettre 50 pour les deux. La date de début je vais toujours mettre aujourd’hui et la date de fin demain, la durée de cookie je vais mettre toujours 0, en temps d’affichage je vais mettre 2000 ce qui correspond à 2 secondes comme ça le pop-up attendra 2 secondes avant de s’afficher et comme pour l’autre pop-up on avait mis « visible sur toutes les pages », sur celui-ci je vais mettre « visible sur les pages catégories ». Je sauvegarde, on voit bien mes deux pop-up et maintenant si je rafraichi ma page d’accueil, j’ai mon premier pop-up qui apparait, ce qui est logique et si je vais sur une page catégorie, j’ai mon premier pop-up qui apparait sur toutes les pages et deux secondes plus tard, j’ai bel et bien mon pop-up qui contient mes conditions de vente et il correspond à 50% de la taille de mon écran. Si je réduis mon navigateur, je me retrouve avec le pop-up qui se réduit également.

Donc on a vu comment créer des pop-up, maintenant on va voir comment gérer de manière plus précise des pages sur lesquelles doivent s’afficher les pop-up. Donc je vais supprimer un des pop-up, je garde que le premier que j’ai créé, et ici on va définir par exemple que le pop-up sera visible que sur la page d’accueil. Je rafraichi ma page donc le pop-up est évidemment visible sur la page d’accueil mais si cette fois je vais sur une autre page, il n’apparait pas. On peut également définir que finalement il sera visible sur la page d’accueil et sur les pages catégories, en cochant les deux cases. Donc là j’ai sauvegardé, il apparait sur ma page d’accueil et il apparait bien sur une page catégorie. Par contre si je vais voir un produit, là il n’apparait pas. Ensuite on peut faire ça indéfiniment, avec tous les types. Par exemple les produits, les pages CMS, les fournisseurs, les fabricants etc. Mais on peut être encore plus précis par exemple, on peut dire qu’il sera visible sur une page catégorie spécifique. Donc on va aller dans notre catalogue, voir les catégories et ici j’ai l’ID de chaque catégorie. Donc si je prends la catégorie « portables », si je veux qu’il soit visible dans la catégorie « portables », je vais récupérer l’ID de cette catégorie qui est 5 et je vais l’indiquer ici. En résumé si vous laissez le champ vide lorsque vous cochez cette case, le pop-up s’affichera sur l’ensemble des catégories de votre site. Si vous précisez l’ID de la catégorie, il s’affichera sur cette catégorie et pas sur les autres. Donc je vais décocher par contre « visible sur l’accueil ». Et là j’ai spécifié que mon pop-up ne devait être visible que sur la catégorie « portables » donc je vais visiter cette catégorie, j’ai bien mon pop-up, je vais aller voir une autre catégorie, je ne l’ai pas. Vous pouvez aussi avoir envie que le pop-up s’affiche sur plusieurs catégories mais pas l’ensemble des catégories, donc toujours de la même façon, je regarde l’ID de mes catégories, donc là je vois par exemple que « Ipod » c’est 3 et on va décider que le pop-up s’affichera sur la catégorie « Ipod », sur la catégorie « portables » mais pas sur les accessoires. Pour ça, il suffit d’indiquer l’ID de chaque catégorie en les séparant d’une virgule. Là j’ai sauvegardé, je retourne sur l’accueil de mon site. Sur l’accueil il ne s’affiche pas parce que j’ai décoché la case. Si je vais sur la page « accessoires », il ne s’affiche pas parce que je n’ai pas spécifié cet ID de catégorie dans ma liste. Par contre si je vais sur « portables » il s’affiche et si je vais sur « Ipod », il s’affiche.

Donc on peut continuer en allant plus loin. Vous pouvez non seulement définir des catégories mais vous pouvez exactement de la même manière, définir des produits, des pages CMS, des fournisseurs ou des fabricants. Donc il suffit d’aller dans votre catalogue récupéré l’ID d’un produit. Donc si je prends par exemple le « MacBook », son ID c’est 4 et le « MacBook Air » son ID c’est 3. Donc je vais cliquer sur « visible sur les pages produits » et là je vais mettre « 4,3 ». J’enregistre et maintenant mon pop-up va être visible comme toute à l’heure sur la page « portables » et sur la catégorie « Ipod ». Et il va être également visible sur, donc je vais retourner sur la page « portables », le produit « MacBook Air » et sur le produit « MacBook ». Par contre si je vais voir un autre produit, là par exemple, j’ai l’Ipod Nano, là il n’est pas visible parce qu’on n’a pas spécifié l’ID de l’Ipod Nano. On peut continuer en faisant les pages CMS, les pages fournisseurs, les pages fabricants. Donc à chaque fois le principe est exactement le même, c’est à dire que si vous cochez la case sans rien mettre, le pop-up sera visible sur l’ensemble des pages de ce type là. Pour le coup ici, les pages CMS, si vous spécifiez l’ID 1 ou plusieurs ID en séparant par des virgules de l’élément donc des pages CMS pour le coup, le pop-up sera visible sur ces pages là uniquement et pas les autres.

Donc maintenant, on va voir comment on va faire pour afficher ce pop-up sur les pages du tunnel de commande. Les pages du tunnel de commande, ça correspond à quatre pages c’est à dire, le panier, la page adresse, la page livraison et la page de paiement. Donc je vais décocher les cases précédentes et je vais cocher « visible sur les pages du tunnel de commande ». Toujours de la même manière, si vous ne précisez rien dans ce champ là, lorsque vous allez cocher cette case, le pop-up sera visible sur l’ensemble des pages du tunnel de commande. Donc je sauvegarde et je vais ajouter un produit à mon panier et lorsque je vais aller voir mon panier, j’ai mon pop-up qui apparait. Ce pop-up ça peut être intéressant de l’afficher uniquement sur certaines pages du tunnel de commande. Par exemple la page de frais de port ou la page de paiement donc on va voir comment faire. Il suffit simplement de spécifier un numéro qui correspond à la bonne page. Ici vous avez la correspondance, 0 pour le panier, 1 pour l’adresse, 2 pour la livraison et 3 pour le paiement. Ici par exemple, je vais indiquer « 2 » pour que le message apparaisse lorsqu’on arrive sur la page de livraison. Je sauvegarde, si je rafraichi mon panier, le pop-up n’apparait plus, ce qui est normal. Là il me demande mes coordonnées. Donc là il me demande toujours de vérifier mon adresse. Et là j’arrive sur la page « frais de port » et j’ai bel et bien mon pop-up qui apparait. On aurait pu également spécifier plusieurs pages du tunnel de commande. Par exemple, à la fois la page de la livraison mais également la page suivante qui correspond au choix du mode de paiement. Là j’indique « 2 et 3 », je rafraichi ma page du mode de livraison, j’ai bien mon pop-up qui apparait, je valide, j’arrive sur la page de paiement, j’ai également mon pop-up qui apparait. Donc avec tout ce système de choix de pages, vous avez déjà la possibilité d’afficher vos pop-up sur un grand nombre de pages de votre boutique mais si vous avez par exemple, des modules spécifiques, il est possible que ce système ne suffise pas.

Donc, il reste une dernière option qui va vous permettre d’ajouter des URL personnalisés sur lesquels le pop-up va s’afficher. Je vais prendre comme exemple la page de contacts. Donc ici, j’ai l’URL de ma page de contacts qui apparait. Je la prends, je la colle, il est important de supprimer le nom de domaine, en gardant bien le slash juste avant. Là si vous sauvegardez, lorsque vous rafraichissez la page, votre pop-up apparait sur la page de contacts. Toujours de la même façon, vous pouvez si vous le voulez, indiquer plusieurs pages différentes. Vous séparez simplement ça d’une virgule, donc là je mets une virgule, ma deuxième page, je sauvegarde et donc si je vais sur « contacts », j’ai mon pop-up, si je vais sur « plan du site », j’ai mon pop-up. Donc avec ce système en fait, vous allez pouvoir vraiment afficher votre pop-up, vraiment n’importe où. Aussi bien en utilisant les systèmes natifs de Prestashop, mais si vous avez des modules particuliers, des pages particulières etc, ce système là va vous permettre d’afficher votre pop-up absolument n’importe où. Si vous êtes en multi langues, si votre boutique est en multi langues, vous pouvez choisir la langue et spécifier les noms de pages différents. C’est notamment très pratique, si vous utilisez la réécriture d’URL, vos URL peuvent être différentes selon vos langues donc en indiquant les URL pour chaque langue, vous allez pouvoir afficher votre pop-up vraiment partout où vous le voulez quelque soit la langue. Donc avec ce module, vous allez pouvoir faire énormément de choses : parler de vos promotions. Si vous avez une promotion sur une catégorie spécifique, vous allez pouvoir n’afficher le pop-up que sur cette catégorie là, ce qui est plus intéressant que de l’afficher sur l’ensemble du site. Vous allez pouvoir afficher des vidéos, des formulaires. Si vous avez des délais de livraison qui sont plus importants sur certains produits, ça peut être intéressant d’afficher un pop-up à vos visiteurs pour leur indiquer lorsqu’ils arrivent sur la fiche produits. Si vous être absent, pour causes de vacances, de congés etc, vous pouvez dans le tunnel de commande, indiquer via le pop-up, que les commandes ne partiront qu’à partir de telle date. Vous allez évidemment parler d’actualité. Le système de temps d’affichage, temps avant l’affichage du pop-up, vous permet par exemple en indiquant une valeur de 1 ou 2 minutes d’afficher un pop-up à un utilisateur qui reste longtemps sur une page. On peut supposer qu’il a un problème, notamment sur le tunnel de commande, on peut supposer qu’il a un problème et s’il reste longtemps sur une page, on peut lui afficher un pop-up en lui proposant de nous contacter soit par email, par téléphone ou par chat afin de l’aider à valider sa commande.

Voilà, il y a évidemment beaucoup d’autres choses qui peuvent être faites, tout est question d’imagination. Je vous invite à récupérer le module sur ma boutique, vous pouvez le trouver ici Store-Opart.fr. N’hésitez pas si vous avez des questions, vous pouvez passer par le forum de Prestashop, par mon blog ou même directement par le formulaire de contact de ma boutique. Je suis là pour répondre à vos questions.

Merci d’avoir regardé cette vidéo jusqu’au bout et à très bientôt.

Subscribe
Recevoir un email pour
guest

0 Commentaires
Inline Feedbacks
View all comments