Ajout d'un code intégré

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 intégré au code HTML source de votre site web est légèrement différent en fonction de la manière et de l'endroit où vous souhaitez que vos boutons d'achat et de panier apparaissent sur votre plateforme de publication et parfois du thème que vous utilisez sur cette plateforme.

Remaque : si vous avez besoin d'aide pour ajouter du code intégré à des plateformes de publication en dehors de Shopify (telles que Squarespace ou WordPress.org, contactez votre fournisseur de service de site web ou la plateforme de publication directement pour obtenir de l'aide.

Ajout de code intégré dans un blog WordPress.org

Vous pouvez ajouter du code intégré à des articles individuels et au menu de la page d'accueil de votre blog WordPress.org.

Ajout de code intégré dans un article WordPress

Pour ajouter un code intégré à un article individuel :

  1. Dans Shopify, créez un bouton d'achat et copiez son code intégré depuis la boîte de dialogue Code intégré (ou cliquez sur Copier le code intégré dans le presse-papiers ).
  2. Dans le tableau de bord WordPress , cliquez sur Articles.
  3. Cliquez sur Ajouter un nouvel article pour créer un nouvel article, ou cliquez sur le nom d'un article existant sur lequel vous voulez afficher un bouton d'achat.
  4. Sur la page Ajouter un nouvel article ou Modifier un article , faites passer l'éditeur de texte du mode Visuel au mode Texte.
  5. Collez le code intégré dans le champ de texte principal de l'éditeur à la place où vous voulez que le bouton d'achat ou la collection s'affiche.
  6. Lorsque vous avez terminé, cliquez sur Enregistrer le brouillon , Aperçu , ou Publier.

Ajout de code intégré à un menu WordPress

Pour ajouter du code intégré à un menu sur la page d' accueil :

  1. Dans le tableau de bord WordPress , cliquez sur Apparence.
  2. Cliquez sur Personnaliser pour ouvrir l'éditeur de thème, puis sur Widgets.
  3. Cliquez sur le nom de la zone où vous voulez ajouter le bouton d'achat ou un code de panier personnalisé.
  4. Ouvrez un widget Texte existant ou cliquez sur Ajouter un widget , puis sur Texte.
  5. Collez le code intégré dans le champ de texte principal du widget Texte.
  6. Enregistrez vos modifications.

Ajout de code intégré dans votre blog Shopify

Vous pouvez ajouter du code intégré à des articles individuels de votre blog Shopify :

  1. Dans l'interface administrateur Shopify, cliquez sur Boutique en ligne.
  2. Cliquez sur Articles de blog.
  3. À 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.
  4. Dans la section Écrire un article de blog , cliquez sur Afficher le code HTML dans l'éditeur de Texte enrichi.
    Affichage du bouton d'éditeur HTML
  5. Collez votre code intégré dans le champ de texte principal.
  6. Cliquez sur Enregistrer.

Ajout de code intégré à Squarespace

Vous pouvez ajouter du code intégré à 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.

Pour ajouter du code intégré à des éléments sur la page dans Squarespace :

  1. À partir du tableau de bord Squarespace, ouvrez la page web sur laquelle vous souhaitez ajouter du code intégré.
  2. Recherchez sur la page les éléments 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 l'endroit où vous souhaitez insérer le code intégré.
  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 incorporé à partir de la boîte de dialogue Code incorporé.
  6. Dans votre tableau de bord Squarespace, collez le code incorporé 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. Puisque Squarespace désactive JavaScript dans son tableau de bord, vous devez prévisualiser votre page séparément pour voir le bouton d'achat ou le panier intégré que vous avez ajouté.

Ajout de code incorporé à 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.

Si vous souhaitez afficher plus d'un produit sur votre site Wix sans modifier le code incorporé, 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.

Pour intégrer un seul bouton d'achat pour un produit ou une collection sur votre site web Wix :

  1. À partir de votre interface administrateur Shopify, créez un bouton d'achat pour un produit ou une collection, puis copiez son code incorporé.
  2. À partir de 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 incorporé de votre bouton d'achat ou de votre collection dans le champ Ajouter votre code ici , puis cliquez sur Mettre à jour.
  7. Redimensionnez le widget de code HTML pour qu'il corresponde à son contenu. Si vous créez une incorporation avec un panier, assurez-vous que l'onglet du panier apparaît au bon endroit.
  8. Lorsque vous avez terminé, cliquez sur Enregistrer.

Incorporer plusieurs produits ou collections

Pour incorporer plusieurs produits ou collections à votre site web Wix :

  1. À partir de votre interface administrateur Shopify, créez un bouton d'achat pour un produit ou une collection, puis copiez son code incorporé.
  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 incorporés 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 incorporation avec un panier, assurez-vous que l'onglet du panier apparaît au bon endroit.
  10. Lorsque vous avez terminé, cliquez sur Enregistrer.

Ajouter des balises de script séparément

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

Pour ajouter des balises de script séparément :

  1. À partir du code incorporé 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 incorporé 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.

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

Essayez gratuitement