On projects we've worked on, we often get asked to add EC functionality to a site. Reference examples: ・ Himitsu Kitchen https://himitsu.kitchen/ ・ Julie - Find your one-of-a-kind bottle of wine from around the world https://julie.page/

In these cases, we often recommend using Shopify, and here we'll show just how easily you can add cart functionality for EC.

To add cart functionality, we use Shopify's Storefront API. The benefit of the Storefront API is that, rather than migrating your site onto the Shopify platform, you can add cart functionality just by adding JavaScript code to your existing codebase—which keeps development costs down. It also gives you freedom in your site architecture and lets you keep using the template engine or framework you're already familiar with. If you build directly on Shopify, you need to use a template language called Liquid, which can be a hurdle if you're not used to it.

Shopify Storefront API documentation

The Storefront API provides SDKs for JS, iOS, and Android, so you can easily work with product data and carts managed on Shopify just by using them.

Since this article is about websites, we'll walk through the approach using the JS SDK.

Installing the required package

$yarn add shopify-buy

Usage

Creating a cart

const fetch = require('node-fetch')
const shopify = require('shopify-buy')

// Create a checkout (i.e., a cart)

const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
// Doc : https://github.com/Shopify/js-buy-sdk#creating-a-checkout
const checkout = await shopifyClient.checkout.create()

// Get the checkout token from the checkout you just created
const checkoutToken = checkout.id
// You can also retrieve an already-created checkout using a checkout token created previously
const checkout = await shopifyClient.checkout.fetch(checkoutToken)

Adding arbitrary information to the cart

You can add arbitrary information to a cart. Shopify carts provide CustomAttributes, which let you attach arbitrary information. That information can be viewed on Shopify's order screen. Use cases include adding a nickname used within your service, or adding a preferred delivery date.

// Doc : https://github.com/Shopify/js-buy-sdk#fetching-a-checkout
const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
const userName = 'Information you want to save to the cart, such as the nickname used on the site'
const input = { customAttributes: { key: 'userName', value: `${userName}` } }
await shopifyClient.checkout.updateAttributes(checkoutToken, input)

Adding a product to the cart

const shopifyVariantId = '1234567891011'
// * This is the ID attached to the Shopify product information
// Note: this is different from the Product ID shown in the Shopify product screen's URL

const variantId = btoa(`gid://shopify/ProductVariant/${shopifyVariantId}`)
// Create the data to add to the cart
// You can also add information via CustomAttributes at the line item level
// Here, we add what will be displayed on the cart screen (the product's image and price)
const lineItemsObject = {
  variantId,
  quantity: 1,
  customAttributes: [
    { key: 'price', value: `${payload.price}` },
    { key: 'imageUrl', value: `${payload.coverImageUrl}` },
  ],
}
const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
const checkout = await shopifyClient.checkout.addLineItems(checkoutToken, lineItemsObject)

Moving to the checkout page

You can navigate to checkout by running the following code when, for example, a checkout button is clicked.

const checkout = await shopifyClient.checkout.fetch(checkoutToken)
location.href = checkout.webUrl

Summary

This is how we were able to add cart functionality using the SDK. All that's left is to turn each necessary feature into a function and call it from the UI. If there's interest, we'd be happy to share a more detailed implementation.