Shopify’s Buy Button 101: How to Use BuyButton.js in a WordPress Theme

Front End Developer at Shopify, Haris Mahmood, walks you through how to integrate BuyButton.js into a WordPress theme, step-by-step. In this article you will learn how to do the following on a WordPress theme: Set up and initialize BuyButton.js. Add a product and customize embeds. Create a shortcode, a visual product picker, and other admin interfaces.

You can easily add ecommerce functionality to any WordPress theme you’re building, using Shopify and the new BuyButton.js library — all without additional plugins.

This is a great solution for customizing the way products appear on your client’s website, while giving you the flexibility to build custom ecommerce interfaces through shortcodes, widgets, or custom post types.

To integrate the BuyButton.js call to action button into a WordPress theme, you’ll need a basic familiarity with JavaScript and PHP. Let’s get started.

You might also like: How to Use JavaScript to Add Ecommerce to Any Website .

1. Setting Up BuyButton.js

To use the BuyButton.js library, install the free Buy Button app on your Shopify store, and create an API key. When setting up a Buy Button for your client, remember that they’ll need to be on a paid monthly plan to access this feature — Shopify Starter, the $5/month plan, is sufficient.

Now you can include the Buy Button in your WordPress theme. You can either link to the CDN, or include the BuyButton.js file directly into your theme. Either way, you’ll want to add it using wp_enqueue_script. At this point in your setup, make sure to add the BuyButton.js script as a dependent of the JavaScript file you’ll be initializing the library from (either a new file, or a/the file you keep custom JavaScript in).

For more tools, check out our list of Sublime text plugins.

2. Initialize BuyButton.js

Let's write a script to search the DOM for any nodes with the data-attribute shopify-product-id, in order to add a product embed to each. This script can go in your main JavaScript file, as long as it’s loaded after BuyButton.js

Start by initializing BuyButton.js. You’ll need a myshopify.com domain name, an API key, and an application ID to create your client and begin making requests. Check out our documentation if you’re unsure of where to find your API Key or application ID.

Next, initialize the UI library to fetch data from Shopify and build widgets:

Now that everything is initialized, query the DOM for nodes with the data attribute, and use a node’s ID to fetch the product’s info to generate and display an embed:

Add a Product

Test that your setup works by creating a <div> in a post/page with the appropriate data-attribute set to a product ID. To get the product ID of a single item, visit Products in your Shopify Admin. From here, choose the product you wish to integrate with your Buy Button — to do this, simply inspect the page URL, and the product ID will be at the end.

For example, if the URL you see is https://your-store.myshopify.com/admin/products/12345, the product ID is 12345.

To learn how to find multiple product IDs, read our documentation.

A product embed added to the WordPress twentyseventeen theme.

Customize Embeds

To customize a component, create an options object in the configuration object. Each component you wish to customize — for example, product or cart — will have its own configuration, nested within the options object.

For example, to customize the product and cart in a product component, pass through both cart and product objects:

Because there are far too many customization options to list in one blog post, you can find an overview of everything you can change in the documentation.

BuyButton.js renders components within iframes by default, this prevents unintentional style clashes and overrides. But, if you would like more control over the appearance of your embeds, you can remove the iframes, and style them with CSS.

This renders entirely un-styled embeds. To start from the styled defaults, include the BuyButton CSS file, using wp_enqueue_styles.

Create a Shortcode

Shortcodes are a convenient way for WordPress users to add custom content to a post or page, without having to write HTML; use them to your advantage by creating a shortcode to generate the required Buy Button <div>. This will allow your client to easily add a product embed, using a shortcode like [shopify_product id=”123”].

This simple shortcode can be registered by adding the following to your functions.php (or wherever you keep custom functions):

If you don’t want your client to have to remember a shortcode, you can create a media button for them to use instead.

Create a visual product picker

With a bit of JavaScript and the JS Buy SDK, a basic product picker can be added to the WordPress admin. To do this, you’ll need to include the JS Buy SDK in your admin scripts:

Next you’ll need to initialize the JS Buy SDK client (the same way as the BuyButton.js client), and use its fetchAllProducts method to pull a list of products from the shop. Then, display the products in a list, and add a click handler that sets the value of an input field to the selected product ID.

You can then use this value to set the shortcode attribute, or use it anywhere else you need a product ID.

Create other admin interfaces

To get your embed to show up on a post or page, a <div> with a data-shopify-product attribute and a product ID is all that’s required.

How you get that <div> into the HTML of a page is up to you — there are a couple of methods you can use, depending on your client’s needs:

• Add a custom metabox to posts that allows clients to enter a product ID. You can then output a <div> with this provided ID in a specific place on your post or page template.
• Create a custom post type for product or collection pages.
• Create a custom widget to allow clients to add a product or collection embed to any widgetized area in your theme.

You might also like: How to Create a Sticky Add to Cart Button On Scroll.

Endless possibilities

Regardless of what you’re looking for, Shopify’s BuyButton.js offers a stable platform to build your client’s embeddable ecommerce solution on top of.

If you’re looking for more information on the JS Buy SDK and BuyButton.js, refer to Shopify’s robust documentation.

Are you working on some neat Buy Button projects? Show us in the comments below.