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 For example, if the URL you see is To learnhow to find multiple product IDs, read our documentation. To customize a component, create an 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 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, using 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 This simple shortcode can be registered by adding the following to your If you don’t want your client to have to remember a shortcode, you cancreate a media buttonfor them to use instead. 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 its You can then use this value to set the shortcode attribute, or use it anywhere else you need a product ID. To get your embed to show up on a post or page, a How you get that 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 toShopify’s robust documentation。 Are you working on some neat Buy Button projects?Show us in the comments below. Get design inspiration, development tips, and practical takeaways delivered straight to your inbox. No charge. Unsubscribe anytime.data-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.
https://your-store.myshopify.com/admin/products/12345,产品ID12345。
Customize Embeds
optionsobject in the configuration object. Each component you wish to customize — for example,productorcart— will have its own configuration, nested within theoptionsobject.cartandproductobjects:wp_enqueue_styles。创建a Shortcode
[shopify_product id=”123”]。
functions.php(or wherever you keep custom functions):创建a visual product picker
fetchAllProductsmethod 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.创建other admin interfaces
data-shopify-productattribute and a product ID is all that’s required.
Endless possibilities
Read More
Let’s grow your digital business
Grow your business with the Shopify Partner Program
Learn more
