Dans cette vidéo je vous montre deux méthodes pour afficher les formulaires que vous pouvez créer avec mailchimp. La première vous montre comment placer votre formulaire de newsletter dans un popup et la seconde directement sur votre site, le tout avec Prestashop bien sûr.
—
Afficher/masquer la transcription texte
Bonjour, aujourd’hui je vais vous expliquer comment intégrer un formulaire de newsletter dans votre boutique Prestashop si vous utilisez Mailchimp.
La première étape est d’installer le module « Op’art planned popup ». Une fois que vous avez installé votre module, vous créez un pop-up qu’on va appeler « Mailchimp », on va lui donner une largeur de 500, une hauteur de 350, date de début on va mettre 1 février au 28 février, sur tous ces éléments là vous réglez comme vous le voulez, la durée du cookie on va mettre 0 pour pouvoir l’afficher à chaque fois et le temps d’affichage 500 millisecondes et je vais l’afficher sur la page d’accueil. Voilà, la dernière étape va être d’intégrer le formulaire dans cette partie là. Pour ça, vous allez sur votre compte Mailchimp, vous cliquez sur « liste », vous sélectionnez la liste pour laquelle vous voulez que vos utilisateurs s’inscrivent et vous cliquez sur « signup forms » puis sur « Embedded forms ». A partir de là, vous pouvez régler votre formulaire, ajouter des champs, ajouter du texte, inclure ou pas un titre. Une fois que vous avez fait tous vos réglages, l’idéal est de prendre la version à nu du formulaire, c’est à dire « naked », tout simplement pour éviter qu’il y ait un conflit entre les CSS de Prestashop et ceux inclut par Mailchimp, donc avec le formulaire à nu, vous n’avez pas de CSS qui sont automatiquement ajoutés et du coup, vous ne pouvez pas avoir de conflits entre vos CSS Prestashop et ceux de Mailchimp. Donc une fois que vous avez fait tous vos réglages, vous sélectionnez le code de votre formulaire, vous retournez dans l’administration de Prestashop, dans la gestion des modules, et vous cliquez sur l’icone « HTML », puis vous collez votre code, vous faites « mettre à jour » et vous sauvegardez. Une fois que vous avez fait ça, votre formulaire est bel et bien enregistré. Vous retournez sur l’accueil de votre site, vous rafraichissez la page et votre formulaire apparait pour tous vos visiteurs. Evidemment après, il y a un travail à effectuer au niveau des CSS pour rendre ça un petit peu plus joli, au niveau du formulaire mais ça touche que du CSS de façon assez classique, c’est quelque chose d’assez simple à faire. Donc là, je viens de vous montrer une méthode pour intégrer le formulaire de Mailchimp dans un pop-up qui va s’afficher automatiquement mais vous pouvez avoir envie d’afficher ce formulaire de newsletter plutôt dans votre footer ou dans une des colonnes gauche ou droite de votre site.
Donc pour faire ça, c’est très simple, on ne va pas utiliser le module « Op’art planned popup », on va utiliser un autre module qui s’appelle « mulit HTML block ». Donc, vous allez dans le module, il faut avoir évidemment installé au préalable le module « mulit HTML block » et une fois que c’est fait, vous créez votre block, on va lui donner comme nom « Mailchimp », voilà. Une fois le block créé, vous l’installez et on clique sur « configurer ». Et là, exactement de la même façon, vous retournez dans l’administration de Mailchimp, vous sélectionnez votre liste, vous cliquez sur « signup forms », « Embedded forms », et la démarche est exactement la même, vous faites les réglages de votre formulaire. Vous prenez la version à nu du formulaire, vous copiez votre code, et là vous cliquez sur l’icone « HTML », vous collez votre code, vous faites « mettre à jour » et vous sauvegardez. Une fois que vous avez fait ça, votre formulaire va apparaitre sur votre boutique alors dans un premier temps dans la colonne de gauche après vous avez totalement la liberté de le positionner ailleurs.
Là par exemple, on va le remonter donc pour ça, il suffit de gérer les points d’accroches du module. Vous affichez tous les modules, recherchez le module que vous avez appelé « Mailchimp » et là on voit qu’il est en dernière position dans la colonne de gauche, donc on va le remonter en première position par exemple. Je retourne sur l’accueil de ma boutique et là mon module est bien tout en haut. De la même façon, si vous voulez le mettre sur la colonne de droite ou dans le footer, il suffit là encore de gérer la position du module en faisant « greffer un module ». Ici vous faites « greffer un module », vous cherchez le module qui s’appelle « Mailchimp », et vous cherchez le point d’accroche « displayRightColum ». Donc là, mon module qui est toujours en colonne de gauche, je vais le supprimer parce que ça m’intéresse pas d’avoir deux fois le module « newsletter » et là il est bien en colonne de droite, je vais à nouveau le mettre en premier. Si je retourne sur la page d’accueil de mon site, j’ai bel et bien mon formulaire de newsletter qui se trouve en haut à droite et de la même façon, vous pouvez le placer dans le footer ou dans le header ou voir même au centre de la page d’accueil de votre site, si c’est quelque chose qui vous intéresse. Tout comme toute à l’heure, il reste un petit travail à faire au niveau des CSS pour que ça s’intègre parfaitement au design de votre site.
Voilà, merci d’avoir regardé cette vidéo. Vous pouvez toujours me suivre sur Google+, Facebook, Twitter, sur ma boutique et sur mon blog.
Merci, à bientôt.
La première étape est d’installer le module « Op’art planned popup ». Une fois que vous avez installé votre module, vous créez un pop-up qu’on va appeler « Mailchimp », on va lui donner une largeur de 500, une hauteur de 350, date de début on va mettre 1 février au 28 février, sur tous ces éléments là vous réglez comme vous le voulez, la durée du cookie on va mettre 0 pour pouvoir l’afficher à chaque fois et le temps d’affichage 500 millisecondes et je vais l’afficher sur la page d’accueil. Voilà, la dernière étape va être d’intégrer le formulaire dans cette partie là. Pour ça, vous allez sur votre compte Mailchimp, vous cliquez sur « liste », vous sélectionnez la liste pour laquelle vous voulez que vos utilisateurs s’inscrivent et vous cliquez sur « signup forms » puis sur « Embedded forms ». A partir de là, vous pouvez régler votre formulaire, ajouter des champs, ajouter du texte, inclure ou pas un titre. Une fois que vous avez fait tous vos réglages, l’idéal est de prendre la version à nu du formulaire, c’est à dire « naked », tout simplement pour éviter qu’il y ait un conflit entre les CSS de Prestashop et ceux inclut par Mailchimp, donc avec le formulaire à nu, vous n’avez pas de CSS qui sont automatiquement ajoutés et du coup, vous ne pouvez pas avoir de conflits entre vos CSS Prestashop et ceux de Mailchimp. Donc une fois que vous avez fait tous vos réglages, vous sélectionnez le code de votre formulaire, vous retournez dans l’administration de Prestashop, dans la gestion des modules, et vous cliquez sur l’icone « HTML », puis vous collez votre code, vous faites « mettre à jour » et vous sauvegardez. Une fois que vous avez fait ça, votre formulaire est bel et bien enregistré. Vous retournez sur l’accueil de votre site, vous rafraichissez la page et votre formulaire apparait pour tous vos visiteurs. Evidemment après, il y a un travail à effectuer au niveau des CSS pour rendre ça un petit peu plus joli, au niveau du formulaire mais ça touche que du CSS de façon assez classique, c’est quelque chose d’assez simple à faire. Donc là, je viens de vous montrer une méthode pour intégrer le formulaire de Mailchimp dans un pop-up qui va s’afficher automatiquement mais vous pouvez avoir envie d’afficher ce formulaire de newsletter plutôt dans votre footer ou dans une des colonnes gauche ou droite de votre site.
Donc pour faire ça, c’est très simple, on ne va pas utiliser le module « Op’art planned popup », on va utiliser un autre module qui s’appelle « mulit HTML block ». Donc, vous allez dans le module, il faut avoir évidemment installé au préalable le module « mulit HTML block » et une fois que c’est fait, vous créez votre block, on va lui donner comme nom « Mailchimp », voilà. Une fois le block créé, vous l’installez et on clique sur « configurer ». Et là, exactement de la même façon, vous retournez dans l’administration de Mailchimp, vous sélectionnez votre liste, vous cliquez sur « signup forms », « Embedded forms », et la démarche est exactement la même, vous faites les réglages de votre formulaire. Vous prenez la version à nu du formulaire, vous copiez votre code, et là vous cliquez sur l’icone « HTML », vous collez votre code, vous faites « mettre à jour » et vous sauvegardez. Une fois que vous avez fait ça, votre formulaire va apparaitre sur votre boutique alors dans un premier temps dans la colonne de gauche après vous avez totalement la liberté de le positionner ailleurs.
Là par exemple, on va le remonter donc pour ça, il suffit de gérer les points d’accroches du module. Vous affichez tous les modules, recherchez le module que vous avez appelé « Mailchimp » et là on voit qu’il est en dernière position dans la colonne de gauche, donc on va le remonter en première position par exemple. Je retourne sur l’accueil de ma boutique et là mon module est bien tout en haut. De la même façon, si vous voulez le mettre sur la colonne de droite ou dans le footer, il suffit là encore de gérer la position du module en faisant « greffer un module ». Ici vous faites « greffer un module », vous cherchez le module qui s’appelle « Mailchimp », et vous cherchez le point d’accroche « displayRightColum ». Donc là, mon module qui est toujours en colonne de gauche, je vais le supprimer parce que ça m’intéresse pas d’avoir deux fois le module « newsletter » et là il est bien en colonne de droite, je vais à nouveau le mettre en premier. Si je retourne sur la page d’accueil de mon site, j’ai bel et bien mon formulaire de newsletter qui se trouve en haut à droite et de la même façon, vous pouvez le placer dans le footer ou dans le header ou voir même au centre de la page d’accueil de votre site, si c’est quelque chose qui vous intéresse. Tout comme toute à l’heure, il reste un petit travail à faire au niveau des CSS pour que ça s’intègre parfaitement au design de votre site.
Voilà, merci d’avoir regardé cette vidéo. Vous pouvez toujours me suivre sur Google+, Facebook, Twitter, sur ma boutique et sur mon blog.
Merci, à bientôt.
Passionné d’e-commerce et de SEO, je suis le créateur du site reussir-mon-ecommerce.fr. Depuis plus de 15 années, j’aide les e-commerçants à développer sainement leur entreprise. Et si je ne suis pas devant mon écran, c’est que je suis derrière ma batterie à jouer du rock ! !