Ajout d'un bouton d'achat ou d'une collection incorporée à votre site web

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

Exemple de bouton d'achat

Il existe deux façons de créer des boutons d'achat :

  • Vous pouvez générer un code à insérer dans le code HTML d'une page web, lequel affiche un bouton d'achat sur la page. Vous pouvez personnaliser l'apparence des boutons d'achat et les lier à votre passage à la caisse, à un panier ou à la description d'un produit. Le code du bouton d'achat peut être associé à un seul produit ou à une collection.

  • Vous pouvez générer un lien de passage à la caisse à ajouter à une campagne par e-mail, à un message direct ou à un poste sur les médias sociaux.

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

Vous pouvez créer un bouton d'achat qui être associé à un seul produit. Lorsque vous créez le bouton d'achat, vous pouvez choisir un modèle et personnaliser la couleur du bouton, son texte, son apparence, ainsi que l'action qui se produit quand un client clique dessus. En savoir plus sur la personnalisation des boutons d'achat.

Étapes :

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

  2. Sélectionnez un produit dans votre catalogue ou utilisez la recherche pour trouver un produit. Cliquez sur Sélectionner un produit.

  3. Choisissez un modèle et personnalisez la couleur du bouton, son texte, son apparence ainsi que l'action qui se produit quand un client clique dessus :

    Création d'un bouton d'achat

    Pour en savoir plus sur les différentes façons de personnaliser les boutons d'achat, voir Personnaliser les boutons d'achat

  4. Cliquez sur Générer un code.

  5. Cliquez sur Copier le code dans le presse-papier afin de copier le code.

  6. Ouvrez l'éditeur HTML de la page web où vous souhaitez afficher le bouton d'achat. Voir Ajouter un code de bouton d'achat dans un code HTML.

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

Créer une collection incorporée

Vous pouvez créer une collection incorporée pour inclure les produits dans une collection à l'aide de boutons d'achat :

La collection incorporée affiche chaque produit dans la collection avec son propre bouton d'achat, pour que les clients puissent choisir n'importe quel produit de la collection. Lorsque vous créez la collection incorporée, vous pouvez personnaliser la couleur, le texte et l'apparence des boutons d'achat sur les produits présentés, ainsi que l'action qui se produit quand un client clique sur un des boutons. Le bouton de chaque produit dans la collection utilise les mêmes personnalisations. En savoir plus sur la personnalisation des boutons d'achat.

Étapes :

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

  2. Cliquez sur Collections.

  3. Sélectionnez une collection, puis cliquez sur Sélectionner la collection.

  4. Personnalisez la couleur des bouton, leur texte, leur apparence ainsi que l'action qui se produit quand un client clique sur l'un d'eux :

    Pour en savoir plus sur les différentes façons de personnaliser les boutons d'achat, voir Personnaliser les boutons d'achat

  5. Cliquez sur Générer un code.

  6. Cliquez sur Copier le code dans le presse-papier afin de copier le code.

  7. Ouvrez l'éditeur HTML de la page web où vous souhaitez afficher la collection incorporée. Voir Ajouter un code de bouton d'achat dans un code HTML.

  8. Collez le code intégré dans le code HTML où vous souhaitez que la collection incorporée apparaisse, puis enregistrez vos modifications.

Personnaliser les boutons d'achat

Vous pouvez personnaliser la couleur d'un bouton d'achat, sa taille et son apparence, mais aussi sélectionner l'action qui se produit quand quelqu'un clique dessus. Lorsque vous créez un bouton d'achat pour un seul produit, vous pouvez aussi choisir un modèle pour le bouton d'achat. Vous pouvez obtenir un aperçu de vos choix avant de générer le code à partir de la page Créer.

Modèles de boutons d'achat

Lorsque vous créez un bouton d'achat pour un seul produit, vous pouvez choisir parmi les modèles suivants :

<table>
  <tr>
    <td style="min-width: 90px"><img src="/assets/manual/buy-button/icon-product-button.png" width="60" alt="Icon of a product image with a button"></td>
    <td><strong>Basic template</strong></td>
    <td>Select this template to display a product image and price beside the Buy Button.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-button.png" width="60" alt="Icon of only a rounded button"></td>
    <td><strong>Button template</strong></td>
    <td>Select this template to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but want to add a checkout link.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-product-desc-button.png" width="60" alt="Icon of a product image with text and a button on the right side"></td>
    <td><strong>Enhanced template</strong></td>
    <td>Select this template to display a product image, price, and description beside the Buy Button.</td>
  </tr>
</table>

Actions du bouton d'achat

Lorsque vous créez un bouton d'achat, vous pouvez sélectionner une action dans la liste d' actions en cas de clic. Lorsque quelqu'un clique sur le bouton d'achat sur une page, l'une des actions suivantes se produira :

  • Adds product to cart (Ajoute un produit au panier) ajoute le produit à un panier. Les clients peuvent continuer leurs achats et ajouter des produits supplémentaires au panier.
  • Directs shoppers to checkout (Indique aux acheteurs de passer à la caisse) amène directement le client au passage à la caisse, où il peut acheter le produit. Les clients ne sont plus en mesure d'ajouter des produits supplémentaires à leur commande.
  • Shows product details (Affiche les détails du produit) affiche une description du produit avec un bouton Add to cart (Ajouter au panier). Si un produit comporte plusieurs images, celles-ci s'affichent également.

Taille et alignement du bouton d'achat

Vous pouvez sélectionner la taille et l'alignement des parties du bouton d'achat à partir des menus déroulants Taille et Alignement. Vous pouvez obtenir un aperçu du bouton d'achat pour vous aider à décider quelles options conviendront le mieux à votre page web.

Apparence du bouton d'achat

  • Style et texte du bouton inclut des options de style et de couleur pour la partie bouton du bouton d'achat.
  • Font style (Style de police) inclut des options de police et de couleur pour le texte du bouton d'achat et des informations sur le produit.
  • Panier comprend des options de texte et de couleur pour le panier d'achat incorporé.

Créer un lien vers le passage à la caisse

Vous pouvez utiliser le canal du bouton d'achat pour créer des liens vers le passage à la caisse, sur lesquels vos clients peuvent cliquer pour ajouter une seule variante de produit au passage à la caisse. Vous pouvez ajouter des liens vers le passage à la caisse dans les e-mails, les postes de médias sociaux ou les messages directs, afin de partager facilement un produit avec les clients.

Étapes :

  1. Cliquez sur Créer un lien vers le passage à la caisse.

  2. Sélectionnez le produit, puis cliquez sur Sélectionner le produit.

  3. Si votre produit possède plus d'une variante, sélectionnez une variante. Chaque lien vers le passage à la caisse ne peut contenir qu'une variante de produit.

  4. Cliquez sur Copier le lien pour copier le lien.

  5. Collez le lien directement dans un message, un e-mail ou un poste de médias sociaux.

Exemples de lien vers le passage à la caisse

Vous pouvez partager des liens vers le passage à la caisse dans des campagnes par e-mail, des postes de médias sociaux ou des messages directs. Après avoir créé le lien, vous pouvez copier le texte du lien et le coller où vous le souhaitez afin de partager le passage à la caisse direct avec les clients.

Les exemples suivants montrent différentes façons d'utiliser les liens vers le passage à la caisse :

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

Essayez gratuitement