Shopify Buy Button on External Website: Complete Setup Guide

What Is the Shopify Buy Button and Why Does It Exist?

Not every business needs a full online store. Maybe you run a popular blog, a nonprofit, a band's website, or a portfolio with a handful of products to sell. The Shopify Buy Button lets you embed a product card — complete with images, pricing, variant selectors, and an add-to-cart button — directly onto any external website. Customers browse and buy without ever leaving your domain (except at checkout).

Placing a Shopify Buy Button on an external website turns any webpage into a sales channel. You get Shopify's commerce infrastructure — payment processing, inventory tracking, order management, tax calculations — without rebuilding your entire site on Shopify. The embed code works on WordPress, Squarespace, Webflow, Wix, custom HTML, and virtually any platform that accepts JavaScript snippets.

The Buy Button is included free on every Shopify plan, including the $5/month Starter plan. That makes it the cheapest path to selling with Shopify if you already have a website and don't want to migrate it. For merchants evaluating their apps and integration options, the Buy Button is often overlooked in favor of heavier solutions — but for the right use case, it's the most efficient tool available.

When to Use the Buy Button vs. a Full Shopify Store

The Buy Button is powerful, but it isn't the right solution for every scenario. The decision depends on how many products you sell, how much control you need over the shopping experience, and whether your existing website is central to your brand.

The Buy Button Makes Sense When

• You already have a website you love — a WordPress blog, a Squarespace portfolio, a Webflow marketing site — and you want to add commerce without a redesign
• You sell a small catalog (1-25 products) — the Buy Button works product by product, so managing hundreds of embeds becomes tedious
• Your website is the primary experience — customers visit for content, community, or information, and products are secondary
• Budget is tight — at $5/month on Shopify Starter, the Buy Button is the cheapest way to access Shopify's checkout
• You need a quick launch — embedding a Buy Button takes minutes, not weeks

A Full Shopify Store Makes Sense When

• Products are your primary offering — you need collection pages, filtering, search, and a rich browsing experience
• You sell 25+ products — managing individual embeds doesn't scale
• You need advanced features — customer accounts, wishlists, loyalty programs, subscriptions
• You want Shopify apps — most apps work only within a Shopify storefront, not on external Buy Button embeds

If you're just getting started with commerce, our guide on how to set up a Shopify store covers the full-store path in detail.

Setting Up the Buy Button Sales Channel: Step by Step

Getting the Buy Button running requires two things: a Shopify account with at least one product, and access to the Buy Button sales channel. Here's the complete setup.

Step 1: Add the Buy Button Sales Channel

1. Log in to your Shopify admin
2. Navigate to Settings > Apps and sales channels
3. Click Shopify App Store and search for "Buy Button channel"
4. Click Add channel to install it
5. The Buy Button appears in your left sidebar under Sales channels

Step 2: Create a Buy Button

1. Go to Buy Button in your Shopify admin sidebar
2. Click Create a Buy Button
3. Choose between Product Buy Button (single product) or Collection Buy Button (group of products)
4. Select the product or collection you want to embed
5. The customization editor opens with a live preview

Step 3: Customize the Appearance

The editor provides visual controls for every element:

• Layout — choose between a full product card (image + details + button) or a standalone button
• Colors — customize button color, text color, and background
• Typography — adjust font size and family
• Button text — change "Add to cart" to anything you want ("Buy Now," "Get Yours," "Order Today")
• Cart behavior — choose between a popup cart, a redirect to Shopify checkout, or opening a new window

Step 4: Copy and Embed the Code

Click Next to generate the embed code. You'll receive two pieces of JavaScript:

1. A `<script>` tag — loads the Buy Button SDK (place this once in your site's <head> or before the closing </body> tag)
2. A `<div>` + initialization script — renders the specific product button (place this wherever you want the button to appear)

<!-- Place this in your <head> or before </body> — only once per page -->
<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: 'your-store.myshopify.com',
      storefrontAccessToken: 'your-storefront-access-token',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: 'YOUR_PRODUCT_ID',
        node: document.getElementById('product-component'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
          product: {
            buttonDestination: 'cart',
            contents: {
              img: true,
              title: true,
              price: true,
            },
            styles: {
              button: {
                'background-color': '#5c6ac4',
                'border-radius': '4px',
                'font-size': '16px',
                padding: '12px 24px',
              },
            },
          },
          cart: {
            popup: true,
          },
        },
      });
    });
  }
})();
/*]]>*/
</script>

<!-- Place this div wherever you want the product to appear -->
<div id="product-component"></div>

The generated code is self-contained. It creates an iframe-based widget that loads Shopify's styles independently of your site's CSS, so it won't conflict with your existing design.

Embedding on WordPress

WordPress is the most common platform for adding a Shopify Buy Button on an external website, and there are two approaches depending on your editor.

Block Editor (Gutenberg)

1. Open the page or post where you want the product
2. Add a Custom HTML block (click + and search for "Custom HTML")
3. Paste the full embed code from Shopify
4. Click Preview to verify it renders correctly
5. Publish or update the page

Classic Editor

1. Switch to the Text tab (not Visual)
2. Paste the embed code at the position where you want the button
3. Do not switch back to the Visual tab before saving — the editor may strip the JavaScript

WordPress Plugin Alternative

Shopify offers an official WordPress plugin that simplifies the process:

1. Install the Shopify Buy Button plugin from the WordPress plugin directory
2. Connect your Shopify store
3. Use the plugin's built-in product picker to insert Buy Buttons via shortcode
4. The plugin handles code injection automatically

The plugin approach is cleaner for non-technical users, but the manual embed method gives you more control over placement and styling. According to Shopify's official documentation on the Buy Button, the manual method works across every WordPress configuration, while the plugin may conflict with certain themes or caching plugins.

Performance Tip for WordPress

The Buy Button SDK loads ~80KB of JavaScript. If you're embedding multiple products on one page, the SDK loads once and each product adds only its configuration — not a second copy of the script. For single-product pages, consider lazy loading the embed to prevent it from affecting your Core Web Vitals scores.

Embedding on Squarespace

Squarespace limits custom JavaScript to specific block types, but the Buy Button works with its Code Block feature.

Step-by-Step for Squarespace

1. Open the page editor in Squarespace
2. Click Add Block and select Code
3. In the Code Block settings, make sure Display Source is unchecked
4. Paste the full Shopify Buy Button embed code
5. Click Apply and save the page

Squarespace-Specific Considerations

• Code injection via Settings — if you want the Buy Button SDK to load site-wide (useful when embedding products on multiple pages), add the SDK script to Settings > Advanced > Code Injection > Footer. Then each page only needs the product-specific <div> and initialization code.
• Squarespace CSS conflicts — Squarespace's styles can occasionally override Buy Button fonts. Add !important declarations to your custom button styles if the button looks off.
• Business plan required — Code Blocks require Squarespace's Business plan ($33/month) or any Commerce plan. Personal plan users can't embed custom JavaScript.

For merchants weighing Squarespace's native commerce against Shopify's Buy Button, DigitalSupermarket's comparison of Shopify embeds highlights that Shopify's checkout conversion rate consistently outperforms Squarespace Commerce — making the Buy Button a strong option even on Squarespace sites.

Embedding on Webflow

Webflow's code embed feature makes it one of the friendliest platforms for the Shopify Buy Button.

Step-by-Step for Webflow

1. Open your page in the Webflow Designer
2. Drag an Embed element (under Components) to the desired location
3. Paste the full Shopify embed code into the code editor
4. Click Save & Close
5. Publish the site to see the button live

Webflow Advantages

Webflow publishes static HTML to a CDN, so the Buy Button script loads fast with no server-side overhead. You can also use Webflow's built-in CSS to style wrapper elements around the Buy Button, creating seamless layouts that match your design system.

For stores that need deeper Shopify-Webflow integration than the Buy Button provides, the headless Hydrogen and Shopify approaches offer full Storefront API access with complete design control.

Multiple Products on Webflow

If you're embedding a product grid, use a Webflow Collection List with an Embed element inside each item. Store the Shopify product IDs as CMS fields, then reference them in the embed code using Webflow's dynamic fields. This approach scales better than manually embedding each product.

Embedding on Custom HTML Sites

If your site is built with plain HTML, a static site generator (Hugo, Jekyll, Eleventy), or any framework that outputs HTML, embedding is straightforward.

Basic HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our Products</title>
</head>
<body>
  <h1>Featured Product</h1>

  <!-- Shopify Buy Button renders here -->
  <div id="product-component-1"></div>
  <div id="product-component-2"></div>

  <!-- Buy Button SDK — load once -->
  <script type="text/javascript">
    // Paste your Shopify-generated script here
    // Each product gets its own createComponent() call
    // but shares the same ShopifyBuy client instance
  </script>
</body>
</html>

React / Next.js Integration

For React-based sites, wrap the Buy Button in a useEffect hook to load it after the component mounts:

import { useEffect, useRef } from 'react';

export default function ShopifyProduct({ productId }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const scriptURL =
      'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

    const script = document.createElement('script');
    script.src = scriptURL;
    script.async = true;
    script.onload = () => {
      const client = window.ShopifyBuy.buildClient({
        domain: 'your-store.myshopify.com',
        storefrontAccessToken: 'your-token',
      });

      window.ShopifyBuy.UI.onReady(client).then((ui) => {
        ui.createComponent('product', {
          id: productId,
          node: containerRef.current,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: { img: true, title: true, price: true },
            },
            cart: { popup: true },
          },
        });
      });
    };

    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [productId]);

  return <div ref={containerRef} />;
}

This pattern keeps the Buy Button contained within React's component lifecycle and prevents memory leaks on navigation. For teams building with Next.js or other React frameworks, the Shopify development resources cover more advanced integration patterns.

Customization Options: Styling, Behavior, and Layout

The Buy Button's default appearance is functional but generic. Customization turns it into something that matches your brand.

Visual Customization via the Shopify Editor

The built-in editor provides controls for:

Advanced CSS Overrides

The Buy Button renders inside an iframe, which means your site's CSS won't affect it by default. To apply custom styles, use the styles object in the JavaScript configuration:

options: {
  product: {
    styles: {
      button: {
        'background-color': '#C4E456',
        'border-radius': '8px',
        'font-family': '"DM Sans", sans-serif',
        'font-weight': '700',
        'font-size': '15px',
        'padding': '14px 28px',
        ':hover': {
          'background-color': '#95BF47',
        },
        ':focus': {
          'background-color': '#95BF47',
        },
      },
      title: {
        'font-family': '"DM Sans", sans-serif',
        'font-size': '18px',
        color: '#1a1a1a',
      },
      price: {
        'font-size': '16px',
        color: '#4a4a4a',
      },
    },
  },
  cart: {
    styles: {
      button: {
        'background-color': '#C4E456',
        ':hover': {
          'background-color': '#95BF47',
        },
      },
    },
    popup: true,
  },
}

Behavioral Customization

Beyond visual styling, you can control what happens when a customer interacts with the button:

• `buttonDestination: 'cart'` — adds the item to a popup cart (default)
• `buttonDestination: 'checkout'` — skips the cart and goes directly to Shopify checkout
• `buttonDestination: 'modal'` — opens a product detail modal with full description and variant selector
• `cart.popup: false` — disables the popup cart and redirects to a full-page checkout

For high-ticket single products, sending customers directly to checkout with buttonDestination: 'checkout' reduces friction and can improve conversion. For stores with multiple products, the popup cart lets customers continue browsing before checking out. Hostinger's Buy Button tutorial covers additional styling techniques for matching the button to common website themes.

The Storefront API Alternative: When the Buy Button Isn't Enough

The Buy Button is a wrapper around Shopify's Storefront API — a simplified, pre-built interface for common use cases. When you outgrow it, the Storefront API gives you full control. As GemPages' guide to selling on external websites explains, the transition from Buy Button to Storefront API is a natural scaling path for growing businesses.

Buy Button vs. Storefront API

When to Graduate to the Storefront API

Consider switching when:

• You need product metafields displayed on external pages (materials, sizing charts, custom attributes)
• You want a fully custom cart design that matches your site pixel-for-pixel
• You need collection filtering, search, or pagination on your external site
• You want customer account features — login, order history, saved addresses
• You're embedding more than 25 products and need dynamic rendering from a product feed

The Storefront API uses GraphQL and is available on all Shopify plans. Shopify's Storefront API documentation provides the full reference, including authentication setup, available queries, and rate limits.

For merchants at this stage, the Talk Shop community is a valuable resource for finding developers who specialize in custom Storefront API integrations.

Performance Considerations and Page Speed Impact

Every external script you add to your website affects load time. The Buy Button is no exception, and understanding its performance profile helps you make informed decisions.

What the Buy Button Loads

• Buy Button SDK — ~80KB (compressed) of JavaScript that handles rendering, cart state, and Storefront API communication
• Product data — fetched via API on page load (~2-5KB per product)
• CSS for the iframe — loaded inside the iframe, isolated from your page styles
• Product images — served from Shopify's CDN with automatic optimization

Total impact for a single product embed: approximately 100-150KB of additional page weight and 1-2 API calls on initial render.

Optimization Strategies

Load the SDK asynchronously. The generated code already includes async: true, which prevents the script from blocking page rendering. Verify this is present in your embed code.

Lazy load below-the-fold embeds. If your Buy Button is lower on the page, use Intersection Observer to defer loading until the user scrolls near it:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadShopifyBuyButton(); // Your initialization function
      observer.unobserve(entry.target);
    }
  });
});

observer.observe(document.getElementById('product-component'));

Limit embeds per page. Each additional product on the same page adds ~2-5KB of API response data but shares the SDK. Five products on one page is fine. Fifty will create noticeable latency.

Use a CDN for your main site. The Buy Button's API calls go to Shopify's infrastructure. If your own site is slow, the relative impact of the Buy Button feels worse. According to WebPageTest's performance benchmarking methodology, total page weight under 1.5MB and fully interactive time under 3.5 seconds are the benchmarks to target.

Cache considerations. The Buy Button SDK is served from Shopify's CDN with proper cache headers. Returning visitors load it from browser cache. Product data, however, is fetched fresh on each page load to ensure current pricing and availability.

Limitations and Common Mistakes to Avoid

The Buy Button works within a specific set of constraints. Knowing these upfront prevents frustration and misaligned expectations.

Hard Limitations

• No customer accounts — shoppers can't log in, view order history, or save addresses through the Buy Button. Every purchase is a guest checkout.
• No discount code field — the popup cart doesn't include a discount code input. Customers can only apply codes on the Shopify checkout page.
• No Shopify app compatibility — upsell apps, loyalty programs, review widgets, and other Shopify apps don't extend to Buy Button embeds.
• Checkout is on Shopify's domain — customers leave your site for checkout (either via popup or redirect). This can't be changed on plans below Shopify Plus.
• Limited analytics — the Buy Button provides basic conversion tracking, but you lose the detailed funnel analytics available on a full Shopify storefront.
• No collection filtering — the Collection Buy Button displays products in a grid, but customers can't filter by price, tag, or product type.

Common Mistakes

Mistake #1: Embedding too many products. The Buy Button was designed for selling a few products on an existing site, not for building a full catalog experience. Once you pass 15-20 products, the management overhead and performance cost justify switching to a full Shopify store or the Storefront API.

Mistake #2: Ignoring mobile responsiveness. The Buy Button is responsive by default, but the container you place it in might not be. Always test on mobile devices. The <div> containing your Buy Button needs flexible width (width: 100%; max-width: 400px; is a good starting point).

Mistake #3: Using the Buy Button with aggressive caching. If your site uses page caching (common on WordPress with plugins like WP Rocket or W3 Total Cache), the Buy Button's JavaScript may be cached incorrectly. Exclude the Buy Button script from HTML caching, or use the async loading pattern to ensure fresh initialization.

Mistake #4: Not tracking conversions. The redirect to Shopify's checkout means your standard analytics (Google Analytics on your main site) loses the customer at the point of purchase. Set up Shopify's native analytics and cross-domain tracking to close the attribution gap.

Mistake #5: Forgetting about tax and shipping expectations. Customers see the product price on your website, but tax and shipping are calculated at checkout on Shopify. If your products have significant shipping costs, consider adding a note near the Buy Button: "Shipping calculated at checkout." This prevents cart abandonment from unexpected costs.

Frequently Asked Questions

Does the Buy Button work with Shopify's free trial?

Yes. You can create Buy Buttons during Shopify's free trial period. However, customers can't complete checkout until you choose a paid plan. The Starter plan at $5/month is the minimum required for live transactions through the Buy Button.

Can I use the Buy Button without a Shopify storefront?

Absolutely. You don't need to build or publish a Shopify online store. The Buy Button works as a standalone sales channel. Many merchants use only the Buy Button channel and the Shopify admin — no theme, no Shopify-hosted pages.

Does the Buy Button support multiple currencies?

The Buy Button displays prices in your store's default currency. For multi-currency support, you need Shopify Markets enabled on your store. The Buy Button will then auto-detect the customer's location and display prices in their local currency when Markets is configured in your Shopify admin under Settings > Markets.

Can I embed a Buy Button in an email?

No. The Buy Button requires JavaScript execution, which email clients block. For email sales, use direct links to your Shopify checkout instead. You can create direct checkout URLs using Shopify's cart permalink format: https://your-store.myshopify.com/cart/VARIANT_ID:QUANTITY.

Does the Buy Button affect my site's SEO?

The Buy Button loads asynchronously and renders inside an iframe. Search engines won't index the product content within the button — your existing page content drives SEO. This is fine if your page already targets relevant keywords. If you need product-level SEO (structured data, indexable product descriptions), use the Storefront API to render product content natively in your HTML.

Start Selling on Your Existing Website Today

Adding a Shopify Buy Button on an external website is the fastest path from "I have a website" to "I'm selling products." The setup takes minutes, costs as little as $5/month, and works on every major platform. For merchants selling a focused catalog alongside content-rich websites, it's the smart choice over rebuilding everything on Shopify.

Here's your action plan:

1. Sign up for Shopify Starter ($5/month) if you don't have an account, or use your existing Shopify store
2. Add the Buy Button sales channel from Settings > Apps and sales channels
3. Create your first Buy Button — start with your best-selling or highest-margin product
4. Embed the code on your highest-traffic page using the platform-specific steps above
5. Set up cross-domain analytics so you can track the full purchase funnel
6. Test on mobile before announcing to customers

Once you've validated sales through the Buy Button, you'll have data to decide whether to scale with more embeds, graduate to the Storefront API, or invest in a full Shopify store. That decision is easier when you have real revenue numbers.

What platform are you embedding the Buy Button on? Share your setup experience with the Talk Shop community — we're always comparing notes on what works across different website builders.

About Talk Shop

The Talk Shop team — insights from our community of Shopify developers, merchants, and experts.