Integrating the Shopify “Buy Button”

This article explains how to use Shopify’s Buy Button to embed products on an external site (e.g., WordPress).

Shopify Initial Setup

Sign up for Shopify and complete the initial setup.

  1. Sign up: https://www.shopify.com/
  2. Complete the initial setup. For more details, refer to Shopify’s
    official guide, “Getting Set Up to Start Selling”: Getting set
    up to start selling

Enable Test Mode

Enabling test mode allows you to verify how the Buy Button
works without actually processing a payment.

  1. Go to [Settings]
  2. Click [Payment Providers]
  3. Scroll to the bottom of the page
  4. [Check “Enable test mode” and click the [Save] button]
  5. Verify that “Test Mode” is turned on

Create a Buy Button

  1. Return to the admin panel and click [Create Buy Button]
  2. Select [Product Buy Button] or [Collection Buy Button]
  3. Verify the relevant product and click the [Select] button
  4. Click the [Next] button
  5. Click the [Copy Code]
    button to copy the generated code
  6. … Copying complete
  7. Click [Finish]

Add a Buy
Button to a WordPress Page

Here, as an example, we’ll explain the steps to add a Buy Button
to a WordPress page.


  1. Launch WordPress from the Shifter dashboard and log in to the WordPress
    dashboard: https://go.getshifter.io/



  2. Add a new page or post



  3. Add a “Custom HTML” block



  4. Paste the copied Buy Button JavaScript code



    <!-- Paste the Buy Button code here -->



  5. Publish



  6. Return to the Shifter dashboard and generate an artifact


Verify that the Buy Button
is working

  1. Go to the Buy Button page (e.g., https://example.com/shopify-buybutton/).
  2. Click the product’s [Add to Cart] button
  3. The product is added to the cart
  4. Complete checkout; the transaction is successful

Disable test mode

Once you’ve verified that everything works, disable test mode so you can accept actual payments.

  1. Return to the Shopify admin
  2. Click [Settings]
  3. Click [Payment Providers]
  4. Click “Turn off test mode”
  5. Disable “Test Mode” and publish your store
  6. Verify that “Test Mode” is turned off

That’s it!