Bouton d’achat Shopify : comment l’ajouter à n’importe quel site web

Le bouton d’achat Shopify vous permet d’intégrer les outils d'e-commerce Shopify sur tout site, qu’il soit créé avec WordPress, Wix, Squarespace, ou autre.

Shopify n’est pas réservé uniquement aux entreprises d’e-commerce bien établies. Quiconque cherchant à monétiser ses projets⁠, qu’il s’agisse de blogueurs, d’artistes, d’écrivains, de designers, de podcasteurs ou d’influenceurs⁠, peut tirer parti de la vente en ligne.

Cependant, la création d’une boutique en ligne nécessite du temps, et rediriger le trafic web peut compliquer le processus de paiement, ce qui pourrait nuire à vos ventes. Le Bouton d’achat Shopify est la solution idéale !

Commencez avec le Bouton d’achat Shopify en trois étapes

1. Ajoutez le canal de vente Bouton d'achat à votre boutique Shopify
2. Créez un Bouton d'achat
3. Ajoutez le code d'intégration du Bouton d'achat à votre HTML de site web

1. Ajoutez le canal de vente Bouton d’achat à votre boutique Shopify

Commencez par vous connecter à votre boutique Shopify. Si vous voyez le Bouton d’achat dans votre canal de vente dans le menu de gauche, vous pouvez passer directement à l’étape 2.

Passez à l’étape 2 si vous voyez déjà le canal de vente Bouton d’achat dans votre boutique.

Sur ordinateur

1. Rendez-vous sur la page du canal de vente Bouton d’achat dans l’App Store de Shopify (vous pouvez également accéder à cette page en allant dans « Paramètres » > « Visiter l’App Store de Shopify » et en recherchant « Bouton d’achat »).
2. Cliquez sur « Ajouter l’application », puis sur « Ajouter le canal de vente » à l’écran suivant.

Après le rafraîchissement de la page, vous devriez voir le Bouton d’achat listé sous « Canaux de vente » dans le menu de gauche. Assurez-vous de le fixer à votre navigation pour un accès facile par la suite.

Si vous ne fixez pas le Bouton d’achat, vous pourrez le retrouver en cliquant sur « Canaux de vente » puis sur « Bouton d’achat » parmi vos canaux installés.

Sur mobile

1. Ouvrez l’application Shopify sur votre appareil mobile et sélectionnez « Boutique » dans le menu inférieur.
2. À côté de « Canaux de vente », sélectionnez « Ajouter un canal » (sur iPhone) ou + (sur Android).
3. Sélectionnez « Bouton d’achat » dans la liste des options, puis appuyez sur « Ajouter le Bouton d’achat ».

2. Créez un Bouton d’achat

Une fois que vous avez ajouté le canal de vente Bouton d’achat, vous êtes prêt à créer votre Bouton d’achat. Accédez à votre page de Bouton d’achat, soit en cliquant sur « Bouton d’achat » (si vous l’avez épinglé à votre navigation), soit en allant dans « Paramètres » > « Applications et canaux de vente » > « Bouton d’achat ».

À partir de là, cliquez sur « Créer un Bouton d’achat ».

Vous pouvez créer des Boutons d’achat pour un produit unique ou pour une collection entière de produits. À l’écran suivant, vous serez invité à sélectionner l’option que vous préférez. Cliquez dessus, puis recherchez le produit ou la collection que vous souhaitez utiliser pour créer votre Bouton d’achat.

Assurez-vous que la case est cochée et cliquez sur « Sélectionner ».

Une fois votre sélection effectuée, vous serez dirigé vers l’éditeur de Bouton d’achat, où vous pourrez personnaliser l’apparence de votre Bouton d’achat.

Comment personnaliser votre Bouton d’achat

Dans l’éditeur de Bouton d’achat, vous verrez plusieurs options listées sur le côté gauche pour personnaliser l’apparence de votre Bouton d’achat. À droite, vous aurez un aperçu de ce à quoi ressemblera votre Bouton d’achat.

Ajustez les options à gauche selon vos préférences. Votre aperçu se mettra à jour automatiquement, vous permettant de voir à quoi ressemble votre Bouton d’achat pendant que vous l’ajustez. Vous pouvez également voir comment votre Bouton d’achat apparaîtra sur les écrans de bureau et mobiles en cliquant sur les icônes de bureau ou mobile situées en haut de l’éditeur.

Voici un aperçu des options que vous pouvez personnaliser :

●  Variante de produit : Sélectionnez les variantes du produit que vous souhaitez rendre achetables via le Bouton d’achat. Toutes les variantes seront sélectionnées par défaut.

●  Disposition : Choisissez entre « Basique », « Classique » et « Vue complète ». À droite, vous verrez un aperçu de chaque disposition lorsque vous la sélectionnez dans le menu déroulant « Disposition ».

●  Action lors du clic : Choisissez entre « Ajouter le produit au panier », « Direct vers le paiement » ou « Ouvrir les détails du produit ». L’option « Ajouter le produit au panier » créera un widget de panier sur le côté droit de votre écran. L’option « Direct vers le paiement » créera un bouton « Acheter maintenant » qui dirigera l’utilisateur directement vers le paiement (notez que les clients ne pourront pas ajouter plus d’un article à leur panier avec cette option). L’option « Ouvrir les détails du produit » créera un bouton « Voir le produit » qui ouvrira une fenêtre contextuelle contenant des informations sur le produit et un bouton « Ajouter au panier ».

●  Style du bouton : Ici, vous pouvez ajuster les couleurs, la police, la taille et la forme des coins de votre Bouton d’achat.

●  Disposition : Le menu « Disposition » vous permettra d’apporter des ajustements plus fins à la mise en page de votre bouton. Vous pouvez personnaliser les couleurs de la police, le texte du bouton et les paramètres typographiques.

●  Panier d’achats : Ici, vous pourrez ajuster les paramètres de votre widget de panier d’achats, y compris le texte et les couleurs. Notez que cette option sera grisée si vous utilisez la disposition « Direct vers le paiement », car il n’y a pas de widget de panier.

●  Fenêtre contextuelle détaillée : Si vous sélectionnez « Ouvrir les détails du produit » dans « Action lors du clic », vous pourrez personnaliser le texte, les couleurs et les options typographiques pour la fenêtre contextuelle dans cette section.

●  Paramètres avancés : Ici, vous pouvez ajuster la façon dont votre paiement est présenté à votre utilisateur. Vous pouvez soit sélectionner « Ouvrir dans une fenêtre contextuelle » (ce qui créera un paiement contextuel qui se fermera une fois la commande terminée), soit « Rediriger dans le même onglet » (ce qui enverra l’utilisateur vers votre page de paiement Shopify, et le ramènera à votre page une fois la transaction terminée).

N’oubliez pas que l’ajustement de ces paramètres ne changera pas les Boutons d’achat déjà intégrés. Prenez votre temps et assurez-vous que le Bouton d’achat est formaté selon vos souhaits avant de passer à l’étape suivante.

Lorsque vous êtes satisfait de votre design, cliquez sur le bouton « Suivant » dans le coin supérieur droit.

3. Ajoutez le code d’intégration du Bouton d’achat à votre HTML de site web

Lorsque vous cliquez sur « Suivant », le code d’intégration de votre Bouton d’achat sera automatiquement généré. Cliquez sur le bouton « Copier le code » si vous êtes prêt à l’intégrer sur une page web, ou sur le bouton « Continuer à personnaliser » si vous souhaitez revenir à l’éditeur de Bouton d’achat pour apporter des ajustements.

Le code que vous avez copié peut être collé dans le HTML de n’importe quelle page web. Il créera un Bouton d’achat et un panier qui se connecteront directement à votre administration Shopify, vous permettant de gérer et de traiter les commandes depuis n’importe quelle page.

Le processus d’ajout du code d’intégration varie selon l’apparence souhaitée du bouton et le constructeur de sites web et le thème que vous utilisez.

Voici les étapes à suivre pour intégrer un Bouton d’achat Shopify sur la page d’accueil de votre boutique Shopify ou dans un article de blog, sur un site Squarespace ou un blog WordPress :

Ajouter le code d’intégration à une page d’accueil ou un article de blog sur votre boutique Shopify

Votre boutique Shopify aura déjà des pages de produits et un panier intégrés, mais il peut arriver que vous souhaitiez ajouter un Bouton d’achat directement sur une page ou un article de blog pour plus de commodité.

Par exemple, si vous rédigez un article de blog sur un produit nouvellement lancé, vous voudrez peut-être offrir aux lecteurs un moyen facile d’acheter directement depuis l’article, plutôt que de les rediriger vers une page séparée.

Dans ce cas, suivez ces étapes :

1. Tout d’abord, suivez les étapes ci-dessus pour copier le code d’intégration du Bouton d’achat
2. Dans votre administration Shopify, allez dans « Boutique en ligne » > « Articles de blog » ou « Boutique en ligne » > « Pages », selon que vous ajoutez à un article de blog ou à une page.
3. Sélectionnez l’article de blog ou la page à laquelle vous souhaitez ajouter le Bouton d’achat.
4. Dans la fenêtre « Contenu », sélectionnez le bouton « <> » pour passer de la vue d’édition à la vue HTML.

1. Collez le code d’intégration que vous avez copié précédemment dans l’éditeur HTML, à l’endroit où vous souhaitez qu’il apparaisse. Cliquez sur « Enregistrer ».

Une fois que vous avez enregistré votre page ou votre article de blog, votre Bouton d’achat sera ajouté à la page. Si vous souhaitez voir à quoi il ressemble sans publier, sélectionnez « Aperçu » (ou « Voir la page » si vous l’ajoutez à une page) dans le coin supérieur droit de l’éditeur de page.

Ajouter un Bouton d’achat à un site Squarespace

Sur Squarespace, vous pourrez ajouter votre Bouton d’achat à des articles individuels ou à des menus sur votre page d’accueil. Pour ajouter un Bouton d’achat à votre site Squarespace :

1. Tout d’abord, suivez les étapes ci-dessus pour copier le code d’intégration du Bouton d’achat.
2. Connectez-vous à votre tableau de bord Squarespace et ouvrez la page où vous souhaitez ajouter un Bouton d’achat.
3. Survolez la zone « Contenu de la page » de l’élément de page où vous souhaitez que le Bouton d’achat apparaisse et cliquez sur « Modifier ».
4. Sélectionnez le point d’insertion où vous souhaitez ajouter le code d’intégration.
5. Dans le menu « Blocs de contenu », sous la section « Plus », sélectionnez « Code ».
6. Assurez-vous que « HTML » est sélectionné dans le menu déroulant en haut à droite, puis collez le code d’intégration du Bouton d’achat dans le champ « Code ».
7. Cliquez sur « Appliquer ».

Gardez à l’esprit que certains thèmes Squarespace personnalisés peuvent nécessiter une connaissance plus avancée de HTML pour les personnalisations. Dans ces cas, il est préférable de contacter directement un développeur pour obtenir de l’aide pour ajouter du code personnalisé à votre site.

Ajouter un Bouton d’achat à un blog WordPress

Pour ajouter un Bouton d’achat à un article sur votre site WordPress.org :

1. Tout d’abord, suivez les étapes ci-dessus pour copier le code d’intégration du Bouton d’achat.
2. Depuis votre tableau de bord WordPress, accédez à vos articles et sélectionnez celui auquel vous souhaitez ajouter un Bouton d’achat.
3. Selon la version de l’éditeur WordPress que vous utilisez, complétez l’une des étapes suivantes :
   1. Si vous utilisez l’éditeur classique pour votre site WordPress, cliquez sur l’onglet « Texte » dans l’éditeur pour passer de la vue visuelle à la vue texte.
   2. Si vous utilisez l’éditeur de blocs pour votre site WordPress, cliquez sur le bouton « + », puis recherchez et sélectionnez « HTML personnalisé ».
4. Collez le code d’intégration du Bouton d’achat à l’endroit où vous souhaitez qu’il apparaisse.
5. Cliquez sur « Enregistrer le brouillon », « Aperçu » ou « Publier », selon l’action que vous souhaitez entreprendre.

Vous pouvez également ajouter le code d’intégration à un menu WordPress en suivant les étapes suivantes :

1. Tout d’abord, suivez les étapes ci-dessus pour copier le code d’intégration du Bouton d’achat.
2. Depuis votre tableau de bord WordPress, cliquez sur « Apparence ».
3. Sélectionnez « Personnaliser » pour ouvrir l’éditeur de thème, puis sélectionnez « Widgets ».
4. Sélectionnez la zone où vous souhaitez ajouter votre Bouton d’achat.
5. Cliquez sur « Ajouter un widget », puis sur « Texte ».
6. Collez le code d’intégration du Bouton d’achat.
7. Cliquez sur « Enregistrer et publier ».

Notez que les Boutons d’achat Shopify sont compatibles avec la plateforme WordPress.org, mais pas avec WordPress.com, en raison des limitations de personnalisation HTML.

Ajouter un Bouton d’achat à Wix

Pour ajouter un Bouton d’achat Shopify à votre site Wix, suivez ces étapes :

1. Tout d’abord, suivez les étapes ci-dessus pour copier le code d’intégration du Bouton d’achat.
2. Depuis votre tableau de bord Wix, sélectionnez le site de la page « Mes sites » sur lequel vous souhaitez ajouter le Bouton d’achat, puis sélectionnez « Modifier le site ».
3. Dans l’éditeur de site Wix, cliquez sur « + », puis sur « Plus ». Sélectionnez « Code HTML ». Cela ajoutera un widget de code HTML à votre page.
4. Cliquez sur « Entrer le code ». Dans la fenêtre « Paramètres HTML », collez votre code d’intégration du Bouton d’achat dans le champ « Ajouter le code ici ».
5. Cliquez sur « Appliquer ».
6. Ajustez la taille du widget de code HTML selon vos préférences. N’oubliez pas de vous assurer que l’onglet du panier est visible si vous avez intégré un Bouton d’achat avec un panier.
7. Lorsque vous avez terminé les ajustements, cliquez sur « Enregistrer ».

Il convient de noter que si vous souhaitez intégrer des Boutons d’achat pour plusieurs produits, il est préférable d’intégrer un Bouton d’achat de collection, plutôt qu’un Bouton d’achat pour un seul produit. Si vous intégrez plusieurs Boutons d’achat pour un seul produit, les visiteurs verront un panier distinct pour chaque produit.

Ajouter des balises de script pour le bouton d’achat Shopify

Dans certains cas, les constructeurs de sites web (comme Unbounce) exigeront que vous colliez les balises <script> séparément dans votre en-tête, tout en collant le reste du code dans le corps de votre page, où vous souhaitez que le Bouton d’achat apparaisse.

Pour ce faire, vous devrez séparer l’élément <script> de l’élément <div> dans votre code d’intégration du Bouton d’achat. Vous verrez l’élément <div> en haut du code. Cela ressemble à ceci :

<div></div>

L’élément script (qui est beaucoup plus long) constitue le reste du code d’intégration, commençant par <script type="text/javascript"> et se terminant par </script>.

Une fois que vous avez séparé ces éléments, voici les étapes à suivre :

1. Ouvrez l’en-tête de la page du site où vous souhaitez intégrer votre Bouton d’achat.
2. Copiez et collez l’élément <script>, dans son intégralité, dans l’en-tête de votre page web.
3. Enregistrez vos modifications.
4. Maintenant, ouvrez l’éditeur de page pour la page où vous souhaitez ajouter votre Bouton d’achat Shopify.
5. Copiez et collez l’élément <div> dans la page, à l’endroit où vous souhaitez que votre Bouton d’achat apparaisse.
6. Enregistrez vos modifications.

Ajoutez du e-commerce à n’importe quel site web avec un Bouton d’achat Shopify

Les Boutons d’achat Shopify aident les vendeurs à rencontrer les clients là où ils se trouvent⁠, peu importe la page ou la plateforme. La commodité de vendre directement aux clients sans avoir à les rediriger vers une autre page réduit les frictions et peut aider à augmenter les ventes.

Pour les propriétaires de boutique, un Bouton d’achat stratégiquement placé sur une page de blog peut offrir aux clients un moyen facile d’acheter des produits sans quitter la page sur laquelle ils se trouvent.

Pour les blogueurs, artistes, écrivains, designers, podcasteurs, influenceurs, et toute personne cherchant à monétiser son travail, les Boutons d’achat Shopify offrent un moyen simple de profiter de la plateforme d’e-commerce de Shopify sans avoir à créer un tout nouveau site web.

Avec des styles, couleurs et fonctionnalités personnalisables, les Boutons d’achat Shopify vous permettent de transformer n’importe quelle page ou site web en une véritable boutique en ligne.

FAQ sur le Bouton d’achat Shopify

Comment ajouter un bouton d’achat sur Shopify ?

1. Ajoutez le canal de vente Bouton d’achat à votre boutique Shopify.
2. Cliquez sur « Bouton d’achat » > « Créer un Bouton d’achat ». Sélectionnez soit un Bouton d’achat de produit soit un Bouton d’achat de collection, puis le produit ou la collection que vous souhaitez utiliser.
3. Personnalisez les couleurs, la taille, le texte et la fonctionnalité de votre Bouton d’achat selon vos préférences et cliquez sur « Suivant ».
4. Cliquez sur « Copier le code ».
5. Collez le code d’intégration dans la page web où vous souhaitez que votre Bouton d’achat apparaisse.

Que fait le Bouton d’achat Shopify ?

Les Boutons d’achat Shopify permettent aux visiteurs de votre page d’acheter des produits de votre boutique Shopify sans avoir à visiter directement votre boutique. Les Boutons d’achat peuvent être ajoutés à n’importe quel site web ou blog non Shopify avec un HTML personnalisable, intégrant les outils d’e-commerce de Shopify sur votre site web non Shopify.

Le Bouton d’achat Shopify est-il sécurisé ?

Les Boutons d’achat sont un moyen sûr et sécurisé de vendre des produits et des services, car les visiteurs sont dirigés vers votre processus de paiement Shopify entièrement protégé et conforme à la norme PCI. La conformité de Shopify couvre toutes les six catégories de normes PCI et s’applique à chaque paiement utilisant notre plateforme.

Quel est le coût d’un Bouton d’achat Shopify ?

Les Boutons d’achat Shopify sont inclus en tant que fonctionnalité dans tous les plans d’abonnement Shopify, y compris le plan Starter, qui coûte 5 euros par mois.

Quels sont les avantages du Bouton d’achat ?

Le Bouton d’achat vous permet de vendre sur n’importe quelle page web ou article de blog en utilisant le processus de paiement sécurisé et les outils de gestion du e-commerce de Shopify, sans avoir à configurer une boutique Shopify. Les Boutons d’achat créent une expérience de paiement fluide qui peut aider à générer davantage de ventes sur des pages à fort trafic.

Quelle est la différence entre un Bouton d’achat et un bouton de commande Shopify ?

Les deux remplissent des fonctions similaires, mais les Boutons d’achat Shopify peuvent être intégrés dans n’importe quelle page ou article de blog, même sur des plateformes de création de sites tiers comme WordPress et Squarespace. Cela diffère des boutons Ajouter au panier sur vos pages de produits, qui sont intégrés directement dans votre thème Shopify et ne peuvent pas être intégrés ailleurs.