If you’re familiar with Shopify Themes and the traditional workflow of building (and customizing) a Shopify store, you’ll know there’s a strong focus on both Liquid and Ruby developing languages — perfect for working with Shopify, on the Shopify platform.
However, a lot of web designers and developers also do projects for other major frameworks, like WordPress, Drupal, or client-hosted websites. And, common to these frameworks, is one of the most frequently used developing languages on the web: JavaScript.
All of this begs the question: how do you combine ecommerce with a developing language that has such a large community following?
Recently, we sat down with Tessa Thornton — front end developer from Shopify’s Buy Button Team— for aShopify Partner Session webinar, where we discussed how to useBuyButton.jsandJS Buy SDKto create ecommerce experiences on any platform.
We’ve written about Shopify’s two Buy Button libraries before, but this article will dig a little deeper into the technical nuances of both, and give you a better understanding of how to use Shopify’s Buy Button functionality in your current, or upcoming, client project.
Why Buy Button?
想Shopify添加到一个客户的网站,but couldn’t because they weren’t on Shopify’s Online Store channel (a store hosted on Shopify servers)? This is the pain point we aimed to solve when we created the Buy Button.
You can use the Buy Button Channel to benefit your clients in the following ways:
- Turn non-ecommerce pages into product pages
- Prototype and validate design ideas
- Add purchasing functionality to client apps
- Integrate products into existing landing pages
- Monetize your client’s blog
You might also like:Four Smart Reasons to Embed a Shopify Store in Your Client Websites
The Buy Button channel
First things first. Regardless of how you wish to approach Buy Button in your web design and development process, you’ll need toinstall the Buy Button channelon whichever client store you’re working on. This will allow you to generate the authentication token needed to initialize thebuildClient, which in turn, gives you access to your client’s product data.
It’s important to note that, though you don’t need the Online Store channel to use Buy Button, your client does need to be on a paid Shopify plan — the basic $5/month (Shopify Starter plan) will do just fine.
With Shopify Starter, your client will get access to everything they need to implement a simple ecommerce solution on their website, including unlimited products, order tracking, and access to various payment gateways — so don’t worry about losing functionality in lieu of the smaller price tag.
JS Buy SDK
So, what exactly is the JS Buy SDK?
For starters, it’s an API client that allows freelancers and agencies to add Shopify ecommerce functionality to non-Shopify hosted stores, like Wix, SquareSpace, Drupal, WordPress, self-hosted websites, and websites hosted on cloud-based solutions.
TL;DR you can add ecommerce functionality to any platform that supports JavaScript.
The JS Buy SDK is built on top of Shopify’s API and uses the Fetch API to make HTTP requests. It’s purpose is to give you access to product listing data outside of the online store environment (typically associated with the Online Store channel, or a Shopify storefront), allows you to manage your client's cart experience, and makes consuming a REST API with JavaScript a breeze.
Say you wanted to write a JavaScript app or script to consume Shopify’s API, there are a couple of things to consider: you’ll need to write some boilerplate code, worry about authentication, and make AJAX requests across platforms. The JS Buy SDK takes care of these nitty gritty details for you, so you can focus on building customized ecommerce solutions for your clients.
You can learn more about JS Buy SDK, and how to get it up and running on your client’s website, with thishelpful documentationcreated by the Shopify Buy Button Team.
Knowledge of JavaScript required to use JS Buy SDK:Intermediate to Advanced.
Features of JS Buy SDK
There are many features of the JS Buy SDK that make it an attractive option for web designers and developers.
- It’s created on a promise-based interface. This ensures that all operations are completed before moving on to the next step. For example, with a promise-based interface, someone is unable to purchase a product before the product has finished loading.
- It has polyfills. This gives the JS Buy SDK browser support back to IE 9.
- It features models with dynamic properties. No longer will you need to actively remember the changes you’ve made to certain data points. Dynamic properties means that if you update the
selectedVariantof a product model, the next time you go to access theselectedVariantproperty, it will already be set to the new one.
- It has a tiny footprint.No, really. It’s under 30kb minified.
What can you build with JS Buy SDK?
The world is your oyster
If we’re being completely honestly, you can build whatever your heart desires (as long as you have the skillset to implement it, of course). This includes any kind of interface, as long as it includes product, variant, and cart concepts.
Create your own libraries
Is your client looking for a very specific ecommerce customization for their website? Luckily, you can use the JS Buy SDK as a foundation to build your own JS and JQuery libraries. This is extremely helpful if, for example, you want to create a library that allows for detailed product galleries on your existing (or upcoming) client project.
Integrate with other frameworks
JS买SDK提供了各种JavaScript框架integrations. You can create product or cart components for React, Ember, and Angular. We encourage you to experiment as much as you can with JS Buy SDK — it plays nicely with others!
Example of JS Buy SDK in action
看下面的视频编码的例子to initialize, and customize, the JS Buy SDK on your client’s website.
If you’d like to follow along, here’s the CodePen base you’ll need to get started:
See the PenJS Buy SDK Baseby tessa-lt (@tessa-lt) onCodePen.
BuyButton.js
Before we get into what BuyButton.js is, it’s important to understand why it was created in the first place.
Following the release of JS Buy SDK, Shopify developers started to see commonalities in partner, web designer, and developer work in the wild. From these observations, patterns were established between what people were already building with the JS Buy SDK, and what they ultimately wanted to build with it.
Shopify Developers then noticed that a lot of developers were writing repetitive code, and more generalist developers didn’t really know where to start with the JS Buy SDK. If you’re not familiar with more advanced JavaScript coding, that’s understandable — it may be difficult to envision how to create an actual interface from the objects in your console.
And so BuyButton.js was born.
Built on top of the JS Buy SDK, BuyButton.js is an out-of-the-box UI/component library that allows web designers and developers to create interactive ecommerce components, using only a few lines of code.
BuyButton.js can be used for:
- Product embeds
- Collection embeds
- Carts
- Product details modal
All BuyButton.js embeds are sandboxed in iFrames — so they won’t inherit the CSS from your client’s webpage, and will always look the same, regardless of which page you place them on. However, if you want complete control over the CSS of your elements, you can opt out of this sandboxing by passing iFrames false, then starting with the default BuyButton.css, or starting from scratch.
You can find more details and implementation walkthroughs for BuyButton.js in thishelpful documentation, maintained by the Shopify Buy Button team.
Knowledge of JavaScript required to use BuyButton.js:Beginner to Advanced, depending on the complexity of your customization.
Example of BuyButton.js in action
看下面的视频编码的例子to initialize, and customize, BuyButton.js on your client’s website.
If you’d like to follow along, here’s the CodePen base you’ll need to get started:
See the Penbuybutton.js baseby tessa-lt (@tessa-lt) onCodePen.
Customization API
BuyButton.js also gives you access to a flexibleCustomization API— a powerful design resource that isn't too difficult to learn. Essentially, each component is customized by its contents, which all have unique keywords. For example, the product component has a “price” element. To customize this element, you would use the keyword “price.”
In BuyButton.js logic, everything is customized with big custom objects, very similar to how you would configure a JQuery plugin. For each element that gets created by the Buy Button UI library, you can customize the following:
- The contents of each element
- The order in which the elements appear in
- Styles and text
- The templates that change the HTML components (Mustache templates)
Example of advanced BuyButton.js customization
看下面的视频编码的例子to customize BuyButton.js.
If you’d like to follow along, here’s a CodePen example you can work with:
See the Penbuybutton.js demo 2 finishedby tessa-lt (@tessa-lt) onCodePen.
Want to watch more videos from Shopify Partners?
Subscribe to our YouTube for more tutorials on developing with Shopify.
Get the code
Interested in trying JS Buy SDK and BuyButton.js for yourself?
The JS Buy SDK is available in a variety of formats, including global, commonjs, and amd, with and without polyfills. BuyButton.js, however, is polyfilled by default, and is available as global and commonjs modules.
Shopify has also made it easy for web designers and developers to nab the code from a variety of sources:
CDN
- JS Buy SDK:http://shopify.github.io/js-buy-sdk/
- BuyButton.js:http://shopify.github.io/buy-button-js/
NPM
- npm install shopify-buy
- npm install @shopify/buy-button-js
Github
Note, if you’re grabbing the code from GitHub, Shopify’s Buy Button team always welcomes issues and PRs on both JS Buy SDK and BuyButton.js repositories:
Are you working on some neat Buy Button projects? Show us in the comments below.
You might also like:2 Real-Time Features That Every Developer Should Include in Their Ecommerce Sites