How to Use JavaScript to Add Ecommerce to Any Website

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?

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:

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 $9/month (Shopify Lite) will do just fine.

On Shopify Lite, 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.

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 this helpful documentation created 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 selectedVariant of a product model, the next time you go to access the selectedVariant property, 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

The JS Buy SDK offers various JavaScript framework 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

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:

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 this helpful 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

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:

Customization API

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:

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:

Thanks for subscribing

About the Author

When she isn’t trying to wrap her mind around the expansiveness of the universe, you can find Sara catching-up on the latest web design & UX news. Oh, and reality television. She likes that a lot, too.