Developing Shopify Themes with the Storefront API and Vue.js
Vue.js is a framework that is easy to learn and is designed to be incrementally adoptable, that can easily be paired with Shopify to create interactive features and components. Additionally, Vue.js can be used with Storefront API to build complex features and add new functionality to an existing Shopify theme and enhance the customer experience.
Vue.js is similar to systems like React and Angular, but has templates that are structurally similar to Liquid. We chose to work with Vue.js, over other options available simply because it worked well for our team since we were already familiar and comfortable using for server-side rendering.
Recently, we had the opportunity to build two features on Shopify Plus for a client project using Storefront API and Vue.js which helped us to create a rich customer experience. Before we jump into how we did this (if you caught us at Shopify Unite, consider this your encore!), let’s first look at some tips for getting started with Storefront API and Vue.js.
Tips for Getting Started
Get up to Speed with Storefront API
Shopify’s Getting Started Guide will walk you through the steps for setting up a storefront access token, which you will need to access the endpoint. It also links to a great repository of working examples to use as a springboard into your project.
Craft Your Queries
GraphiQL is a GraphQL client that allows you to compose queries and see the results in real-time. GraphQL is self-documenting, so it will give you helpful tips as you write your queries, before you move them into your codebase.
Start Small
A lot of tutorials for front-end components assume you’re going to build out one giant Single Page Application, but we didn’t find that to be a helpful approach. It’s okay to start by mixing in just a few Vue components in with your Liquid templates and building up from there.
Manage State
As your application grows, and you have several sibling components on a page as opposed to a component tree, you may find it useful to keep state centralized with Vuex, Vue.js’ native state management library. It allows you to keep business and API logic separate from your front-end components, allowing front-end components to remain simple and focused on user interaction.
Handle Mixed IDs
What you’ll soon notice when using both Shopify’s AJAX and GraphQL APIs is that their IDs for nodes (such as products or variants) look completely different. The good news is that Storefront IDs are actually Base 64-encoded versions of a URL such as gid://shopify/Product/2158403387461. The numeric string at the end is the product ID you get via the AJAX APIs, and you can use the Javascript atob() and btoa() functions to encode and decode between Base 64.
Reduce Round Trip Effects
Consider passing useful information from Liquid to your front end. A great way to do this is to encode variables or entire objects in Liquid using the JSON filter, and inserting it into an HTML script element, tagged with a specific ID, and a type of application/JSON. Then, in your front-end instantiation, you can find this element and read its content using innerHTML, and pass it to JSON.parse(). From there, you can either consume that data directly, or pass it directly into your Vue component definition before instantiation using the propsData property.
Leveling up your Shopify Theme Development
Our internal Shopify Plus team is always looking for ways to improve our base theme to enable a smoother and richer customer experience for our clients. We do this by regularly evaluating our customers’ requirements against our technology stack, discovering any bottlenecks or pain points, and working diligently to remove them.
Our recent work, putting together GraphQL via Shopify’s Storefront API and Vue.js, helped us in furthering this goal. The results are exciting, and we’re very pleased to now share what we learned.
The two features we built were a Load More Button and Mini Cart. With these examples, we will explain how GraphQL and Vue.js helped us enhance the customer journey while overcoming the challenges of our traditional methods.
Load More Button
On a recent project, we were tasked with building a “Load More” button for our client’s Shopify Blog Article listing page. The intent was to display the five most recent articles and allow the user to click a “Load More” button to display additional articles.
Building this feature solely with Liquid would have required one of two approaches:
- Pagination. This would have required a page refresh, whereas the intent was to show more content on an existing page.
- Load all of the articles on the initial page load and then hide them. There could be thousands of articles, and this would impact performance.
Since neither of these was feasible, we turned to the Storefront API to progressively load more content.
When the user actions the “Load More” button, a call to the Storefront API is made, requesting only the next batch of articles. This makes each call fast and efficient — loading only what is needed — and making for a smooth user experience.
Further improvements are also possible, such as preloading the five subsequent blog articles. The button then functions instantaneously, with no visible lag to the user.
Mini Cart
More and more of our clients are requesting Mini Carts on their Shopify stores. They enhance the customer journey by making cart management dynamic, real-time, and friction-free.
We first set out to build a Mini Cart using Liquid. This is usually a good approach to gauge whether we’re over-engineering a feature. However, it soon became apparent that every update to the cart incurred a page load, making it feel slow and cumbersome, which is the opposite of what we were trying to achieve.
Next, we turned to Shopify’s AJAX APIs. This Cart endpoint that can tell you what’s in a user’s cart, and manipulate those items. However, it can’t tell you additional information about those products that you may need to display to your customers such as tags or additional images.
Naturally, our next step was to turn to the Product endpoint of the AJAX API. It can tell you everything you need to know about a product! But that’s part of the problem: you’re requesting a lot of data you may not actually require. Furthermore, It requires one round trip to the server for each unique product in the cart. This can reduce performance, and be cumbersome to manage in your front-end code.
The solution then is to use the Cart AJAX API and the Storefront API in tandem, and merge the results on the front end using Vue.js. Let’s break this down into the three steps you can take to achieve this.
Step one: Use the Cart AJAX API to fetch and maintain an accurate, real-time representation of the cart on the front end. Any user actions made to modify the cart are used to immediately update that representation.
Step two: Use the Storefront API to fetch only the information you don’t already know about the products in your cart. As you may know, the Storefront API uses the GraphQL protocol, and this use case really highlights its capabilities, because it allows you to specify only the fields you actually require on the front end, and you can grab that information about multiple products in a single, round trip to the server.
Step three: Use Vue.js to merge these two data sources on the front end. This allows you to build a dynamic and reactive representation of your user’s cart, without a lot of glue code.
The result is a dynamic, real-time user interface for customers to manage their cart, enriched with the data they need to make informed decisions. It also keeps customers in the flow of shopping, as opposed to making multiple visits to the cart page. We’ve been able to achieve this with very few round trips to the server, which results in a faster, more responsive user experience.
Why We Chose to Use Vue.js
Any discussion of front-end frameworks merits a discussion for why we chose one over the other. There are many excellent ones available to choose from such as React and Angular.
Put simply, Vue.js worked well for our team. Its templates are syntactically similar to Liquid, employing bindings and filters that we were already familiar and comfortable using for server-side rendering.
Furthermore, with the discussions of the front end divide in the background, we found that Vue.js did a lot to address the concerns raised in the community in a way that didn’t bifurcate and isolate developers into two different areas of expertise: traditional theme developers more comfortable with markup found it to be an easy learning curve; application and React developers were able to apply much of their existing knowledge; and along the way, each group of developers learned from each other and found it easy to collaborate on features.
It’s important to note, however, that all of these frameworks provide largely the same functionality. You should choose what works best for your team, in terms of experience, and preference.
At the end of the day, a front-end framework should help you to:
- Manage state;
- Merge information from different data sources and APIs;
- Display that information without a lot of glue code.
So there you have it! Definitely consider using the Storefront API and Vue.js when creating rich customer experiences when building on Shopify.
