Ajouter un code de bouton d'achat à un code HTML

Après avoir créé un bouton d'achat dans l'interface administrateur Shopify, vous êtes prêt(e) à l'ajouter à votre propre site web ou blog.

Le processus d’ajout de code d’intégration au code HTML source de votre site web diffère légèrement, en fonction de la manière et de l’endroit où vous souhaitez que vos boutons d’achat et votre panier s’affichent sur votre plateforme de publication. Parfois, le processus diffère aussi selon le thème que vous utilisez sur cette plateforme.

Remarque

Si vous avez besoin d’aide pour ajouter du code d’intégration à des plateformes de publication externes à Shopify, telles que Squarespace ou WordPress, contactez directement votre fournisseur de site web ou votre plateforme de publication.

Ajouter du code d’intégration à WordPress

Vous pouvez ajouter du code d’intégration à des articles, des pages ou des modèles sur votre site WordPress.

Remarque

Les boutons d’achat intégrés sont compatibles avec les sites auto-hébergés WordPress.org ainsi qu’avec certains forfaits proposés par WordPress.com. La documentation ci-dessous a été rédigée pour les versions récentes de WordPress. Il se peut que la version installée sur votre site soit différente. Pour en savoir plus sur les versions de WordPress, consultez le site d’assistance de WordPress.

Ajouter du code d’intégration à un article ou une page WordPress

1. Dans Shopify, créez un bouton d'achat et copiez son code d'intégration depuis la boîte de dialogue Code d'intégration (ou cliquez sur Copier le code d'intégration dans le presse-papiers).
2. Depuis votre tableau de bord WordPress, accédez à vos articles ou pages.
3. Créez un nouvel article ou une nouvelle page, ou modifiez un article ou une page existants.
4. Dans l’éditeur de blocs, cliquez sur le bouton +, recherchez Custom HTML (HTML personnalisé), puis cliquez pour insérer un bloc HTML personnalisé.
5. Collez le code d’intégration dans le champ de texte fourni par le bloc HTML personnalisé.

6. Facultatif : déplacez le bloc de code HTML personnalisé ou prévisualisez l’aspect de votre bouton d’achat :

   • Pour déplacer le bloc HTML personnalisé, cliquez sur les boutons fléchés de la barre d’outils du bloc ou faites glisser le bloc vers un nouvel emplacement.
   • Pour obtenir un aperçu du bouton d’achat, cliquez sur Aperçu dans la barre d’outils du bloc.

7. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer le brouillon, Aperçu ou Publier de votre article ou page.

Si vous utilisez le plug-in de l’éditeur classique de WordPress (Classic Editor), au lieu d’utiliser un bloc HTML personnalisé, passez du mode Visuel au mode Texte de l’éditeur de texte et collez le code d’intégration dans l’éditeur.

Ajouter du code d’intégration à un modèle WordPress

Si votre thème WordPress prend en charge l’éditeur de site, vous pouvez ajouter un bouton d’achat intégré à n’importe lequel des modèles de votre site.

Étapes :

1. Dans Shopify, créez un bouton d'achat et copiez son code d'intégration depuis la boîte de dialogue Code d'intégration (ou cliquez sur Copier le code d'intégration dans le presse-papiers).
2. Dans votre tableau de bord WordPress, accédez à l’éditeur.
3. Accédez au modèle que vous souhaitez modifier.
4. Dans l’éditeur de blocs, cliquez sur le bouton +, recherchez Custom HTML (HTML personnalisé), puis cliquez pour insérer un bloc HTML personnalisé.
5. Collez le code d’intégration dans le champ de texte fourni par le bloc HTML personnalisé.

6. Facultatif : déplacez le bloc de code HTML personnalisé ou prévisualisez l’aspect de votre bouton d’achat :

   • Pour déplacer le bloc HTML personnalisé, cliquez sur les boutons fléchés de la barre d’outils du bloc ou faites glisser le bloc vers un nouvel emplacement.
   • Pour obtenir un aperçu du bouton d’achat, cliquez sur Aperçu dans la barre d’outils du bloc.

7. Lorsque vous avez terminé, cliquez sur le bouton Aperçu ou Enregistrer du modèle.

Ajout de code d'intégration dans votre blog Shopify

Remarque

Le bouton d’achat crée un panier distinct. Si votre client se rend sur une autre page de votre boutique en ligne, l’article ne s’affichera plus dans le panier. Vous pouvez modifier le bouton d’achat de manière à accéder directement à la page de paiement.

Remarque : #### Étapes :

Bureau

1. Depuis votre interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Blog Posts (Articles de blog).
2. À la page Articles de blog, cliquez sur un article que vous voulez modifier, ou sur Ajouter un article de blog pour en créer un nouveau.
3. Dans la section Écrire un article de blog, cliquez sur Afficher le code HTML dans l'éditeur de texte enrichi.
4. Collez votre code d'intégration dans le champ de texte principal.
5. Cliquez sur Save (Enregistrer).

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Articles de blog.

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Articles de blog.

## Ajout de code d'intégration à Squarespace

Attention

Certaines personnalisations avancées sur Squarespace sont spécifiques au thème utilisé. Ces personnalisations ne sont pas prises en charge par Shopify.

Vous pouvez ajouter du code d'intégration à des articles individuels sur Squarespace et au menu de votre page d'accueil. Dans certains cas, vous voudrez faire les deux. Par exemple, vous pouvez intégrer un panier sur votre page d'accueil pour recevoir des achats des boutons d'achat que vous avez intégrés dans des articles individuels.

Étapes :

1. À partir du tableau de bord Squarespace, ouvrez la page web sur laquelle vous souhaitez ajouter du code d'intégration.
2. Trouvez l’élément de la page où vous souhaitez que le bouton d’achat ou le panier intégré s’affiche, placez votre curseur sur la zone Contenu de la page, puis cliquez sur MODIFIER.
3. Cliquez sur l'endroit où vous souhaitez insérer le code d'intégration.
4. Dans la section Plus de la boîte de dialogue Blocs de contenu, cliquez sur Code.
5. À partir de votre interface administrateur Shopify, copiez le code d'intégration à partir de la boîte de dialogue Code d'intégration.
6. Dans votre tableau de bord Squarespace, collez le code d'intégration dans la boîte de dialogue CODE. Assurez-vous que le champ de texte est configuré pour recevoir du code HTML.
7. Cliquez sur APPLIQUER dans la boîte de dialogue MODIFIER LE CODE.
8. Cliquez à nouveau sur ENREGISTRER dans l’éditeur de page. Étant donné que Squarespace désactive JavaScript dans son tableau de bord, vous devez prévisualiser votre page séparément pour vérifier si le bouton d’achat ou le panier intégré fonctionne.

Si vous suivez les étapes ci-dessus et que votre bouton d’achat ne se charge pas, vous devrez peut-être désactiver le chargement Ajax. Pour plus d’informations, consultez la section Activer ou désactiver Ajax.

Remarque

Si vous ajoutez un panier intégré à un menu de votre page d’accueil Squarespace, ce panier reçoit les commandes passées avec les boutons d’achat que vous intégrez à des publications individuelles.

Ajout de code d'intégration à Wix

Une fois que vous avez créé un bouton d'achat ou une collection dans l'interface administrateur Shopify, vous pouvez l'ajouter à votre site web Wix à l'aide de l'éditeur de site web Wix.

Attention

Si vous souhaitez intégrer des boutons d’achat pour plusieurs produits ou collections, vous devez modifier le code d’intégration avant de l’ajouter au widget de code HTML de Wix. Si vous intégrez plusieurs boutons d’achat à votre site web Wix sans modifier le code d’intégration, les clients qui essaieront d’acheter plusieurs produits auront un panier distinct pour chaque produit.

Si vous souhaitez afficher plus d'un produit sur votre site Wix sans modifier le code d'intégration, vous pouvez intégrer une collection. Vous pouvez créer une nouvelle collection dans votre interface administrateur Shopify pour les produits que vous souhaitez afficher sur Wix.

Étapes :

1. À partir de votre interface administrateur Shopify, créez un bouton d'achat pour un produit ou une collection, puis copiez son code d'intégration.

Remarque

Lorsque vous créez votre bouton d’achat pour un site web Wix, vous ne pouvez pas utiliser l’option Rediriger dans le même onglet en raison des restrictions imposées par Wix.

1. À partir de votre compte Wix, recherchez le site que vous souhaitez modifier dans la section Mes sites, puis cliquez sur Modifier le site.
2. Dans l'éditeur de site web Wix, cliquez sur le bouton +, puis sur Plus.
3. Cliquez sur Code HTML pour ajouter un widget de code HTML à la page.
4. Cliquez sur Saisir le code.
5. Dans la boîte de dialogue Paramètres HTML, collez le code d'intégration de votre bouton d'achat ou de votre collection dans le champ Ajouter votre code ici, puis cliquez sur Mettre à jour.
6. Redimensionnez le widget de code HTML pour qu’il corresponde à son contenu. Si vous créez une intégration avec un panier, vérifiez que l’onglet du panier s’affiche au bon endroit.
7. Quand vous avez terminé, cliquez sur Enregistrer.

Incorporer plusieurs produits ou collections

Étapes :

1. À partir de votre interface administrateur Shopify, créez un bouton d'achat pour un produit ou une collection, puis copiez son code d'intégration.
2. Collez le code dans un éditeur de code ou dans le créateur de site web Wix. Répétez les deux premières étapes jusqu'à ce que vous ayez créé les boutons d'achat dont vous avez besoin.
3. Modifiez les codes d'intégration pour vous assurer qu'ils s'affichent correctement.
4. À partir de votre compte Wix, recherchez le site que vous souhaitez modifier dans la section Mes sites, puis cliquez sur Modifier le site.
5. Dans l'éditeur de site web Wix, cliquez sur le bouton +, puis sur Plus.
6. Cliquez sur Code HTML pour ajouter un widget de code HTML à la page.
7. Cliquez sur Saisir le code.
8. Dans la boîte de dialogue Paramètres HTML, collez le code modifié pour vos boutons d'achat dans le champ Ajouter votre code ici, puis cliquez sur Mettre à jour.
9. Redimensionnez le widget de code HTML pour qu’il corresponde à son contenu. Si vous créez une intégration avec un panier, vérifiez que l’onglet du panier s’affiche au bon endroit.
10. Quand vous avez terminé, cliquez sur Enregistrer.

Remarque

Besoin d’aide avec l’éditeur Wix ? Contactez l’assistance Wix.

Ajouter des balises de script séparément

Certaines plateformes (comme Unbounce) nécessitent que vous colliez les balises <script> du code d’intégration dans l’en-tête de la page, et le reste du code d’intégration sur la page où vous souhaitez que le bouton d’achat s’affiche.

Étapes :

1. À partir du code d'intégration généré lorsque vous créez un bouton d'achat, copiez l'élément <div> et l'élément <script>. Par exemple :

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

1. Ouvrez l'en-tête de la page pour le site web auquel vous souhaitez intégrer un bouton d'achat.
2. Collez tout l'élément <script> dans l'en-tête de la page.
3. Enregistrez vos modifications.
4. À partir du code d'intégration d'origine dans votre interface administrateur Shopify, copiez uniquement l'élément <div>. Par exemple :

<div id='product-component-2dd3c8704e6'></div>

1. Ouvrez la page de votre site web où vous souhaitez intégrer un bouton d'achat.
2. Collez l'extrait de code <div> sur la page.
3. Enregistrez vos modifications.