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.
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 a Shopify Partner Session webinar, where we discussed how to use BuyButton.js and JS Buy SDK to 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?
Ever wanted to add Shopify to a client’s website, 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 to install the Buy Button channel on whichever client store you’re working on. This will allow you to generate the authentication token needed to initialize the
buildClient, 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.
You can learn more about JS Buy SDK, and how to get it up and running on your client’s website, with this helpful documentation created by the Shopify Buy Button Team.
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 the
selectedVariantproperty, 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
Example of JS Buy SDK in action
Watch the video below for a coding example of how 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 Pen JS Buy SDK Base by tessa-lt (@tessa-lt) on CodePen.
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.
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
- 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 this helpful documentation, maintained by the Shopify Buy Button team.
Example of BuyButton.js in action
Watch the video below for a coding example of how 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 Pen buybutton.js base by tessa-lt (@tessa-lt) on CodePen.
BuyButton.js also gives you access to a flexible Customization 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
Watch the video below for a coding example of how to customize BuyButton.js.
If you’d like to follow along, here’s a CodePen example you can work with:
See the Pen buybutton.js demo 2 finished by tessa-lt (@tessa-lt) on CodePen.
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:
- JS Buy SDK:http://shopify.github.io/js-buy-sdk/
- npm install shopify-buy
- npm install @shopify/buy-button-js
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