Dans cet article, je vais vous montrer comment intégrer facilement un CTA “Buy Button” de Shopify sur votre site, qu’il soit en Nocode ou non. Cela vous permettra de confier toute la gestion des achats et des paiements sécurisés à Shopify, en centralisant l’ensemble du processus sur votre compte Shopify externe.

Avant de commencer, il est essentiel de finaliser la création de votre compte Shopify. Une fois toutes les formalités accomplies, en particulier l’ajout de vos produits et des informations les concernant (prix, stock, frais de port, etc.), nous pourrons passer à l’étape suivante.

Installation du Buy Button

Dans votre tableau de bord Shopify, accédez à l’onglet “Applications” et recherchez “Buy Button” dans la barre de recherche. Bien qu’il existe plusieurs versions payantes de ce plugin, nous choisirons la version gratuite, “Buy Button channel”, qui fait très bien le job.

Setup du Buy Button

Dans un premier temps, il faut choisir entre deux types de boutons : un bouton d’achat pour un produit spécifique ou pour une collection. Ce choix déterminera l’action qui se produira lors du clic sur le “Buy Button”.

Ensuite, on passe à la personnalisation de l’apparence du bouton et des fonctionnalités associées, comme le layer de confirmation d’ajout au panier. Plusieurs styles de personnalisation sont disponibles : Basique, Classique et Aperçu complet. Pour un Button classique, nous choisirons l’option Basic.

Finalement nous devons confirmer l’action réalisée au clic entre l’Ajout au Panier, la Redirection directe sur le panier Shopify, ou alors Ouvrir les détails du produit. En l’occurence ici, il sera nécessaire de sélectionner l’Ajout au Panier simple.

Il est ensuite possible de Personnaliser l’UI / l’apparence du Button ; Bordures, Largeur, Couleurs d’Arrière Plan, le Texte, la Typographie, la Taille… Il y’a de quoi faire !

( Pour avoir une aperçu de l’animation d’ouverture de Layer, le CTA est cliquable ☺️)

A noté qu’il est toujours possible de modifier l’apparence du Button en fouillant plus loin dans le code que nous allons générer à l’étape suivante.

Dans la mesure où nous souhaitons un CTA qui, au clic ouvre un layer ”Panier” sur la même page, nous ne toucherons pas aux paramètres avancés, au besoin je vous conseille d’explorer les différentes fonctionnalités !

Implémenter le Buy Button

La dernière étape ( aussi la plus simple ) consiste en l’implémentation du Buy Button ; Veillez à bien copier le code après avoir fait tous les changements sur l’apparence et les fonctionnalités du CTA.

Une fois le code généré copié, il s’insère dans le code de votre site Web à l’endroit où vous voulez que le bouton apparaisse, et voilà! Un buy Button propre et fonctionnel !

Exemple d’intégration sur Framer

Sur Framer l’intégration se fait très simplement via le composant Embed Code; sur le panel de l’éditeur de droite il suffira de coller le code copié et le composant apparaitra sur la maquette (aussi simple que ça !).

Pourquoi & Comment utiliser le Buy Button ?

Le Buy Button est une solution idéale pour ceux qui recherchent la simplicité d’un site nocode tout en bénéficiant de la robustesse et de la sécurité du traitement des stocks et du parcours d’achat de Shopify.

Cette solution est idéale pour les site one page, vendant un seul produit, ou une collection de produit de taille moyenne.

Exemples de site utilisant le Buy button:

• Hachettebookgroup

• Msshiadmrhe