Embed Shopify Buy Button

You can embed a Shopify Buy Button directly into your Raisely campaign to display products or collections and enable purchases right from your campaign page.

How it works

Shopify provides an embed code for their Buy Button that includes both a <div> and a <script> tag. Because Raisely’s HTML Block doesn’t support script tags, you’ll need to:

• Paste the <div> element into a Raisely HTML Block
• Paste the JavaScript code into Campaign Settings > Apps & Integrations > Custom JavaScript (Advanced)

Step 1: Create your Buy Button in Shopify

1. Log in to your Shopify admin.
2. Go to Buy Button from the left-hand menu. (Install the Buy Button sales channel if it’s not already available.)
3. Click Create a Buy Button, then choose either Product or Collection.
4. Select the item(s) you'd like to feature.
5. Customise the appearance and layout to suit your campaign.
6. Click Next, then click Copy code.

Step 2: Paste the HTML Embed in Raisely

1. Open the Page Builder for your campaign.
2. Go to the section where you want your Shopify Buy Button to appear.
3. Click Add Block, then select the HTML Block.
4. Paste only the <div> portion of your embed code. For example:

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

5. Save the block.

Step 3: Add the JavaScript in Campaign Settings

1. In Raisely, go to your Campaign.
2. Navigate to Settings > Apps & Integrations > Custom JavaScript (Advanced).
3. Paste the JavaScript portion of the embed code:

(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"
                }
              }
            }
          }
        }
      });
    });
  }
})();

4. Click Save Settings.

Important: Limited Support

Tips

• Buy Button not showing? It may not appear in preview mode. Always check your live page.
• Using multiple products? Make sure each Buy Button has a unique div ID.