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.
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 Lite, the $9/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
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
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
To learn how to find multiple product IDs, read our documentation.
To customize a component, create an
options object in the configuration object. Each component you wish to customize — for example,
cart — will have its own configuration, nested within the
For example, to customize the product and cart in a product component, pass through both
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
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
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
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.
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.