Créer un bouton d'achat

Cette page a été imprimée le Apr 18, 2024. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-sales-channels/buy-button/create-buy-button.

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 ajoutez le code à la page web ou à l’article de blog où vous souhaitez afficher le bouton. Par exemple, vous pouvez ajouter le bouton d’achat sur votre blog WordPress ou votre site web Squarespace.

Vous ne pouvez pas changer l’apparence du bouton d’achat, une fois celui-ci intégré à votre site web. Si vous souhaitez la modifier, vous devez créer un nouveau bouton dans le canal et remplacer le code d’origine 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.

Mises en page disponibles pour les boutons d’achat
Basic Shopify 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.

  • La fenêtre pop-up détaillée inclut les paramètres de la fenêtre pop-up des détails du produit. Vous pouvez personnaliser le texte du bouton de manière à afficher ou non le champ de la quantité, les couleurs utilisées pour l’arrière-plan et les libellés, ainsi que la police et la taille de police des libellés. Vous ne pouvez modifier ces paramètres que si vous avez sélectionné 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 :

  1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

  2. À la page Applications et canaux de vente, cliquez sur Buy Button.

  3. Cliquez sur Ouvrir le canal de vente.

  4. Cliquez sur Créer un bouton d'achat.

  5. Cliquez sur Bouton d’achat de produit.

  6. Sélectionnez le produit dans votre catalogue ou utilisez la fonction de recherche pour trouver un produit. Cliquez sur Sélectionner.

  7. 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.

  8. Cliquez sur Suivant.

  9. Cliquez sur Copier le code.

  10. 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.

  11. Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

  1. Depuis l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canal de vente, appuyez sur le bouton d'achat.
  3. Cliquez sur Créer un bouton d'achat.
  4. Cliquez sur Bouton d’achat de produit.
  5. Sélectionnez le produit dans votre catalogue ou utilisez la fonction de recherche pour trouver un produit. Cliquez sur Sélectionner.

  6. Facultatif : cliquez sur Customize (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, 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.

  7. Cliquez sur Done (Terminé).

  8. Cliquez sur Copier le code.

  9. 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.

  10. Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

  1. Dans l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canal de vente, appuyez sur le bouton d'achat.
  3. Cliquez sur Créer un bouton d'achat.
  4. Cliquez sur Bouton d’achat de produit.
  5. Sélectionnez le produit dans votre catalogue ou utilisez la fonction de recherche pour trouver un produit. Cliquez sur Sélectionner.

  6. Facultatif : cliquez sur Customize (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, 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.

  7. Cliquez sur Done (Terminé).

  8. Cliquez sur Copier le code.

  9. 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.

  10. 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 :

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

  2. À la page Applications et canaux de vente, cliquez sur Buy Button.

  3. Cliquez sur Ouvrir le canal de vente.

  4. Cliquez sur Créer un bouton d'achat.

  5. Cliquez sur Bouton d’achat de la collection.

  6. Sélectionnez la collection ou utilisez la fonction recherche pour trouver la collection. Cliquez sur Sélectionner.

  7. Facultatif : personnalisez le bouton d’achat.

    1. Choisissez l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
    2. 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.

  8. Cliquez sur Suivant.

  9. Cliquez sur Copier le code.

  10. 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.

  11. Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

  1. Dans l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canal de vente, appuyez sur le bouton d'achat.
  3. Cliquez sur Créer un bouton d'achat.
  4. Cliquez sur Bouton d’achat de la collection.
  5. Sélectionnez la collection ou utilisez la fonction recherche pour trouver la collection. Cliquez sur Sélectionner.

  6. Facultatif : cliquez sur Customize (Personnaliser).

    1. Choisissez l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
    2. 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.

  7. Cliquez sur Done (Terminé).

  8. Cliquez sur Copier le code.

  9. 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.

  10. Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

  1. Dans l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canal de vente, appuyez sur le bouton d'achat.
  3. Cliquez sur Créer un bouton d'achat.
  4. Cliquez sur Bouton d’achat de la collection.
  5. Sélectionnez la collection ou utilisez la fonction recherche pour trouver la collection. Cliquez sur Sélectionner.

  6. Facultatif : cliquez sur Customize (Personnaliser).

    1. Choisissez l'action qui se produit lorsqu’un client clique sur le bouton. Vous pouvez également personnaliser l’apparence du bouton.
    2. 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.

  7. Cliquez sur Done (Terminé).

  8. Cliquez sur Copier le code.

  9. 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.

  10. Collez le code dans le code HTML où vous souhaitez que le bouton d'achat apparaisse, puis enregistrez vos modifications.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement