Shopify recently announced improvements to their Storefront API that allows store owners to manage and access their entire store and inventory through APIs.
This opens up a new level of possibilities for Shopify store owners, such as:
- Shopify can be used as a backend service to set up your store. You can also use any frontend tech you choose to build it.
- A Shopify-powered e-commerce website can be created without a Shopify account.
- Shopify allows you to sell products from any app, website, or video game.
This is very exciting. I also took advantage of the APIs to create this Shopify Gridsome Startup Template.
You can either go ahead and look it up, or you can read this post where I’ll attempt to explain my process.
Shopify: How to get started
Before we get into the details, here are some things that you might need to make sure you have.
- If you don’t already have one, create one Shopify Partner account.
- To test your implementations, log in to your partner account.
- To authenticate requests to your Storefront APIs, generate your API credentials
- In your store, create products and variants. These could be fake products that you downloaded from an API.
- You can create a private app in your Shopify admin dashboard. This will be your client application, from which you’ll make requests.
Now you can start using your store data for any client application that suits your needs.
Authentication
To authenticate requests to your Storefront API, all you need is a storefront token. This can be found on your Shopify admin section. This token is used to authenticate requests.
Learn more about authorization and scopes on the Shopify Docs. But this was all I needed to do the authentication. Let’s now look at how to retrieve data from the store.
Products
All products available
Before we get started, it is worth noting that Storefront APIs are entirely GraphQL-based. We won’t be using any REST alternatives so all sample snippets will be in GraphQL.
To get a complete list of products in your shop, send a post request via your Shopify store endpoint.
The products query is what we use in the above snippet. This will return all products in your store without any arguments. We have specified that we only want the first five products. To do this, we need to provide the first argument for the products question.
What if this request was made from your favourite Frontend framework like Next.js, Nuxt.js. What would that look like? In my case, I am working on Gridsome. So I will go into the gridsome.server.js and write this query:
These are the fields that we have defined in our query. We will return the response with the respective values. You can add additional fields such as variants and collections depending on your requirements. To keep the snippets simple and easy to read, I kept it very minimal. If you want to see more, you can find the rest of this file.
Gridsome works by fetched product data. Now we can create a Product collection and pass product data into this Collection:
This Collection allows us to access products from all of our pages and components as this.$page.product. It is now possible to use it anywhere within Gridsome.
Buy a specific product
What if you only want to ask for one product? We can query the products using unique identifiers. This query will return the results.
This query will be run against your Product schema to return the product ID. Below is an example response to the query:
Let’s not get into the details of requesting products. Let’s now look at how to manage your shopping cart once your customers make that purchase decision.
Cart
This was my most difficult part. When dealing with the cart API, there are many moving parts. This explanation should make it easier for you. First, a cart is not created until a product is added to it (i.e. a user clicks Add To Cart).
Create Cart
Once that happens, you can then send Shopify a request to create a Cart with the selected item. To create a cart, you will need two fields: the id for the product selected and the quantity. This is the mutation:
The above mutation will create a cart with return values for all fields. The file contains the remainder of the file. This has been done to make it more readable and concise. You may also be curious about the postToShopify export. It’s a utility function that we use to request Shopify. Also available .
This is a mistake I made that took me a while to find out. You might not think that the
product id, i.e. theitemIdshown in the snippet above, is the product’s ID (product.node.id). It’s actually the ID of the chosen product variant. Thevariantsfield of the product data will remain available if there are no variants. And you can access it withproduct.variants[0].node.id. This ID is what you need to add to your cart (or use to create one).
Add items to your cart
If you have a cart and want to add items to it, then you will need to supply.
- The
cartIdreturned in the first attempt to create a cart - The
IDfor the product that you are adding to your cart - Its
quantity.
Here is a sample mutation to take the required fields and add the selected product into the cart. Its ID equals the cartId.
Shopify will locate the cart with the ID equal to the ID in the cartId variable, and add the product as a line item to the cart. The file contains the entire snippet.
Take items out of your cart
We’ve now created a cart and added items. Let’s see how to remove an item. It’s not uncommon for me to change my mind when I shop online, so I would like to be able remove items from my cart.
This request will not be any different than the one that adds an item into the cart. In this instance, we want to remove an item. It’s as easy as putting in the lineId ID of the product variant (line item) that you wish to get rid of, and the cartId ID of the cart you want it to be removed from. Here’s how:
The above mutation will remove the selected product from the cart whose lineID equals the requested.
That’s it! This is how far I have come working with the Storefront API.
- This is the live site I created in this process to give an overview of how it all works together.
- The source code is available on GitHub . This template can be used to get started with the Shopify Storefront APIs.
Shopify API Releases
This is the October 2021 edition our API Features Roundup. It’s designed to help developers understand the latest developments and how to adopt them to make their apps more efficient.
This version features significant improvements to Storefront API. It includes a brand new cart API and the ability fetch specific resources by ID. This version includes bulk operation webhooks and manual fulfillment holds that facilitate pre-orders. It also contains SMS marketing consent endpoints that indicate a customer’s willingness for SMS marketing communications.
This release coincides with version 2020-10’s removal. Make sure to review your API health report and check for compatibility before you make any changes. The 2021-10 release notes contain a complete list of API changes that have been made to this version.
Cart API
Managing carts using the Storefront API had its problems in the past. To get the most current product pricing and availability, you had to create or update your checkout. Shopify carefully throttles checkouts in order to provide a high-quality shopping experience. Requests to manage this “pseudocart”, would count against your checkout throttle limit.
It is now possible to use the Storefront API to interact with carts in the 2021-10 version. The cart API is a huge step forward in usability. It allows you to access all the information about an order, without the need to create a checkout or wait for the customer to pay. These carts no longer need to be tied to the checkout throttle, they can instead use the same throttle that all other storefront requests. This update also benefits flash sales: carts created via the Storefront API now have the ability to check out the checkout queue.
Improvements to the Storefront API
To facilitate retrieval of individual resources, new fields were added to the QueryRoot object. You can query blogs, collections and pages directly using an ID or handle. These fields enable you to quickly and effectively fetch the resource you require, instead of searching through a list every resource returned from the index.
Bulk Operation Webhooks
To find out when Shopify has finished processing a bulk order, you had to poll its status in the past versions. We’ve added webhooks in 2021-10 to let clients know if a bulk job is complete, cancelled, or failed. Webhooks can reduce the API call limit impact of bulk operations and allow clients to relax and wait for the response from the webhook that includes the status of their bulk operation. No more polling!
Manual Fulfillment Holds
Version 2021-10 adds support to more powerful fulfillment workflows for clients who use Fulfillment Orders. Fulfillment Orders now allow apps to place fulfillment hold on items for backorders and pre-orders, before the item becomes available for fulfillment.
These new actions can only be performed through Fulfillment Orders and not via the legacy fulfillment platform. We recommend that clients who interact with fulfillments use Fulfillment Orders instead of legacy order fulfillment endpoints.
SMS Consent
Clients can now access, update, and retrieve consent from customers to receive marketing material via SMS. Updates to this preference will trigger a CUSTOMERS_MARKETING_CONSENT_UPDATE webhook, allowing you to stay updated about the customer’s marketing preferences.
Reminder: All apps that do marketing must keep the Shopify customer record up-to-date with any customer preferences. All apps in a store can respect the marketing preferences of every customer by having up-to-date data about them in Shopify.
Shopify Checkout API
HulkApps offers Shopify support that is subscription-ready. You can create upselling opportunities with engaging pre-checkout addons for your Shopify subscription architecture.
- Create seamless shopping experiences
- Increase the average order value
- Fastest Shopify checkout
- Marketing that is affordable and optimized
Create a brand experience with Shopify’s pre-checkout extension
You can create customer longevity that benefits your customers and you as a merchant. Shopify subscription precheckout add-on boosts your recurring order value
HulkApps Shopify specialists create diverse Shopify subscription APIs to help you build pre-checkout addons on your site. In minutes, you can increase your sales.
High customer value is achieved when both functionality and performance are considered. Shopify allows you to quickly make purchases by adding a pre-checkout extension.
Pre-checkout plugin – The fastest way to increase sales
You don’t need to create a checkout page for Shopify. Instead, build something more powerful to increase upselling for your business. HulkApps makes this easy for you.
The ability to sync Shopify with the subscription checkout allows you to do more in less time. The pre-checkout process helps to make shopping easy.
Create custom pre-checkout
HulkApps uses the Shopify subscription APIs to provide similar functionality for pre-checkout checkout. All processes are seamless and all settings are easily managed.
Rapid payment processing
Your subscription payments can be made quick and simple. We can handle any subscription plan, no matter how small or complex.
Manage recurring orders
HulkApps ensures that your pre-checkout addon increases the value recurring orders. Shopify support is available to assist customers with any issues that may prevent them from accessing your checkout. Contact us to create the pre-checkout functionality for your Shopify architecture.
What is Cart.js?
Cart.js, a small Javascript library open-source from Javascript, makes adding powerful Ajax cart functionality into your Shopify theme easy.
It is easy to use and has some very powerful and useful features like:
- Cart manipulation using a consistent, simple API
- Data API is for markup-only usage without the need to write a single line of Javascript
- DOM Binding allows you to dynamically render HTML templates when your cart changes.
Ajax requests don’t have to be synchronous or binding event listeners. You also don’t have to worry about updating the DOM.
Can it do more?
Yes! Cart.js can do so much more than convert existing product forms to Ajax using a single attribute. It also supports fully dynamic HTML templates.
You can also hook into our API and custom events if you want to create your Javascript script.
Learn more about Cart.js by using the guide or the reference.
Additional Questions
Is it stable
Cart.js is one the most popular front-end Shopify libraries. It is being used by many Shopify stores, including our clients.
It doesn’t get frequent updates but it is maintained. We do our best to respond promptly to feature requests and bug reports.
We’re happy to answer your questions or assist you in getting up and running with Cart.js if you are interested.
Who is using it?
Apart from our clients, some of which have large Shopify stores, there are many other sites that are using Cart.js. For a complete list, visit the Built With Cart.js Page. Add your own site after you have built something with the library.
What is the browser support like?
It’s pretty good! The core Cart.js libraries are dependent on jQuery for Ajax request and DOM manipulation. This is why the only limit is the version of jQuery that you choose to use. The 1.x version jQuery with Cart.js can be used to create themes that support IE6+, Chrome and Firefox, Safari 5.1+, Safari 5.1+, and higher.
There are potential problems with older browsers that don’t support ES5 Javascript. This means you can’t use the DOM binding functionality. For more information, see Browser Support.
I have a feature request or bug report.
It can be added to the issues tracker at GitHub.
What can I do to help?
Absolutely! You can simply go to the GitHub webpage, fork the repository, and then manage development through pull requests and issues.
Contact me on twitter if you are interested in helping but don’t know how to begin.
