How to Add a Shopify Buy Button to Your Website

Inside Shopify admin, add the Buy Button sales channel, then go to Sales channels > Buy Button > Create a Buy Button, pick a product or collection, style it and click Copy code. Paste the code into an HTML or code block on your other site. Orders, stock and payouts stay in Shopify.

What the Buy Button can embed
Type	Shows	Checkout opens
Product Buy Button	One product with image, price, variants	Cart drawer, new tab or same tab (your choice)
Collection Buy Button	A grid of products from one collection	Cart drawer, new tab or same tab

Updated October 28, 2026

The Buy Button lets a site that is not a Shopify store sell Shopify products. A blog, a band page or a portfolio can show a product card with a working cart, while Shopify runs inventory, taxes and checkout. It suits a few products alongside other content; for a full catalogue a dedicated store is easier.

Add a Shopify Buy Button on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

In Shopify, create the Buy Button and keep the generated details to hand.
In the We.Inc builder, go to ... > Add-ons and open Shopify Buy Button.
Fill in the fields it asks for, turn it on and wait for the saved message.
Tell the AI chat which page should show it, such as 'add my Shopify product to the Shop section'.
Publish and run a test order.

WordPress

Copy the Buy Button code from Shopify.
Edit the page and insert a Custom HTML block.
Paste the code and Update.
View the live page and add an item to the cart.

On WordPress.com the Buy Button's script only survives on a paid plan with plugins and hosting features activated.

Wix

In the Editor, go to Add Elements > Embed Code > Embed HTML.
Click Enter Code and paste the Buy Button code.
Click Apply and resize the box so the cart drawer has room.

Wix places HTML embeds in a sandboxed iframe, so the cart opens inside that frame. Set checkout to open in a new tab for a cleaner experience.

Squarespace

Open the page editor and insert a Code block.
Paste the Buy Button code and save.
Check the live site, as code blocks do not run in the editor.

Requires the Core, Plus or Advanced plan for JavaScript in code blocks.

Plain HTML

Paste the code where the product card should appear.
Keep the div and the script together; the script looks for that div's ID.
Upload and test a checkout.

Sources

Checked October 28, 2026: the Buy Button pages we read.

Shopify Help Center, creating a Buy Button: https://help.shopify.com/en/manual/online-sales-channels/buy-button/create-buy-button
Wix Embed HTML and its sandboxed iframe: https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget
WordPress.com script tag rules by plan: https://wordpress.com/support/code/

Buy Button or a full store?

If you sell under a dozen items and your site is mainly content, the Buy Button keeps everything on one site. Once you need filtering, search across products or many collections, a full Shopify store or a store app on your site makes more sense.

Our guide to accepting payments on a website compares this with Stripe and PayPal options for single products.

How it works

Add the Buy Button sales channel in Shopify admin.
Create a Product or Collection Buy Button.
Choose layout, colours, button text and what happens on click.
Copy the generated code.
Paste it into your website and test a purchase.

Tips

Shopify's help pages warn that purchases through the button carry third-party transaction fees unless Shopify Payments is active, so check that before launch.
Under Advanced settings you can make checkout open in the same tab, which tends to feel smoother on phones than a new tab.
One collection button is easier to maintain than ten product buttons: add a product to the collection in Shopify and it appears on your site.
The card loads by script after the page, so leave room for it in your layout to avoid content jumping.

Frequently asked questions

Do I need a Shopify plan for the Buy Button?

Yes, you need an active Shopify store with the Buy Button channel. Check Shopify's current pricing page for which plans include it.

Will Buy Button sales show in my normal Shopify orders?

Yes. They are regular Shopify orders, tagged with the Buy Button channel, and use the same inventory and fulfilment.

Can I change the button after pasting it?

Styling changes generally mean editing the button in Shopify and copying fresh code. Product details such as price and images update from Shopify automatically.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.