Buy Button Premium (Blog et SEO)

Le module Buy Button Premium vous permet de vendre vos produits depuis vos articles de blog ou pages extérieures à l’aide d’un call-to-action ou bouton d’achat. Retrouvez ci-dessous toutes les informations nécessaires à la compréhension et à l’utilisation de ce module.

Onglet création

Dans cet onglet, vous aurez la possibilité de créer vos boutons ou cartes d’achat, de personnaliser leur affichage et choisir la façon de les intégrer sur vos pages.

Commencez tout d’abord avec le format du bouton d’achat : souhaitez-vous intégrer sur vos différents sites un seul bouton ou une carte avec la photo, le nom et le prix de votre produit ?

Étape 1 : Configuration

Veuillez sélectionner le produit pour lequel vous souhaitez créer le bouton d’achat en entrant dans le champ de recherche les premières lettres de son nom.

Voulez-vous afficher le prix du produit sur le bouton d’achat ?

Ensuite, vous aurez la possibilité de choisir la page sur laquelle le bouton d’achat sera affiché, ça pourrait être une page CMS sur votre site, une page de votre blog, etc. Choisissez “Page externe” pour récupérer, après sa création, le code du bouton à copier-coller sur votre page externe pour le faire apparaître sur une page qui n’est pas sur votre boutique.

Il vous est possible également de sélectionner l’action associée à ce bouton. 3 options vous sont proposées :

• Aller à la page produit : redirige vers la page du produit sélectionné de votre boutique
• Commander : redirige directement vers le panier de votre boutique avec le produit sélectionné déjà ajouté
• Ajouter au panier : ajoute ce produit à une panier provisoir sur votre page, et ouvre une pop-up à chaque ajout. Permet d’ajouter plusieurs produits à ce panier provisoir avant de passer à l’acte de commande. Utile si vous souhaitez ajouter plusieurs boutons ou cards à la même page.

Étape 2 : Design

Cette étape vous permettra de personnaliser le design de votre bouton ou carte d’achat pour une meilleure adaptation à votre identité visuelle.

Veuillez indiquer tout d’abord la taille de votre bouton, donc sa largeur et sa hauteur.

Vous aurez ensuite la possibilité de personnaliser le texte de votre bouton. Il vous est recommandé de remplir ce texte dans toutes les langues disponibles de votre boutique, ainsi que de changer la police, la taille et la couleur de celui-ci. Conseil : Evitez un texte trop long, un texte court aura plus d’impact et incitera à cliquer.

Vous pouvez également changer la couleur du bouton et sa couleur au survol de la souris.

A tout moment dans cette étape, il vous est possible de prévisualiser en temps réel vos configurations sur la droite.

Étape 3 : Position

Dans cette étape, vous trouverez 3 façons différentes d’intégrer le bouton ou la carte d’achat sur la page de votre choix.

SI vous avez choisi une intégration sur une de vos pages CMS en étape 1, deux choix d’emplacements vous sont proposés: en haut ou en bas de la page choisie.

Si au contraire vous avez choisi une intégration en page extérieure il vous est possible de copier le code HTML généré et de l’insérer dans le code HTML de la page souhaitée de votre blog, Wordpress ou page CMS. Note : Pour savoir comment et où ajouter ce code dans vos pages extérieur, consultez la première partie de cette documentation.

Enfin, un permalien sera disponible pour que vous puissiez le récupérer et partager facilement sur vos réseaux.

Onglet overview

Dans cet onglet, vous retrouverez tous les boutons ou cartes déjà créés, dans deux onglets : boutons et cartes. Par défaut ces boutons sont triés par date de création, le premier étant le plus récent. Vous pouvez parcourir les pages si de nombreux de boutons ont été créés.

Pour la cohérence de cet onglet, les configurations de couleurs, tailles et textes des boutons et cartes ne sont pas visibles dans cet onglet, seul le produit associé est mis en avant pour reconnaître vos boutons et cartes.

Pour chaque bouton ou carte, vous aurez l’occasion en cliquant sur le crayon :

• de prévisualiser le bouton (accès rapide au copier/coller de votre code html et le rendu visuel)
• d’éditer le bouton (toutes les configurations),
• de dupliquer le bouton (pour repartir de configurations qui vous plaisent, mais pensez bien à modifier son emplacement),
• d’activer/désactiver un bouton (si un visiteur clique sur un bouton ou carte désactivée, il sera redirigé vers la page d’accueil de votre boutique)
• de supprimer un bouton (pensez bien à supprimer le code du bouton de son emplacement actuel, sinon le visiteur sera redirigé vers votre page d’accueil)

Afin d’estimer l’impact de vos boutons et cartes, vous retrouverez des statistiques liées à chaque bouton ou carte.

• Le nombre de vues de vos boutons
• Le nombre de clics total sur ces boutons.
• Le nombre de commandes effectuées par des visiteurs ayant interagi de ces boutons

Compatibilités

Attention : ce module est compatible sur les pages externes suivantes, selon les configurations qui suivent.

Wordpress.com : Attention : notez que si vous souhaitez ajouter des boutons et cartes sur Wordpress.org cela n’est pas possible. Cette fonctionnalité là est débloquée seulement avec l’offre Business de Wordpress.com Cependant, si vous possédez un blog Wordpress que vous hébergez vous même ou par un hébergeur, autre que Wordpress.com, vous pouvez utilisez les boutons et cartes du module Buy Button Premium.

Wix.com Attention : notez que si vous souhaitez ajouter des boutons et cartes sur Wix, il faut vous assurez que votre boutique PrestaShop soit en https. Le protocole http n’est pas compatible avec les sites wix. Si vous souhaitez ajouter vos cartes et vos boutons à l’intérieur d’un contenu, suivez les instructions ci-dessous.

• Choisissez de modifier le contenu de votre site Wix grâce au bouton en bas à gauche Modifier (vous serez redirigé sur editor.wix.com : l’outil d’édition de votre Wix directement sur votre front office)
• Une fois sur l’éditeur, choisissez la page où vous souhaitez ajouter votre carte ou votre bouton à l’aide du Site Structure sur votre gauche.
• Prenons l’exemple d’un article de votre blog. Cliquez sur Blog dans votre Site Structure, choisissez l’article en question, cliquez dessus et modifier son contenu grâce à l’outil Gérer posts, sélectionnez l’article et cliquez sur Modifier.
• Puis, choisissez l’emplacement de votre carte ou de votre bouton à l’intérieur même de votre article et appuyez sur +.
• Ensuite, cliquez sur l’outil </> qui vous permet d’ajouter un code HTML.
• Insérez votre code HTML à l’aide du premier outil pré-sélectionné pour vous et copiez/collez le code généré par le module Buy Button Premium à cet emplacement.
• Enfin, vous pourrez disposez votre carte ou votre bouton où vous le souhaitez à l’aide des outils de mise en page disponible

Si au contraire, vous souhaitez ajouter vos boutons ou vos cartes n’importe où sur votre Wix, et non dans un contenu existant cliquez sur + dans l’outil d’édition rapide sur editor.wix.com puis Plus > Intégrations > Code HTML.

Joomla.com Note : Joomla.com n’est pas pré-configuré pour accueillir du JavaScript. Vous devez paramétrer cela pour faire les ajustement suivants.

• Commencez d'abord par aller dans le menu principale qui se trouve en haut de votre écran et cliquez en haut à gauche dans System et sélectionnez Global Configuration.
• Vous serez redirigé dans Site Settings. Choisissez ensuite, dans Default Editor > Editor None.

Une fois ces configurations faites, vous pouvez maintenant ajouter votre Buy Button Premium où vous le souhaitez dans vos textes.

• Par exemple, pour ajouter vos cartes ou vos boutons dans un de vos article : Cliquez sur Content dans votre menu principal. Choisissez d’éditer un article existant dans le sous menu Articles ou de créer un nouvel article dans le sous menu Featured Articles puis il vous suffit de copier-coller le code HTML généré par le module Buy Button

Premium et de l’insérer à l’endroit de votre choix dans le contenu de votre texte (exemple ci-dessous à la fin de l’article). Vous pourrez voir s’afficher votre bouton ou votre carte sur votre boutique une fois que vous aurez cliquez sur Save.

Après l’ajout de votre bouton ou de votre carte, pensez bien à revenir dans System > Global Configuration > Site Settings > Default Editor > Editor TinyMCE afin de remettre vos configurations initiales. Il vous suffit simplement de faire ces changements dès que vous souhaitez ajouter un bouton ou une carte.

Themecloud.com : Note : Pour Themecloud, vous n’avez pas besoin de changer les configurations de votre site.

• Allez dans votre Dashboard > Posts et vous serez redirigé directement dans Edit Post où vous pourrez choisir d’éditer votre texte avec l’outil Edit with Elementor.
• Une fois redirigé sur l’interface d’édition de Elementor. Vous pourrez choisir d’insérer un code HTML sur votre gauche. Glissez et déposez l’outil </> HTML où vous souhaitez insérer votre carte ou votre bouton puis y ajouter le code HTML généré par le module Buy Button Premium.
• Cliquez sur Update en haut à gauche de Elementor et votre carte ou votre bouton sera visible sur votre site.

Squarespace.com : Attention : notez que si vous souhaitez ajouter des boutons et cartes sur Squarespace.com, il faut vous assurez que votre boutique PrestaShop soit en https. Le protocole http n’est pas compatible avec les sites wix.

• Cliquez sur la goutte ou sur + en haut à gauche du contenu de votre page sélectionnée afin d’accéder à la palette d’outil disponible.
• Sélectionnez l’outil </> Code dans la catégorie More.
• Ajoutez votre code HTML généré par votre module Buy Button Premium dans l’emplacement dédié. Pensez à sauvegarder et vous verrez votre bouton ou votre carte apparaître sur votre front office à l’endroit choisi.