Close

Sign up to Gadget

Too many stores, too little time: How ONELIVE migrated one client off of checkout.liquid in an hour

Speed to deploy is key in the music and entertainment industry. Using Gadget has turned our app development process up to 11.
-
Rian Neil, Head of Ecommerce Development

About

The ecommerce development team leveraged Gadget’s ready-made back end to build their first checkout extension in no time.

1

hour to deploy

Problem

The ONELIVE team needed help finding a way to migrate 1,200+ Shopify Plus stores away from checkout.liquid, and onto checkout extensions quickly.

Solution

They migrated a checkout.liquid customization, leveraging Gadget’s infrastructure to create their first-ever checkout extension.

Result

In less than an hour, the ONELIVE team was able to successfully build and deploy their checkout extension to a live store with Gadget.

Too many stores, too little time: How ONELIVE migrated one client off of checkout.liquid in an hour

Emma Hyde
June 15, 2023

1

hour to deploy

More than a thousand Shopify Plus merchants trust ONELIVE, a team specializing in ecommerce solutions for entertainment, sports and DTC brands, to take care of their ecommerce needs.

Over the past decade, ONELIVE has launched more than 1,600 stores, providing a suite of beautifully designed, high-performance ecommerce sites that are proven to convert. They’ve established themselves as a trusted partner within the Shopify ecosystem, working alongside names like Willie Nelson, Zac Brown Band, Dixxon, and many, many more.

The team has dedicated themselves to prioritizing performance and revenue, successfully building hundreds of custom solutions to checkout.liquid that increased sales and streamlined operations for their suite of brands.

The problem

When ONELIVE tried to add a customization to checkout.liquid in April of 2023, they were unexpectedly met with Shopify requiring them to issue an access request to make changes to the file. Since this had never been required before, the team looked into the change. Shopify had announced the deprecation of checkout.liquid, and ONELIVE immediately knew it would be a challenge to make the switch. The deprecation wouldn’t take place until August 2024, giving the team over a year to find a solution. For most merchants, that seems like enough time to migrate, but over the years, ONELIVE has implemented checkout.liquid customizations across nearly all of the 1,200+ Shopify Plus stores they currently manage. And suddenly with this change, they would have to replace all of them with checkout UI extensions, a new functionality within Shopify Plus.

As they looked into making the switch, they learned that Shopify requires the migration from checkout.liquid to checkout UI extensions to be made all at once. ONELIVE couldn’t slowly chip away at the changes one at a time — it had to be all or nothing. 

Since the new checkout extensions functionality could only be deployed to stores through an app, the ONELIVE team had a whole new set of moving pieces to worry about. That included the challenges of OAuth, using Shopify's checkout extensions APIs, and possibly rethinking logic they had previously built for a theme to now be compatible with a backend for their app. Creating extensibility apps from scratch would take a lot of time — and they would have to do it for every store that had checkout.liquid customizations, before August 2024.

The ONELIVE team primarily consisted of frontend developers, which meant tackling full-stack development tasks like OAuth permissions, or any server-side logic and architecture would be challenging, but a core part of the migration process.

With the countdown on for August 2024, they began a migration plan. They needed a solution that would simplify deployment to all their client stores and reduce the amount of unnecessary code or repetitive work. They also needed to find a store with only one checkout.liquid customization so they could build a checkout extension without having to worry about replacing other checkout.liquid customizations at the same time.

After digging through ONELIVE’s suite of brands, they landed on one of Manhead Merchandising’s stores, Joji Music. Their store uses a third party fulfillment service to handle mailing orders. Their challenge was that their fulfillment center was unable to process any orders that included non-Latin characters in the shipping address, which by default, are accepted by Shopify’s checkout. Up until now, ONELIVE had used checkout.liquid to verify and strip out any non-Latin character entries, but with the deprecation of checkout.liquid looming, they needed to migrate this functionality to the new checkout UI extensions API.

“When we get non-Latin characters or symbols inside of the checkout, we can’t really parse it, and it causes a lot of headaches for our clients’ warehouses,” Rian Neil, Head of Ecommerce Development at ONELIVE, explained. “So we have a script on checkout.liquid that basically says if anyone tries to type any special characters, then don’t allow them to do it.”

With their plan laid out and their test store selected, the ONELIVE team turned to Gadget.

The solution

Some developers on the ONELIVE team had used Gadget previously to automate shipping rate updates across their suite of Shopify Plus stores, saving thousands of man hours in the process. So the team in charge of making the switch to checkout extensions figured that Gadget’s full-stack app development platform would have what they needed to make the transition from checkout.liquid to extensions as painless as possible.

With Gadget, the team was able to hand off building out the infrastructure to host their app. All they had to do was start a new project in Gadget, connect their app to Shopify, and in minutes they were ready to build the logic for their checkout extension, giving them more time to focus on building the solutions their customers needed.

The team was able to avoid some of the technical challenges and questions that many first-time app developers have to walk through. Because Gadget configured the OAuth setup for them, there was no coding involved in getting their Shopify app setup, with the right scopes and permissions granted to their application. Their team didn’t have to wrestle with Shopify’s OAuth 2.0 specs and security considerations, access token expiry or any of the myriad of problems that typically plague developers when setting up OAuth. Instead, by using Gadget, they had a connection to a development store setup and fully operational within minutes and without writing any code.

With OAuth and app setup out of the way, the team jumped right into generating their extension with the Shopify CLI, using regular expression matching to detect non-Latin characters and disable the “Continue to shipping” button when present, showing an error message prompting the buyer to replace the characters.

As they got started, they realized that checkout extensions are more limited in what you can do, or how you can do it, compared to checkout.liquid. They originally wanted to create a popup asking users to remove the non-Latin characters, but they found they were only able to make it work as an in-line notification.


Once they got their code running, they followed the few simple steps in the Shopify CLI deployment process to publish and activate the functionality on their store.

The Results

Within an hour, their app had been deployed to a development store. Because Gadget apps are always running in the cloud, the development environment was live from the moment ONELIVE created the project, which allowed them to jump into testing their application in an environment that closely mimicked production, speeding up their build time.

As the team was able to migrate the store off checkout.liquid in under an hour, Rian explained, "Speed to deploy is key in the music and entertainment industry. Using Gadget has turned our app development process up to 11." 

As the team continues to experiment, they expect to have new challenges crop up along the way. Originally, there were concerns with maintaining all these custom apps they have to build, because with 1,200+ stores, they weren’t sure the switch to checkout extensibility apps would be sustainable. But with Gadget, they’re confident they’ll be able to scale despite their ever-growing suite of brands. Gadget simplifies the upgrade process to keep their apps on Shopify’s latest API version, providing the team with an at-a-glance summary every time a new version of the Shopify API is rolled out. ONELIVE will be able to update their apps to reflect the changes in a click, saving the team the pain of keeping track and updating manually.

The team has since begun planning out their migration across the 1,200+ other Shopify Plus merchants they manage. Between the auto-scaled infrastructure, OAuth permission handling, and embedded frontends, ONELIVE is ready to start building their fleet of checkout.liquid replacements with Gadget. Their priority is and always has been the needs and goals of the brands they work with, and with Gadget handling so much of the boilerplate, they’re able to focus their efforts on providing the best solution possible.

In the coming months, they’ll be working on creating extensions to migrate their remaining clients off of checkout.liquid, and with their first one in the bag, they’re confident that things will go smoothly from here.

Sign up to get started building your own checkout extensions with Gadget, or join our community of Shopify app developers on Discord if you’re not sure where to start.

Keep reading

No items found.
Keep reading to learn about how it's built

Under the hood

We're on Discord, drop in and say hi!
Join Discord
Bouncing Arrow