Créer un bouton d'achat

Après avoir ajouté le canal de vente Bouton d’achat dans votre interface administrateur Shopify, vous pouvez créer un bouton d’achat pour un produit ou une collection.

Après avoir créé un bouton d’achat, vous copiez le code généré automatiquement, puis vous l’ajoutez à la page web ou à l’article de blog où vous souhaitez que le bouton s’affiche. Par exemple, vous pouvez ajouter le bouton d’achat à votre blog Wordpress ou à votre site Squarespace.

L’apparence du bouton d’achat ne peut pas être modifiée une fois que vous l’avez intégré à votre site web. Si vous souhaitez le modifier, vous devez créer un nouveau bouton dans le canal et remplacer le code original par le nouveau code.

Sur cette page

Personnaliser les boutons d'achat

Vous pouvez personnaliser l’apparence d’un bouton d’achat et son comportement :

sa couleur
sa taille
sa police
l’action qui se produit lorsque l’utilisateur clique sur le bouton
si le passage à la caisse s’ouvre dans une nouvelle fenêtre du navigateur ou non

Lors de la personnalisation du bouton, vous pouvez afficher un aperçu de vos modifications. Vous pouvez tester le comportement du bouton d’achat en cliquant sur l’aperçu.

Style de la mise en page

Vous pouvez choisir la mise en page du bouton d’achat.

Descriptions des mises en page de base, classique et avec aperçu complet disponibles pour les boutons d’achat.
Basic	Sélectionnez cette mise en page pour ajouter un bouton d’achat sans aucune image de produit. Cela est conseillé si vous proposez déjà vos produits ailleurs en ligne et que vous souhaitez simplement ajouter un bouton pour effectuer l’achat.
Classique	Sélectionnez cette mise en page pour afficher l'image et le prix d'un produit à côté du bouton d’achat. Cette mise en page est utile pour avoir un rapide aperçu du produit, comme dans un article de blog.
Aperçu complet	Sélectionnez cette mise en page pour afficher l'image, le prix et la description d'un produit à côté du bouton d’achat. Cette mise en page émule la page des détails du produit dans votre boutique en ligne.

Actions du bouton d'achat

Lorsque vous créez un bouton d’achat, vous pouvez sélectionner l’action qui se produit lorsque l’utilisateur clique sur le bouton.

Si le bouton d'achat est destiné à une collection, l'action s'applique à chaque produit de la collection.

L'option Ajouter un produit au panier ajoute le produit à un panier. Les clients peuvent continuer leurs achats et ajouter des produits supplémentaires au panier.
L'option Diriger vers le passage à la caisse amène directement le client au passage à la caisse, où il peut acheter le produit. Les clients ne sont alors plus en mesure d'ajouter des produits supplémentaires à leur commande.
L'option Ouvrir les détails du produit affiche un bouton Afficher le produit. Lorsque le client clique sur le bouton, il peut voir la description du produit, sélectionner n'importe quelle variante du produit disponible et ajouter le produit au panier. Si un produit comporte plusieurs images, celles-ci s’affichent également.
- Cette option n’est pas disponible lorsque vous choisissez la mise en page Aperçu complet, car la mise en page Aperçu complet affiche déjà tous les détails du produit.

Vous pouvez également choisir si le passage à la caisse s’ouvre dans une nouvelle fenêtre du navigateur ou dans le même onglet que votre site web. Par défaut, le passage à la caisse s’ouvre dans une nouvelle fenêtre.

Apparence du bouton d'achat

Style de bouton : comprend la forme, la couleur et la typographie de la partie bouton du bouton d’achat.
Mise en page : en fonction du style de mise en page que vous choisissez, vous pouvez personnaliser des paramètres tels que l’alignement des boutons, la taille de l’image, ou encore le texte, la police, la couleur et la taille du bouton.
Panier : comprend des options de texte et de couleur pour le panier d’achat intégré. Vous pouvez également activer et personnaliser le libellé du champ Note de commande. Vous pouvez utiliser les notes de commande pour consigner les instructions spéciales des clients concernant la préparation et la livraison d’une commande. Le champ Informations supplémentaires vous permet de communiquer un message à vos clients.
- Vous ne pouvez modifier les paramètres du panier que si vous avez sélectionné Ajouter le produit au panier ou Ouvrir les détails du produit comme action du bouton.
Fenêtre contextuelle détaillée inclut les paramètres de la fenêtre contextuelle des détails du produit. Vous pouvez personnaliser le texte du bouton, inclure ou non le champ de la quantité, les couleurs utilisées pour l’arrière-plan et les étiquettes, ainsi que la police et la taille des étiquettes. Vous pouvez modifier ces paramètres uniquement si vous avez choisi Ouvrir les détails du produit comme action du bouton.

Créer un bouton d'achat pour un seul produit

Vous pouvez créer un bouton d'achat pour un seul produit. Le bouton d'achat peut inclure une ou toutes les variantes du produit. Lorsque vous créez le bouton d'achat, vous choisissez un style de mise en page et vous personnalisez la couleur, le texte et l'apparence du bouton, ainsi que l'action qui se produit lorsqu'un client clique dessus. En savoir plus sur la personnalisation des boutons d'achat.

Avant de créer un bouton d’achat pour un produit, vous devez avoir ajouté le produit à l’interface administrateur Shopify et l’avoir mis à la disposition du canal de vente du bouton d’achat.

Étapes :

Bureau

Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
À la page Applications et canaux de vente, cliquez sur Buy Button.
Cliquez sur Ouvrir le canal de vente.
Cliquez sur Créer un bouton d'achat.
Cliquez sur Bouton d’achat de produit.
Sélectionnez le produit dans votre catalogue ou utilisez la fonction de recherche pour trouver un produit. Cliquez sur Sélectionner.
Facultatif : personnalisez le bouton d’achat.
1. Si votre produit comporte des variantes, sélectionnez All variants (Toutes les variantes) ou sélectionnez la variante que vous souhaitez inclure.
2. Choisissez un style de mise en page et l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
3. Par défaut, le passage à la caisse ouvre une nouvelle fenêtre, mais vous pouvez choisir de l’ouvrir dans le même onglet du navigateur que votre site web. Cliquez sur Paramètres avancés > Rediriger dans le même onglet.
Cliquez sur Suivant.
Cliquez sur Copier le code.
Ouvrez l'éditeur HTML de la page web où vous souhaitez afficher le bouton d'achat. Voir Ajouter un code de bouton d'achat à un code HTML.
Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

iPhone

Dans l’application Shopify, appuyez sur le bouton …
Dans la section Canal de vente, appuyez sur le bouton d'achat.
Appuyez sur Créer un bouton d’achat.
Appuyez sur Bouton d’achat de produit.
Sélectionnez le produit dans votre catalogue ou utilisez la recherche pour trouver un produit, puis appuyez sur Sélectionner.
Facultatif : appuyez sur Personnaliser.
1. Si votre produit comporte plusieurs variantes, sélectionnez All variants (Toutes les variantes) ou sélectionnez une variante dans la liste déroulante.
2. Choisissez un style de mise en page et l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
3. Par défaut, la procédure de paiement ouvre une nouvelle fenêtre, mais vous pouvez choisir d’ouvrir la procédure de paiement dans le même onglet de navigateur que votre site web. Appuyez sur Paramètres avancés > Redirection dans le même onglet.
Appuyez sur Terminé.
Appuyez sur Copier le code.
Ouvrez l'éditeur HTML de la page web où vous souhaitez afficher le bouton d'achat. Voir Ajouter un code de bouton d'achat à un code HTML.
Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

Android

Dans l’application Shopify, appuyez sur le bouton …
Dans la section Canal de vente, appuyez sur le bouton d'achat.
Appuyez sur Créer un bouton d’achat.
Appuyez sur Bouton d’achat de produit.
Sélectionnez le produit dans votre catalogue ou utilisez la recherche pour trouver un produit, puis appuyez sur Sélectionner.
Facultatif : appuyez sur Personnaliser.
1. Si votre produit comporte plusieurs variantes, sélectionnez All variants (Toutes les variantes) ou sélectionnez une variante dans la liste déroulante.
2. Choisissez un style de mise en page et l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
3. Par défaut, la procédure de paiement ouvre une nouvelle fenêtre, mais vous pouvez choisir d’ouvrir la procédure de paiement dans le même onglet de navigateur que votre site web. Appuyez sur Paramètres avancés > Redirection dans le même onglet.
Appuyez sur Terminé.
Appuyez sur Copier le code.
Ouvrez l'éditeur HTML de la page web où vous souhaitez afficher le bouton d'achat. Voir Ajouter un code de bouton d'achat à un code HTML.
Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

Créer un bouton d’achat pour une collection

Lorsque vous créez un bouton d’achat pour une collection, vous créez en fait un bouton pour chaque produit de la collection.

Lorsque vous créez le bouton d'achat, vous choisissez un style de mise en page et vous personnalisez la couleur, le texte et l'apparence du bouton, ainsi que l'action qui se produit lorsqu'un client clique dessus. En savoir plus sur la personnalisation des boutons d'achat.

Avant de créer un bouton d’achat pour une collection, vous devez avoir :