Shopify “Buy Button” not rendering on External Sites

When a Shopify Buy Button fails to render on an external website—such as WordPress, Squarespace, Webflow, or a custom HTML page—visitors see empty white space where a product card or checkout button should appear.

This issue occurs when the product is not published to the Buy Button sales channel in Shopify, the external site’s content security policy (CSP) blocks Shopify’s JavaScript library, or the host content management system (CMS) strips raw <script> tags from the page editor.

How do I fix a Shopify Buy Button that won’t render on an external site?

To fix a Shopify Buy Button that is not rendering, publish the target product to the Buy Button sales channel in Shopify Admin, paste the embed code into a dedicated Custom HTML block rather than a visual text editor, and verify that your external website runs over HTTPS to prevent mixed-content script blocks.

---

Fast Diagnostic Snapshot

Parameter	Diagnostic Focus
Observed Symptom	Blank container, broken iframe placeholder, or console TypeError / 404 Not Found
System Layer	Shopify Buy Button JS SDK (buybutton.js) / Host Site DOM
Common Trigger	Product omitted from the “Buy Button” sales channel, or CMS editor stripping <script>
Network Block	Content Security Policy (CSP) blocking external scripts from cdn.shopify.com
Admin Route	Shopify Admin > Settings > Apps and sales channels > Buy Button

---

Understanding How the Buy Button Embed Works

The Shopify Buy Button is not a simple static link; it is a client-side JavaScript snippet that loads the Shopify BuyButton SDK (buybutton.js) from Shopify’s CDN.

[Host Website (WordPress/Webflow)]
           │
           ├── 1. Browser executes embedded <script> snippet
           ├── 2. Fetches buybutton.js from cdn.shopify.com
           ├── 3. Uses embedded Storefront Access Token to query Storefront API
           └── 4. Builds an isolated iframe containing product title, image, and cart

If any link in this sequence breaks—such as the API rejecting the embedded token or the host CMS filtering out JavaScript—the iframe never builds.

---

Root Causes and Step-by-Step Fixes

1. Product Not Published to the “Buy Button” Sales Channel

Generating embed code inside the Buy Button app does not automatically ensure the product remains active on that sales channel. If a product’s channel visibility is toggled off, the Storefront API responds with a null product object, causing the rendering script to abort without building the button.

The Fix:

1. In Shopify Admin, navigate to Products.
2. Select the product you are trying to embed.
3. In the right-hand sidebar, locate the Publishing (or Sales Channels) card.
4. Click Manage (or the three dots).
5. Ensure Buy Button is checked.
6. Click Save.
7. If your embed code was generated several months ago and you recently rotated your custom app credentials, the embedded token may be rejected. In that scenario, see Troubleshooting: Shopify “Storefront API” returning 401 Unauthorized.

2. Host CMS Visual Editor Stripping Script Tags

Modern visual builders (such as WordPress Gutenberg, Elementor, Squarespace, and Wix) include security sanitizers that strip raw <script> tags when pasted into standard “Paragraph” or “Rich Text” blocks. The HTML <div> container is saved to the page, but the JavaScript required to fetch and display the product is deleted.

The Fix:

• On WordPress (Gutenberg): Do not use a Paragraph or Classic block. Insert a Custom HTML block, paste the entire Shopify snippet, and click Update.
• On Squarespace: Add a Code block (not an Embed or Markdown block). Ensure the display mode is set to HTML and that “Display Source” is toggled off.
• On Webflow: Use an Embed component within the Designer. Paste the snippet and publish the site to your staging or production domain (scripts do not execute inside the Webflow Designer canvas).

3. Mixed Content and Content Security Policy (CSP) Blocks

If your host website is served over HTTP while requesting assets from Shopify over HTTPS (or vice versa), the browser blocks the connection as mixed content.

Additionally, enterprise CMS platforms and strict web security headers often deploy a Content Security Policy that restricts external scripts and framing.

The Fix:

1. Verify that your host website URL begins with https://.
2. Open your browser’s Developer Tools (F12) on the external page and select the Console tab.
3. Check for the following errors:
   • Blocked script execution from '<https://sdks.shopifycdn.com/buy-button/latest/buybutton.js>' because it violates the following Content Security Policy directive...
4. If a CSP block is present, update your host server headers (.htaccess, Nginx config, or Cloudflare transformation rules) to whitelist Shopify resources:
   • script-src 'self' <https://sdks.shopifycdn.com> <https://cdn.shopify.com>;
   • frame-src 'self' <https://your-store.myshopify.com>;
   • connect-src 'self' <https://your-store.myshopify.com>;

If your external site also suffers from wider stylesheet delivery problems or edge caching drops, consult Troubleshooting: Shopify “CSS/JavaScript” not loading (CDN Latency Fix).

4. Duplicate Script Declarations on Multi-Product Pages

If you embed multiple Buy Buttons on a single webpage (such as a full catalog grid), pasting the full embed code for every product causes the browser to load buybutton.js multiple times. This can trigger JavaScript race conditions where earlier script instances are overwritten before they finish mounting the DOM iframe.

The Fix:
When embedding multiple products on one page, structure the code efficiently:

1. Load the core script library once in the page header or at the bottom of the <body>: <script src="<https://sdks.shopifycdn.com/buy-button/latest/buybutton.js>"></script>
2. For each individual product, insert only the target <div> container and its corresponding configuration script block on the page.

---

Verifying the Fix

After updating your page:

1. Open the external website in a private or incognito browsing window.
2. Confirm the product title, price, variant picker, and “Add to cart” button render inside the iframe.
3. Click the button to test cart checkout creation.
4. For systemic storefront issues or checkout generation bugs across all sales channels, refer to Fixing Shopify Performance and Checkout Errors: Troubleshooting Liquid Glitches, App Conflicts, and Cart Failures.