Bouton d'achat
Le bouton d'achat vous permet d'ajouter des produits uniques à un site Web ou à un blog externe. Vous pouvez utiliser différentes options de mise en page de produits, d'un seul bouton Acheter maintenant à une carte de produit grandeur nature.
Une fois le produit intégré dans une page, les clients peuvent cliquer sur le bouton pour ajouter le produit au panier et continuer à le commander sans jamais quitter le site. Les commandes seront disponibles pour le suivi à partir de la page Ventes → Commandes dans votre panneau d'administration de votre boutique.
Designs du bouton d'achat
Selon votre cas d'utilisation, vous pouvez intégrer des cartes de produits avec différentes options de design :
| Design | Cas d'utilisation |
| Bouton uniquement | Juste un bouton Acheter maintenant , rien de plus. Vous pouvez utiliser ce design si un produit est déjà affiché sur votre page et vous n'avez qu'à ajouter l'option de paiement en ligne (par ex, c’est un article de blog pour promouvoir votre article, ou vous avez déjà conçu la page dédiée à ce produit sur votre site). |
| Compact | Une carte de produit minimaliste avec le bouton Acheter maintenant. Ce design vous permet de donner un récapitulatif court d'une colonne d'un produit en utilisant son image principale, son nom et son prix. Vous pouvez également afficher les options de produits et la quantité disponible. Si vous avez une promotion pour ce produit, elle sera également affichée. |
| Plein format |
Une carte produit plein format avec un bouton Ajouter au panier.
|
Créer un bouton d'achat
Pour ajouter un bouton Acheter à une page Web, vous devez générer le code d'intégration unique d'un produit. Après cela, vous pouvez intégrer votre produit dans n'importe quel site Web ou blog. La fiche produit peut être placée n'importe où sur une page Web, sur un panneau latéral, dans le pied de page du site ou sur une page d'erreur.
Avant de créer un bouton d'achat, vous devez configurer votre compte avec les options produits et paiement/livraison que vous souhaitez offrir à vos clients. Si plus tard, vous apportez des modifications aux détails du produit dans votre panneau d'administration de votre boutique (renommer le produit, modifier son prix ou sa description, etc.), ces modifications seront immédiatement prises en compte sur le bouton d'achat.
Pour créer un bouton d’achat :
- À partir de l'interface d'administration de votre boutique, accédez à Canaux de vente.
- Faites défiler jusqu'à la carte Boutons d'achat.
- Cliquez sur Commencer.
-
Sur la page ouverte, cliquez sur Choisir le produit et utilisez la barre de recherche pour choisir un produit que vous souhaitez intégrer.
Vous pouvez également accéder à l'assistant de création des boutons d'achat pour un produit spécifique directement à partir de la page de détails de ce produit (onglet Bouton « Acheter maintenant »). -
Personnalisez votre Bouton d'Achat :
- choisir un design : Compact, Bouton uniquement, ou pleine taille.
- configurez l'apparence du bouton : choisissez les détails du produit que vous souhaitez afficher (nom du produit, prix, options, etc.) et la façon dont ils sont affichés.
Lorsque vous personnalisez le bouton, vous pouvez prévisualiser vos modifications sur la droite.
- Cliquez sur Générer le code, puis sur Copier le code.
-
Connectez-vous à votre site Web et ouvrez la page où vous voulez afficher le bouton d'achat.
Si votre vitrine est fermée aux clients, le bouton Acheter ne sera pas affiché sur la page du site. Vous pouvez vérifier si votre vitrine est ouverte sur la page Paramètres → Général → Profil du magasin dans votre panneau d'administration de votre boutique. - Collez le code d’intégration sur une page. Selon votre site Web, il peut s'agir d'un onglet HTML ou source ou un bouton séparé destiné à ajouter des codes. Si vous ne savez pas comment ajouter un code personnalisé à votre site Web, veuillez contacter votre développeur pour obtenir des instructions plus détaillées.
- Enregistrez les modifications.
Et voilà ! Maintenant vous avez une carte de produit intégrée dans votre page Web.
Lorsque les clients cliquent sur le bouton Acheter maintenant/Ajouter au panier, le produit sera ajouté au panier, et ils peuvent procéder à la commande.
Si vous souhaitez que la fenêtre de passage de la commande s'ouvre immédiatement lorsqu'un client clique sur le bouton, vous pouvez aller dans Paramètres→ Général → Panier → Paramètres de paiement et activez l'interrupteur à côté d' «Ouvrir le panier lorsqu'« Ajouter au panier » est cliqué ».
Personnalisation d'un bouton d'achat
Au-delà de la personnalisation du texte du bouton Acheter, vous pouvez également ajuster son apparence pour qu'elle corresponde à votre marque et à la conception de votre site Web :
-
Masquer le menu de navigation inférieur ou le fil d'Ariane depuis les pages de détails du produit. Vous pouvez le faire depuis votre éditeur de constructeur de site eCom. Pour cela, accédez à votre éditeur de site et ouvrez la liste déroulante Page en haut, sélectionnez Produits, puis cliquez sur Paramètres en haut à droite et sélectionnez Conception de la boutique. Cliquez sur Détails du produit. Cliquez sur différentes listes déroulantes de paramètres pour effectuer des modifications de navigation. Une fois les modifications terminées, cliquez sur Publier.
Les modifications que vous effectuez affectent tous les produits de votre boutique. - Modifiez l'apparence de la fiche de produit et des boutons pour qu'ils correspondent au thème de votre site Web. Vous pouvez le faire depuis votre éditeur de constructeur de site eCom. Pour cela, accédez à votre éditeur de site et ouvrez la liste déroulante Page en haut, sélectionnez Catalogue, puis cliquez sur Paramètres en haut à droite et sélectionnez Conception de la boutique. Cliquez sur Catégories et grille de produits. Cliquez sur différentes listes déroulantes de paramètres pour effectuer des modifications. Une fois les modifications terminées, cliquez sur Publier. Pour profiter d'une personnalisation plus approfondie, utilisez des codes CSS. Par exemple, vous pouvez éditer les couleurs et les polices d'un bouton Acheter maintenant à l'aide du CSS.