Ajout du code du Bouton d’achat au format HTML

Une fois que vous avez créé un Bouton d’achat dans votre interface administrateur Shopify, vous pouvez l’ajouter à votre propre site web ou blog.

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

Ajout de code d’intégration à WordPress

Vous pouvez ajouter un code d’intégration aux articles, aux pages ou aux modèles de votre site WordPress.

Ajouter un 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 à partir de la boîte de dialogue Code d’intégration (ou cliquez sur Copier le code d’intégration).
2. À partir de votre tableau de bord WordPress, accédez à vos articles ou à vos pages.
3. Créez un article ou une page, ou modifiez un contenu existant.
4. Dans l’éditeur de blocs, cliquez sur le bouton +, recherchez 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 HTML personnalisé ou prévisualisez l’affichage de votre Bouton d’achat :
   • Pour déplacer le bloc HTML personnalisé, cliquez sur les flèches dans la barre d’outils du bloc ou faites glisser le bloc vers un nouvel emplacement.
   • Pour prévisualiser le Bouton d’achat, cliquez sur Prévisualiser dans la barre d’outils du bloc.
7. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer le brouillon, Prévisualiser ou Publier pour votre article ou votre page.

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

Ajouter un 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 à partir de la boîte de dialogue Code d’intégration (ou cliquez sur Copier le code d’intégration).
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 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 HTML personnalisé ou prévisualisez l’affichage de votre Bouton d’achat :
   • Pour déplacer le bloc HTML personnalisé, cliquez sur les flèches dans la barre d’outils du bloc ou faites glisser le bloc vers un nouvel emplacement.
   • Pour prévisualiser le Bouton d’achat, cliquez sur Prévisualiser dans la barre d’outils du bloc.
7. Lorsque vous avez terminé, cliquez sur le bouton Prévisualiser ou Enregistrer pour le modèle.

Ajout de code d’intégration à votre blog de Shopify

Étapes :

Ajout de code d’intégration à Squarespace

Vous pouvez ajouter un code d’intégration à des articles individuels dans Squarespace et aux menus de votre page d’accueil. Dans certains cas, il peut être judicieux de faire les deux. Par exemple, vous pouvez intégrer un panier sur votre page d’accueil pour recevoir les achats provenant des Boutons d’achat que vous intégrez dans des articles individuels.

Étapes :

1. Depuis votre tableau de bord Squarespace, ouvrez la page web à laquelle vous souhaitez ajouter le code d’intégration.
2. Repérez l’élément sur la page où vous souhaitez que le Bouton d’achat ou le panier intégré s’affiche, déplacez votre curseur sur la zone Contenu de la page, puis cliquez sur MODIFIER.
3. Cliquez sur le point d’insertion où vous souhaitez ajouter le code d’intégration.
4. Dans la section Plus de la boîte de dialogue Blocs de contenu, cliquez sur Code.
5. Depuis votre interface administrateur Shopify, copiez le code d’intégration de la boîte de dialogue Code d’intégration.
6. Depuis 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. Dans la boîte de dialogue MODIFIER LE CODE, cliquez sur APPLIQUER.
8. Cliquez à nouveau sur ENREGISTRER dans l’éditeur de page. Comme Squarespace désactive JavaScript dans son tableau de bord, vous devez prévisualiser votre page séparément pour vérifier que le bouton d’achat ou le panier intégré fonctionne.

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

Ajout d’un code d’intégration à Wix

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

Si vous souhaitez afficher plusieurs produits sur votre site web 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. Depuis votre interface administrateur Shopify, créez un bouton d’achat pour un produit ou une collection, puis copiez son code d’intégration.

2. Depuis votre compte Wix, recherchez le site que vous souhaitez modifier dans la section Mes sites, puis cliquez sur Modifier le site.
3. Dans l’éditeur de site web Wix, cliquez sur le bouton +, puis sur Plus.
4. Cliquez sur Code HTML pour ajouter un widget de code HTML à la page.
5. Cliquez sur Saisir le code.
6. 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 Ajoutez votre code ici, puis cliquez sur Mettre à jour.
7. Redimensionnez le widget de code HTML pour l’adapter à son contenu. Si vous créez une intégration avec un panier, assurez-vous que l’onglet du panier s’affiche au bon endroit.
8. Lorsque vous avez terminé, cliquez sur Enregistrer.

Intégration de plusieurs produits ou collections

Étapes :

1. Depuis 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 l’outil de création 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 sont bien alignés.
4. Depuis 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é de vos boutons d’achat dans le champ Ajoutez votre code ici, puis cliquez sur Mettre à jour.
9. Redimensionnez le widget de code HTML pour l’adapter à son contenu. Si vous créez une intégration avec un panier, assurez-vous que l’onglet du panier s’affiche au bon endroit.
10. Lorsque vous avez terminé, cliquez sur Enregistrer.

Ajout de balises script séparément

Certaines plateformes (comme Unbounce) exigent 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 afficher le bouton d’achat.

Étapes :

1. À partir du code d’intégration généré lorsque vous créez un bouton d’achat, copiez à la fois 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>

2. Ouvrez l’en-tête de la page du site web où vous souhaitez intégrer un bouton d’achat.
3. Collez l’élément <script> entier dans l’en-tête de la page.
4. Enregistrez vos modifications.
5. À 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>

6. Ouvrez la page de votre site web où vous souhaitez intégrer un bouton d’achat.
7. Collez l’extrait de code <div> dans la page.
8. Enregistrez vos modifications.