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

  • 4 minute read
Shopify buy button in wordpress theme

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.jscall to action buttoninto a WordPress theme, you’ll need a basic familiarity withJavaScriptandPHP。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 freeBuy Button appon your Shopify store, andcreate 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 usingwp_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 ofSublime text plugins。

2. Initialize BuyButton.js

Let's write a script to search the DOM for any nodes with the data-attributeshopify-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 amyshopify.comdomain name, an API key, and an application ID to create your client and begin making requests. Check outour documentationif 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

in a post/page with the appropriatedata-attributeset to a product ID. To get the product ID of a single item, visitProductsin 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 ishttps://your-store.myshopify.com/admin/products/12345,产品ID12345。

To learnhow to find multiple product IDs, read our documentation.

Shopify buy button in wordpress theme: Product embed
A product embed added to the WordPress twentyseventeen theme.

Customize Embeds

To customize a component, create anoptionsobject in the configuration object. Each component you wish to customize — for example,productorcart— will have its own configuration, nested within theoptionsobject.

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

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 thedocumentation。

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, usingwp_enqueue_styles。

创建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

。这将允许你的客户可以很容易地添加一个刺激uct embed, using a shortcode like[shopify_product id=”123”]。

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

If you don’t want your client to have to remember a shortcode, you cancreate a media buttonfor them to use instead.

创建a visual product picker

With a bit of JavaScript and theJS 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 itsfetchAllProductsmethod 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.

创建other admin interfaces

To get your embed to show up on a post or page, a

with adata-shopify-productattribute and a product ID is all that’s required.

How you get that

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 acustom metaboxto posts that allows clients to enter a product ID. You can then output a
    with this provided ID in a specific place on your post or page template.
  • 创建acustom post typefor product or collection pages.
  • 创建acustom widgetto 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 toShopify’s robust documentation。

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

Read More

Topics:
Shopify Theme Development Shopify Tutorials

Grow your business with the Shopify Partner Program

Learn more