You have a WordPress blog with 10,000 monthly readers, a Squarespace portfolio site, or a landing page you built for a product launch. You want visitors to buy your products right there — without sending them to a separate Shopify store. The Shopify Buy Button does exactly that. It embeds a product card with a working checkout directly on any website that accepts a JavaScript snippet.
Most merchants don't realize this channel exists. They assume selling on Shopify means sending all traffic to their .myshopify.com store. Meanwhile, every blog post, every landing page, and every external site they run is a missed checkout opportunity. Setting up the Buy Button takes about 15 minutes and costs nothing beyond your existing Shopify plan.
What Is the Shopify Buy Button?
The Shopify Buy Button is a free sales channel that generates a JavaScript embed code you paste onto any external webpage. It renders a product card — image, title, price, variant selector, and an "Add to Cart" button — directly on the page. When a customer clicks the button, they check out through Shopify's secure checkout without leaving your site. It's not an app or third-party plugin — it's a built-in Shopify feature.
You can embed a single product, a full collection, or just a standalone cart. The embed works on WordPress, Squarespace, Webflow, Wix, Ghost, custom HTML pages, and virtually any platform that lets you paste code into a page.
The Buy Button is included on every Shopify plan — including the $5/month Starter plan. If all you want is to sell products on an existing website without building a full storefront, Starter plus the Buy Button is the cheapest way to get Shopify checkout on any page.
Step 1: Install the Buy Button Sales Channel
Open your Shopify admin. Go to Settings > Apps and sales channels, then click Shopify App Store. Search for "Buy Button channel" and install it. Once installed, it appears in your left sidebar under Sales Channels.
If you've used Shopify for a while, you might have the Buy Button channel already installed but never opened it. Check your sales channels list before searching the App Store.
Step 2: Create Your First Buy Button
Click into the Buy Button channel and select Create a Buy Button. Shopify asks you to choose between two options:
- Product Buy Button — embeds a single product with image, price, variants, and an add-to-cart button
- Collection Buy Button — embeds an entire collection as a browsable product grid
Pick the one that matches your use case. For a blog post recommending a specific product, use a product button. For a landing page showcasing a full product line, use a collection embed.
Select the product or collection you want to feature, then click Next to enter the customization editor.
Step 3: Customize the Look and Behavior
This is where most merchants rush through and end up with a generic-looking embed. Spend a few minutes here — it makes a real difference in how the button fits your site's design.
The editor gives you control over several areas:
- Layout — choose between a full product card (image + details + button) or a minimal button-only embed. The full card works best when visitors aren't already familiar with the product. The button-only style works when you've already described the product in your page content.
- Button style — change colors, font, corner radius, and button text. Match your external site's design so the embed doesn't look out of place.
- Cart behavior — decide what happens when a customer clicks "Add to Cart." Options include opening a cart popup on the same page, redirecting straight to checkout, or opening checkout in a new tab.
- Product details — toggle the product image, price, title, and variant selector on or off. If you're embedding a button mid-article, you might want to hide the image and title since the article already introduces the product.
For most use cases, the popup cart option works best. It keeps visitors on your page while letting them review their cart before checkout — no page redirect, no context switch. If you're also optimizing your main Shopify checkout, see our guide on Shopify checkout customization.
Step 4: Copy the Embed Code and Paste It
Click Next after customizing, and Shopify generates a JavaScript snippet. Copy the entire block — it includes both a <script> tag and a <div> placeholder.
Where you paste it depends on your platform:
- WordPress — edit the page or post, add a Custom HTML block, and paste the code. If you're using the classic editor, switch to the "Text" tab first.
- Squarespace — add a Code Block to your page and paste the snippet. Make sure "Display Source" is unchecked.
- Webflow — add an Embed element inside your page structure and paste the code.
- Wix — use the HTML iframe widget (Wix calls it "Embed a Site") and paste the snippet.
- Static HTML — paste the code directly into your HTML file wherever you want the button to appear.
Save and preview the page. The product card should render within a few seconds. If it doesn't show up, check that your platform isn't stripping out JavaScript from embed blocks — some page builders do this by default.
Step 5: Test the Full Purchase Flow
Don't skip this. Open your external page in an incognito browser window and complete a test purchase. Check these things:
- The product card loads correctly with the right image, price, and variants
- Clicking "Add to Cart" opens the cart popup (or redirects, depending on your settings)
- The checkout process completes without errors
- The order appears in your Shopify admin under Orders
- The experience works on mobile — resize your browser or test on your phone
If you're using Shopify Payments in test mode, you can run through checkout without processing a real charge. Otherwise, place a real order and refund it immediately.
When the Buy Button Makes Sense (And When It Doesn't)
The Buy Button works best in specific scenarios:
- Content-driven sales — you write blog posts or tutorials on WordPress or Ghost and want readers to buy without leaving the article
- Portfolio or service sites — you run a Squarespace or Webflow site and want to sell physical products alongside your main content
- Landing pages — you're running paid traffic to a standalone page and want a direct checkout path
- Multi-site selling — you manage multiple websites and want Shopify as your centralized backend for inventory and orders
The Buy Button has real limitations, though. It doesn't support discount codes at the product level (only at checkout). It doesn't handle complex product customization — if customers need to fill out custom fields, choose multiple options, or configure a product before buying, the standard Buy Button won't cover that. And it doesn't support cash on delivery workflows, which matters if you sell in COD-heavy markets.
For merchants who need custom fields, quantity discounts, or COD payment options on external pages, EasySell's order form can be embedded similarly and handles those use cases natively — including partial payments, upsells, and phone verification.
3 Common Mistakes That Break the Embed
Pasting the code in the wrong editor mode. WordPress and similar platforms have visual editors and code editors. If you paste JavaScript into the visual editor, it'll display as text instead of rendering. Always switch to the HTML or code view first.
Embedding multiple Buy Buttons with separate script tags. If you're placing several product buttons on one page, you only need the <script> tag once. Duplicate script tags can cause rendering conflicts. Paste the script once at the top, then add only the <div> placeholders for each additional product.
Ignoring mobile layout. The default Buy Button embed is responsive, but it doesn't always play well with your site's mobile CSS. Check the embed on a phone screen. If the product image is too wide or the button text is clipped, adjust the layout settings in the Buy Button editor — switching to a compact layout often fixes mobile issues.
Tracking Sales From Your Buy Button
Every order placed through the Buy Button shows up in your Shopify admin with the sales channel tagged as "Buy Button." You can filter your orders by this channel to see exactly how much revenue your external pages generate.
For more detailed tracking, add UTM parameters to the pages where you embed the button. This won't affect the Buy Button itself, but it helps you trace which blog posts or landing pages drive the most checkout clicks when you review your analytics.
If you're running Facebook or Google ads to your external pages, make sure your Shopify pixels are configured to track Buy Button conversions. The checkout happens on Shopify's domain, so your standard page-level pixels on the external site won't capture the full funnel. For the fastest checkout experience on those pages, pair the Buy Button with Shop Pay express checkout.
The Shopify Buy Button turns every page you control into a potential storefront — and the setup takes one afternoon. Pick your highest-traffic external page, embed a product that's relevant to that audience, and check your Buy Button sales channel report in a week. The numbers will tell you whether to expand to more pages or adjust your approach.