Création d’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 web Squarespace.

L’apparence du bouton d’achat ne peut pas être modifiée après son intégration à votre site web. Si vous souhaitez la modifier, vous devez créer un autre bouton dans le canal et remplacer le code d’origine par le nouveau code.

Personnalisation des boutons d’achat

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

  • sa couleur
  • sa taille
  • sa police
  • l’action qui se produit lorsque vous cliquez sur le bouton
  • si le paiement s’ouvre dans une nouvelle fenêtre de navigateur

Au fur et à mesure que vous personnalisez le bouton, vous pouvez en prévisualiser les modifications. Vous pouvez tester le comportement du bouton d’achat en cliquant sur l’aperçu.

Style de mise en page

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

Descriptions des mises en page Basique, Classique et avec aperçu complet disponibles pour les boutons d’achat.
BasiqueSélectionnez cette mise en page pour ajouter un bouton d’achat sans aucune image de produit. Cette option peut être utile si vous affichez déjà vos produits ailleurs en ligne, mais que vous souhaitez simplement ajouter un bouton pour effectuer l’achat.
ClassiqueSélectionnez cette mise en page pour afficher une image de produit et un prix à côté du bouton d’achat. Cette mise en page est utile pour un aperçu rapide du produit, par exemple dans un article de blog.
Aperçu completSélectionnez cette mise en page pour afficher une image de produit, un prix et une description à côté du bouton d’achat. Cette mise en page imite une page de détails de produit de 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’on clique sur le bouton.

Si le bouton d’achat concerne une collection, l’action s’applique à chaque produit de la collection.

  • Ajouter le produit au panier ajoute le produit à un panier. Les clients peuvent poursuivre leurs achats et ajouter d’autres produits au panier.
  • Accéder directement au paiement dirige le client directement vers votre page de paiement, où il peut acheter le produit. Les clients ne peuvent pas ajouter d’autres produits à leur commande.
  • 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 les variantes de produit disponibles et ajouter le produit au panier. Si un produit a plusieurs images de produit, celles-ci s’affichent également.
    • Cette option n’est pas disponible lorsque vous choisissez la mise en page Full view, car celle-ci affiche déjà tous les détails du produit.

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

Apparence du bouton d’achat

  • Style du 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 du bouton, la taille de l’image, le texte du bouton, la police, la couleur et la taille.
  • Panier comprend des options de texte et de couleur pour le panier intégré. Vous pouvez également activer et personnaliser le libellé du champ Note de commande « Note de commande ». Vous pouvez utiliser les notes de commande pour recueillir des instructions spéciales de la part des clients sur la façon de préparer et de livrer une commande. Le champ Informations supplémentaires « Informations supplémentaires » vous permet de communiquer un message à vos clients.
    • Vous ne pouvez modifier les paramètres du panier que si vous avez choisi l’action Ajouter le produit au panier ou Ouvrir les détails du produit pour le bouton.
  • Fenêtre pop-up détaillée : comprend les paramètres de la fenêtre pop-up des détails du produit. Vous pouvez personnaliser le texte du bouton, choisir d’inclure ou non le champ de 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 choisi l’action Ouvrir les détails du produit pour le 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 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 dans votre interface administrateur Shopify et l’avoir rendu disponible sur le canal de vente Bouton d’achat.

Étapes :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Canaux de vente > Bouton d’achat.

  2. Cliquez sur Créer un bouton d’achat.

  3. Cliquez sur Bouton d’achat de produit.

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

  5. Facultatif : personnalisez le bouton d’achat.

    1. Si votre produit a des variantes, sélectionnez 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, la page de paiement s’ouvre dans une nouvelle fenêtre, mais vous pouvez choisir de l’ouvrir dans le même onglet de navigateur que votre site web. Cliquez sur Paramètres avancés > Rediriger dans le même onglet.
  6. Cliquez sur Suivant.

  7. Cliquez sur Copier le code.

  8. Ouvrez l’éditeur HTML de la page web où vous souhaitez afficher le bouton d’achat. Consultez la page Ajouter le code du bouton d’achat au code HTML.

  9. Collez le code dans le code HTML à l’endroit où vous souhaitez que le bouton d’achat apparaisse, puis enregistrez vos modifications.

Mobile
  1. Depuis Shopify app, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Bouton d’achat.

  3. Appuyez sur Créer un bouton d’achat.

  4. Appuyez sur Bouton d’achat de produit.

  5. Sélectionnez le produit dans votre catalogue ou utilisez la recherche pour trouver un produit, puis appuyez sur Sélectionner.

  6. Facultatif : appuyez sur Personnaliser.

    1. Si votre produit comporte plusieurs variantes, sélectionnez 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 page de paiement s’ouvre dans une nouvelle fenêtre, mais vous pouvez choisir de l’ouvrir dans le même onglet de navigateur que votre site web. Appuyez sur Paramètres avancés > Rediriger dans le même onglet.
  7. Appuyez sur Terminé.

  8. Appuyez sur Copier le code.

  9. Ouvrez l’éditeur HTML de la page web où vous souhaitez afficher le bouton d’achat. Consultez la page Ajouter le code du bouton d’achat au code HTML.

  10. Collez le code dans le code HTML à l’endroit 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 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 :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Canaux de vente > Bouton d’achat.

  2. Cliquez sur Créer un bouton d’achat.

  3. Cliquez sur Bouton d’achat de collection.

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

  5. 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, la page de paiement s’ouvre dans une nouvelle fenêtre, mais vous pouvez choisir de l’ouvrir dans le même onglet de navigateur que votre site web. Cliquez sur Paramètres avancés > Rediriger dans le même onglet.
  6. Cliquez sur Suivant.

  7. Cliquez sur Copier le code.

  8. Ouvrez l’éditeur HTML de la page web où vous souhaitez afficher le bouton d’achat. Consultez la page Ajouter le code du bouton d’achat au code HTML.

  9. Collez le code dans le code HTML à l’endroit où vous souhaitez que le bouton d’achat apparaisse, puis enregistrez vos modifications.

Mobile
  1. Depuis Shopify app, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Bouton d’achat.

  3. Appuyez sur Créer un bouton d’achat.

  4. Appuyez sur Bouton d’achat de collection.

  5. Sélectionnez la collection ou utilisez la recherche pour la trouver, puis appuyez sur Sélectionner.

  6. Facultatif : appuyez sur 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, la page de paiement s’ouvre dans une nouvelle fenêtre, mais vous pouvez choisir de l’ouvrir dans le même onglet de navigateur que votre site web. Appuyez sur Paramètres avancés > Rediriger dans le même onglet.
  7. Appuyez sur Terminé.

  8. Appuyez sur Copier le code.

  9. Ouvrez l’éditeur HTML de la page web où vous souhaitez afficher le bouton d’achat. Consultez la page Ajouter le code du bouton d’achat au code HTML.

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