Embedding HTML Code on Your Site

Adding Buy Button code to HTML

The process of adding embed code to your website's source HTML is a bit different depending on how and where you want your Buy Buttons and cart to appear, on your publishing platform, and sometimes on the theme you're using on that platform.

On this page

Adding embed code to a WordPress.org blog

You can add embed code to individual posts and to the menu on the home page of your WordPress.org blog.

Add embed code to a WordPress post

  1. In Shopify, create a Buy Button and copy its embed code from the Embed Code dialog (or click Copy embed code to clipboard).
  2. From your WordPress dashboard, go to your posts.
  3. Create a new post, or edit an existing post where you want to display a Buy Button.
  4. Depending on the WordPress version you're using, complete one of the following steps:
    • In the post, change the text editor from Visual to Text mode.
    • From the block editor, click the + button, search for Custom HTML, and then click Custom HTML.
  5. Paste the embed code into the text field in the place where you want the Buy Button or collection to appear.
  6. When you're done, click Save Draft, Preview, or Publish.

Add embed code to a Wordpress menu

Steps:

  1. From your WordPress dashboard, click Appearance.
  2. Click Customize to open the theme editor, and then click Widgets.
  3. Click the name of the area where you want to add the Buy Button or custom cart code.
  4. Open an existing Text widget, or click Add a Widget, and then click Text.
  5. Paste the embed code into the main text field within the Text widget.
  6. Save your changes.

Adding embed code to your Shopify blog

Steps:

   
  1. From your Shopify admin, go to Online Store > Blog Posts.
  1. From the Blog Posts page, click the title of a blog post you want to edit, or click Add blog post to create a new one.
  2. In the Write your blog post section, click Show HTML in the rich text editor.
  3. Paste your embed code into the main text field.
  4. Click Save.

Adding embed code to Squarespace

You can add embed code to individual posts in Squarespace and to the menus on your home page. In some cases, you might want to do both. For example, you can embed a cart on your home page to receive purchases from Buy Buttons that you embed on individual posts.

Steps:

  1. From your Squarespace dashboard, open the webpage where you want to add the embed code.
  2. Find the element on the page where you want the Buy Button or embedded cart to appear, move your cursor over the Page Content area, and then click EDIT.
  3. Click the insert point where you want to add the embed code.
  4. In the More section of the Content Blocks dialog, click Code.
  5. From your Shopify admin, copy the embed code from the Embed Code dialog.
  6. From your Squarespace dashboard, paste the embed code into the CODE dialog. Make sure that the text field is set to receive HTML.
  7. Click APPLY on the EDIT CODE dialog.
  8. Click SAVE again on the page editor. Because Squarespace disables JavaScript in its dashboard, you need to preview your page separately to see the Buy Button or embedded cart that you've added.

If you complete the steps and your Buy Button is not loading, then you might need to disable Ajax loading. To see more details, go to Enable or disable Ajax.

Adding embed code to Wix

After you've created a Buy Button or collection in your Shopify admin, you can add it to your Wix website using the Wix Website Editor.

If you want to display more than one product on your Wix website without editing the embed code, then you can embed a collection. You can create a new collection in your Shopify admin for the products that you want to display on Wix.

Steps:

  1. From your Shopify admin, create a Buy Button for a product or collection, and then copy its embed code.
  1. From your Wix account, find the site you want to edit in the My Sites section, and then click Edit Site.
  2. In the Wix Website Editor, click the + button, and then click More.
  3. Click HTML Code to add an HTML code widget to the page.
  4. Click Enter Code.
  5. On the HTML Settings dialog, paste the embed code for your Buy Button or collection in the Add your code here field and then click Update.
  6. Resize the HTML code widget to fit its contents. If you are creating an embed with a cart, then make sure the cart tab appears in the right place.
  7. When you're done, click Save.

Embed multiple products or collections

Steps:

  1. From your Shopify admin, create a Buy Button for a product or collection, and then copy its embed code.
  2. Paste the code into a code editor or the Wix website builder. Repeat the first two steps until you have created the Buy Buttons you need.
  3. Edit the embed codes to make sure they display in the proper alignment.
  4. From your Wix account, find the site you want to edit in the My Sites section, and then click Edit Site.
  5. In the Wix Website Editor, click the + button, and then click More.
  6. Click HTML Code to add an HTML code widget to the page.
  7. Click Enter Code.
  8. On the HTML Settings dialog, paste the edited code for your Buy Buttons in the Add your code here field and then click Update.
  9. Resize the HTML code widget to fit its contents. If you are creating an embed with a cart, then make sure the cart tab appears in the right place.
  10. When you're done, click Save.

Add script tags separately

Some platforms (like Unbounce) require that you paste the embed code's <script> tags in the page header, and the rest of the embed code on the page where you want the Buy Button to appear.

Steps:

  1. From the embed code that's generated when you create a Buy Button, copy both the <div> element and the <script> element. For example:

    <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. Open the page header for the website where you want to embed a Buy Button.

  3. Paste the entire <script> element in the page header.

  4. Save your changes.

  5. From the original embed code in your Shopify admin, copy only the <div> element. For example:

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

  6. Open the page on your website where you want to embed a Buy Button.

  7. Paste the <div> code snippet into the page.

  8. Save your changes.