How to Add a Shopify Buy Button to Any Website (2026)

The Shopify Buy Button lets you add product listings, an embedded shopping cart, and a secure checkout to any website page. 

If you’re already driving traffic to a blog, portfolio, or personal site, that attention has value—but without a way to buy directly on the page, visitors have to navigate away and find your store separately. The Buy Button removes that step by putting checkout where your audience already is.

This guide covers what the Buy Button is, where to place it, and how to set it up on your website in three steps.

What is a Shopify Buy Button?

A Shopify Buy Button is an embeddable purchase button and product card that lets customers buy your products from any web page without visiting a separate online store. Shopify generates the code to display product details, images, and a checkout option on any website, creating a direct path to purchase for shoppers from wherever they discover your products.

Whether you run a blog, a portfolio site, or a page on WordPress, you can create a Shopify Buy Button for a single product or a collection of products, then paste the HTML code into your page. Visitors see the product, click the button, and complete their purchase through Shopify’s secure checkout.

The Buy Button can add ecommerce functionality to any page that generates traffic without requiring you to manage a full Shopify store. You can customize the button’s color scheme, size, font, and whether the checkout opens in a new browser window. You can also customize the layout, like showing the price directly on the button or hiding the product description. 

Tip: The Buy Button works directly with your Shopify admin, so you can manage orders, track inventory, and access customer data from one place, even if your products are displayed across multiple websites. According to a leading independent research firm, retailers using this unified commerce approach inside Shopify POS experience a 8.9% uplift in sales, on average. 

Where to use a Shopify Buy Button

• Blog posts and content pages
• Dedicated landing page
• Partner and affiliate websites
• Portfolio and personal websites
• Email campaigns, newsletters, and social media
• Pop-ups and promotional overlays

The Buy Button is designed to meet customers where they already are by bringing the shopping cart directly to them. Here are common placements and their benefits:

Blog posts and content pages

Embedding a Buy Button inside a blog post connects reading to buying. Readers can purchase in context without opening a new browser tab or searching your online store.

Benefits: The purchase option sits alongside the content that’s already building interest in the product. If you’re publishing a candle-making tutorial, for example, you could use the Buy Button to let readers buy your candle making supplies within the article itself. 

Dedicated landing pages

Landing pages built for product launches, seasonal campaigns, or ad traffic pair well with Buy Buttons. The page is already designed to drive a single action, and the Buy Button gives visitors a direct path to purchase without extra navigation.

Benefits: Fewer steps between ad click and checkout gives shoppers fewer chances to drop off. The Buy Button keeps the entire transaction on one page.

Partner and affiliate websites

If influencers, affiliates, or media partners feature your products on their own sites, the Buy Button lets them display a working checkout right on their page.

Benefits: Your products can generate sales from any partner site while all order management flows back to your Shopify admin. Partners don’t need to handle payments or fulfillment.

Portfolio and personal websites

For creators—artists, designers, podcasters, musicians—who already have a personal website displaying their work, a Buy Button adds a buy option without building a separate online store.

Benefits: It keeps the site’s existing design intact while adding ecommerce functionality. There’s no need to migrate your content or maintain a second website. 

Email campaigns, newsletters, and social media

Some email setups support embedded HTML, which means you can include Buy Buttons directly in email marketing campaigns. You can also share a link to a page with a Buy Button through a direct message or social media post.

Benefits: A purchase button in an email or message cuts out the extra step of sending readers to a store page first, shortening the path from interest to checkout.

Pop-ups and promotional overlays

Buy Buttons can be embedded in pop-up windows or promotional overlays on any web page, pairing a featured product or time-limited offer with an immediate option to purchase.

Benefits: Pop-ups capture attention at a specific moment—a page scroll, an exit intent, a timed delay—and the Buy Button lets visitors act on that attention before it fades.

Tip: Buy Buttons on pages that are already part of your Shopify online store can interfere with the native checkout process, so instead only use them on external websites and blog posts.

Get started with Buy Button: 3 steps

1. Add the Buy Button sales channel to your Shopify store
2. Create a Buy Button
3. Add the Buy Button embed code to your website HTML

Here’s how to add the Buy Button channel to your Shopify store, create your first button, and add the embed code to your website:

1. Add the Buy Button sales channel to your Shopify store

Log into your Shopify store. If the Buy Button is already listed under your sales channels in the left-side menu, you can skip ahead to step two.

On desktop

1. Go to the Buy Button app in the Shopify App Store.
2. Click “Add app” to install the Buy Button channel.
3. Pin the app to your admin navigation for quick access (optional). If you don’t pin it, you can always find it by clicking “Sales channels” and selecting “Buy Button” from your installed channels.

On mobile

1. Open the Shopify app on your mobile device, tap the menu icon at the bottom right corner, and tap “Add” under “Sales channels.”
2. Type “Buy Button” into search and tap the Buy Button channel result.
3. Tap “Install,” which will add the Buy Button to your Shopify store.

2. Create a Buy Button

Once the Buy Button channel is added, navigate to the Buy Button tab and click “Create a Buy Button.”

You’ll be asked whether you want to create a button for a single product or a collection. Select your preferred option, then choose which products you’d like to feature. If you’re creating buttons for collections, you can display an entire product line in a single embed.

After making your selection, you’ll be taken to the Buy Button editor, where you can customize the following components: layout, button style, click behavior, cart settings, and checkout options—all before generating the embed code.

How to customize your Buy Button

The Buy Button editor displays customization options on the left and a live preview on the right. You can toggle between desktop and mobile views at the top of the editor to see how your button will display on different screen sizes.

Here’s what you can adjust:

• Product variant. Select which variants of the product you want to make available through the Buy Button. 
• Layout. Choose between “Basic,” “Classic,” and “Full view.” Each layout option changes how much product information is shown alongside the button.
• Add product to cart. Creates a shopping cart widget on the side of the page. Visitors can continue browsing and add more items before checking out.
• Direct to checkout. Creates a Buy Now button that takes the customer straight to checkout. With this option, customers can only purchase one item at a time.
• Open product details. Creates a View Product button that opens a pop-up window with full product details, variants, images, and an Add to Cart button.
• Button style. Customize the shape, font, and color of your Buy Button to match your brand.
• Layout settings. Fine-tune button alignment, text, and size settings for greater control over how the button displays on your page.
• Shopping cart. Adjust the settings for the cart widget, including copy and colors. You can also add an “Order note” field to collect special instructions from customers. (Cart editing is available only if you’ve chosen “Add product to cart” or “Open product details.”)
• Detailed pop-up. If you chose “Open product details” as your click action, you can customize the text, colors, and typography of the product details pop-up window.

Changing these settings will apply only to new Buy Buttons you create going forward. Buy Buttons that have already been embedded on your website will not update automatically—you’ll need to generate new code and replace the old embed.

When you’re happy with your design, click “Next” in the top-right corner to generate the embed code.

3. Add the Buy Button embed code to your website HTML

After clicking “Next,” Shopify will automatically generate the embed code for your Buy Button. Click “Copy code”to copy it to your clipboard.

Paste this code into the HTML of any web page. Once added, the code will create a Buy Button and, depending on your settings, an embedded shopping cart that connects directly to your Shopify admin. You manage and process all orders from your Shopify store, no matter where the button appears.

Note: The exact process for adding the embed code varies depending on your website builder and theme. Some platforms have a dedicated HTML block or code widget, while others require you to edit the page’s source code directly.

Adding Buy Button script tags

Some website builders require you to paste script tags separately in your site’s header, while placing the remaining code in the body of your page where you want the Buy Button to appear.

To do this:

1. Copy both the <div> and the <script> elements.
2. Open the page header for the website you want to include the Buy Button.
3. Paste the <script> code into the page header.
4. Separate the script element and paste it into the <div> code on the page you want to include the button. It looks something like this:
5. Save your changes and preview the page to confirm the Buy Button is displaying correctly.

Tip: For platform-specific instructions on adding the Buy Button code to WordPress, Squarespace, or Wix, check the Shopify Help Center guide on adding Buy Button embed code.

Add ecommerce to any website with Buy Button

If your website or blog already attracts visitors, the Buy Button creates a direct path to purchase on the page they’ve already landed on. There’s no separate store to build and no redirect to manage—customers see the product, click the button, and check out.

Bloggers, creators, and businesses can embed a product card and checkout on any site and manage all Buy Button orders from one Shopify admin without the need for additional tools.

Mandalyn Renicker, owner of Offbeat Bikes, notes that before moving to Shopify, she was paying for at least 10 third-party apps for things like integrated buy buttons and inventory management. 

“All these things that were a headache to manage just kind of disappeared with the move to Shopify,” Mandalyn says. “The Shopify interface is just easier to use too. Customers recognize it, especially at checkout where when they see that Shop Pay icon, they know checking out will be a breeze.”

Add the Buy Button sales channel to your Shopify store to get started, or explore Shopify plans if you don’t have an account yet.