Shopify Buy Button lets you place Shopify products or collections on an existing website using generated HTML and JavaScript. Shopify continues to manage your catalog, inventory, cart, checkout, payments, orders and sales reporting, while your current site provides the surrounding content and design.
It works on WordPress, Squarespace, Wix and custom HTML only when the platform permits the required embed code or provides a compatible HTML widget. It is not a full replacement for Shopify’s Online Store, and “free Buy Button” refers to the channel—not to Shopify subscriptions or payment processing.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
How to Convert Online: The #1 Guide to Split-Testing, Email Marketing, Sales Pages and Lead Magnets | $0.99 | Buy on Amazon |
What Shopify Buy Button is
Buy Button is Shopify’s embeddable storefront component. In Shopify Admin, you select a product, variants or a collection and generate a code snippet. The snippet displays product information and purchase controls on another webpage, then connects shoppers to Shopify’s cart and checkout. Product, order and sales data remain in Shopify. See Shopify’s current documentation at Shopify Buy Button.
A button can show imagery, title, description, price, variant choices and quantity controls. You can use it in blog posts, landing pages, portfolio sites, email-linked pages and other content. For a link-only campaign, Shopify also supports cart permalinks.
#1 Best Overall
It is not a native cart for every website, nor does it automatically adopt every part of the host site’s theme. Checkout remains Shopify-hosted infrastructure, even if the product appears inside your own page.
Who should use it?
Good fits
- A blog or publisher selling a small product range.
- A creator selling merchandise, books, courses or physical goods.
- A portfolio or service site that needs occasional payments.
- A business that wants Shopify inventory, checkout and order management without rebuilding its website.
- A focused landing page where one product and a direct purchase action are sufficient.
When another approach is better
- A large catalog that needs sitewide search, filters, collections and merchandising.
- Complex memberships, subscriptions, bookings or product configuration.
- A genuinely shared native cart across several independently embedded sites.
- A platform that strips scripts or does not offer a usable HTML/Code block.
- A store that needs every storefront element controlled by one Shopify theme.
Shopify warns that Buy Buttons inside a Shopify Online Store or Shopify blog can create checkout problems; use cart permalinks there instead.
How much does Shopify Buy Button cost?
The Buy Button channel is listed as free in the Shopify App Store (apps.shopify.com/buy-button), but it is not a standalone free commerce service. You need a Shopify subscription, a supported payment gateway and normal operating services such as shipping, taxes and any apps you choose.
Payment processing and possible third-party transaction fees depend on your Shopify plan, payment provider and country. Shopify Payments and available payment methods also vary by region. Shopify says its plans have no setup fee, but there is no reliable universal total: billing term, geography, promotions and plan changes affect the amount. Check the official Shopify pricing page for your country before committing.
What you need before starting
- An active Shopify store and subscription plan.
- A product with price, images, variants and inventory configured.
- Shipping rates, tax settings and store policies appropriate to your market.
- The product or collection made available to the Buy Button sales channel.
- A supported payment gateway for your country or region.
- A destination site that accepts custom HTML and JavaScript, or supplies an equivalent code widget.
How to add the Buy Button channel
- In Shopify Admin, open Settings → Sales channels.
- Click Shopify App Store, search for Buy Button, select Shopify’s channel and click Install.
In the Shopify mobile app, use Menu → Sales channels → Buy Button → Add app. The documented setup path is Shopify’s Buy Button setup guide.
How to create a product or collection button
Product Buy Button
- Open Sales channels → Buy Button in Shopify Admin.
- Click Create a Buy Button, then choose Product Buy Button.
- Select the product and either all variants or one specific variant.
- Choose a layout and click behavior.
- Adjust appearance, cart and checkout settings.
- Click Next → Copy code.
- Paste both the generated display element and script into your website’s HTML editor, then save and publish.
Collection Buy Button
- Create and configure the collection in Shopify.
- Make its products available to the Buy Button channel.
- Go to Sales channels → Buy Button → Create a Buy Button → Collection Buy Button.
- Select the collection, configure its appearance and action, then choose Next → Copy code.
- Paste the code into the destination page.
A collection embed presents a button or product presentation for each item, making it more practical than maintaining many separate product snippets.
Choose the right layout and click action
| Option | What the customer sees or does | Best use |
|---|---|---|
| Basic | A button without a product image. | When your page already supplies the product presentation. |
| Classic | Product image and price beside the button. | Compact blog and editorial previews. |
| Full view | Image, price and description in a larger product presentation. | A mini product page within existing content. |
| Add product to cart | Adds the item to an embedded cart so the shopper can continue. | Pages where customers may buy several products. |
| Direct to checkout | Sends the shopper directly to Shopify Checkout. | Single-product campaigns and focused landing pages. |
| Open product details | Opens product information, images, variants and add-to-cart controls. | When a compact preview should expand before purchase. |
Open product details is unavailable with Full view because Full view already displays the details. If several buttons share a page, configure them with the same action to avoid inconsistent cart behavior.
Embed Buy Button on your website
WordPress
- Edit the post or page and click +.
- Add a Custom HTML block.
- Paste the complete Shopify code, preview, then save or publish.
Self-hosted WordPress.org is documented as compatible; WordPress.com depends on the plan. With the Classic Editor plugin, paste code in Text mode, not Visual mode.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSquarespace
- Edit the page and insert a Code block.
- Set it to receive HTML and paste the code.
- Apply, save and test the published page.
JavaScript is disabled in the Squarespace dashboard, so use a separate preview. If the button does not load, Shopify says Ajax loading may need to be disabled. Theme-specific advanced styling is outside Shopify support.
Wix
- Open the Wix Website Editor and choose + → More.
- Add an HTML Code widget and select Enter Code.
- Paste the code, click Update, resize the widget, save and test the published site.
Wix cannot use Shopify’s Redirect in the same tab option. Separately embedded buttons can also create separate carts unless the code is configured appropriately; a collection embed is often simpler for a multi-product page.
Custom HTML and other builders
Paste the generated <div> and <script> into the page HTML. If the platform requires scripts in a header area, place the script there and the display element where the product should appear. Shopify’s current embed script loads the Buy Button SDK from https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js. Always test the published page, not only the editor preview.
For platform-specific instructions, see Shopify’s embed-code guide.
Customize the button and maintain it
The generator can change colors, fonts, button text, size, image alignment, layout, cart text and colors, order-note settings, additional information text, quantity controls where supported, and whether checkout opens in a new window or the same tab.
Checkout opens in a new window by default. For product or collection buttons, Advanced settings can switch to Redirect in the same tab where the platform supports it; Wix does not.
Product information changes made in Shopify flow through to the embedded button. Appearance changes do not: generate a new button and replace the old snippet when you change styling or configuration.
Pre-launch testing checklist
- Test desktop and mobile layouts on the published page.
- Check every variant, price, currency, image, title and inventory state.
- Test quantity changes and both Add to Cart and Direct to Checkout flows when used.
- Confirm the intended new-window or same-tab checkout behavior.
- Complete a test order using Shopify’s available test-payment configuration.
- Verify shipping rates and tax behavior.
- Test a sold-out or unavailable variant.
- Test with cookie-consent tools, ad blockers and other third-party scripts enabled.
- Test more than one product and confirm whether items share one cart.
Troubleshooting common failures
The button is blank or missing
Rich-text editors often strip scripts. Confirm that both the display element and script remain, use the platform’s HTML/Code widget, publish the page and inspect the browser console for content-security-policy blocks. A site builder that disables JavaScript may require its support team; Shopify directs platform-specific editor issues to the platform provider.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A product or variant is missing
Confirm the product exists and is active, is available to the Buy Button channel, and that the generated snippet includes the intended variant or all variants. Recheck inventory and channel availability after product edits.
The cart is empty or products do not combine
Buy Buttons can create separate carts in Shopify blog contexts, and multiple unedited Wix embeds can create separate carts. Prefer a collection embed for a multi-product page or configure a shared-cart arrangement where the platform permits it, then test the exact live page.
Checkout will not open
Check that a supported gateway is active for your country, shipping zones and rates are configured, the item is available, and the platform has not altered the script. Also test pop-up blockers and browser privacy settings.
Styling edits do not appear
Replace the old embed with code from a newly generated button. This is different from product data, which can update from Shopify without changing the page code.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Squarespace or Wix-specific behavior
On Squarespace, disable Ajax loading if the button fails to initialize. On Wix, same-tab checkout is unavailable and separately embedded buttons may not share a cart.
Buy Button limitations and alternatives
Use Shopify’s full Online Store
Choose the Online Store when ecommerce navigation, search, collections, filters, customer accounts and a unified native cart are central to the business. Shopify documents the Online Store at help.shopify.com/en/manual/online-store; it requires Basic or higher.
Use cart permalinks
Use a cart permalink for a single-product link shared by email, direct message or social post, or when embedding inside a Shopify Online Store or blog could cause checkout conflicts.
Build a custom storefront
A custom storefront is appropriate when developers need application-level control over frontend behavior, merchandising, cart, checkout or customer accounts. It offers more flexibility than a widget but requires substantially more development.
Recommended Free Tools
Use a native platform store
WooCommerce (woocommerce.com) suits WordPress owners who want a native WordPress store and plugin control, with greater hosting and maintenance responsibility. Ecwid (ecwid.com) is another hosted add-on option. PayPal merchant tools (paypal.com/business) fit simple payment buttons or links rather than a complete Shopify-style catalog and order system.
Bottom line: is Shopify Buy Button right for you?
Use Buy Button when your existing website is valuable, your catalog is modest or focused, and you want Shopify to handle inventory, checkout, payments and orders without migrating the whole site. Choose the full Online Store for a store-first business, cart permalinks for simple campaign links, and a custom storefront for complex application requirements. The deciding test is practical: can your website safely accept Shopify’s HTML and JavaScript, and does the resulting cart behavior match how your customers need to shop?
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
