Formify: The drag and drop Shopify checkout customization tool built in less than a week
The big idea
Formify is a checkout UI extension that helps Shopify Plus merchants customize their checkout by adding fields without writing a single line of code. The simple drag and drop interface allows merchants to decide exactly where their custom fields will appear, and then automatically maps all of the data gathered back to metafields so it can be used as needed.
The Problem
Andrea Morone, CTO of Nextools, has been building Shopify apps for 5 years, and entered the Shopify App Challenge in 2020, not knowing it would lead him to starting his own business and creating some award-winning apps. He entered the competition for fun, with no plans of doing anything more with the app he built. But when his submission received an honorable mention, his installations skyrocketed, leading him to sell the app a year later. With the money from the sale, he started Nextools, and over the next three years, he and his team launched eight Shopify apps.
During that time, Andrea kept an eye on merchant needs and trends that came to the app store, always aware of the new tools and opportunities that arose. So when he heard that Gadget was hosting a hackathon, he thought it would be a good opportunity to try the app development platform.
The Nextools team had a few ideas they wanted to try, and they landed on Formify as the best option. Andrea had been flooded with requests for custom checkout fields from his clients, and since Shopify was in the process of deprecating checkout.liquid in favor of checkout extensibility, it seemed like the best possible choice.
They didn’t want to waste the week developing an MVP or a prototype. They wanted to develop a fully-functional app that was ready to be submitted to the app store by the end of the hackathon. So the plan was to build an app that would allow merchants to customize their checkouts without having to hire a developer. A simple drag and drop interface that would automatically map all of the data back to metafields so merchants could use the information throughout their Shopify store.
The team wasn’t new to the Shopify ecosystem. Andrea had created his own framework, consisting of boilerplate code made up of Node.js, MongoDB, Prisma, and Supabase. When Beniamino Biagiarelli joined Nextools as a Software Developer, it took 45 days for him to be onboarded. Not unexpected, but with the hackathon, they would have to both learn how to use Gadget, and build their entire app in under a week.
The Solution
Andrea and Beniamino started by diving into the Gadget documentation, hoping that reading through everything would help to avoid any roadblocks during the build process. Once they were confident they understood the platform, they split their time between two apps: one focused on checkout UI extensions, and another on AI.
With Gadget, you build with confidence and with trust.
- Andrea Morone, CTO @ Nextools
With the Gadget Action framework, building the logic was easy. “With Gadget you have this fantastic thing called actions on success. So I created a model with all the configurations. And then said, on success, please update these metafields to keep the sync between the forms and metafields.”
Because Gadget handled all of the infrastructure and so much of the backend logic for them, Nextools was able to prioritize the merchant experience and put the work into making the drag and drop portion of the form builder. They know merchants today are used to working with drag and drop interfaces, and they wanted to offer that familiar experience.
“The app world is becoming very crowded and very, very competitive, but with Gadget, you are so fast that you know you are using the right product to develop. With Gadget, you build with confidence and with trust.” Andrea shared.
When it came time to push to production, the Nextools team couldn’t believe how easy it was to deploy. They were used to the complex deployment process of AWS, but with Gadget there were no users, permissions, serverless functions, or other details to worry about. They simply had to click deploy.
“I saw the arrow in the bottom right of the platform deploy, I turned to Benji and said, that’s it? I just have to push deploy? So we changed the URL in the production app on the Shopify partner dashboard and that's it. We were in production.”
At the end of the week, the team submitted two apps for consideration: Formify, and ReportAI, an app that uses openAI's APIs to generate text messages that explain, using natural language, the results of the reports generated by your Shopify store.
We built two apps in practically one week. The good thing is that they are production ready, so we don't have to do any fancy modification to the deployment
- Andrea Morone, CTO @ Nextools
Despite their own framework having a 45 day onboarding time, the Nextools team was able to learn the platform and launch their apps within the week of the hackathon. Andrea says, “We built two apps in practically one week. The good thing is that they are production ready, so we don't have to do any fancy modification to the deployment.”
What’s next for Formify
The app has now gone through the review process, and is available for merchants to install on the app store. Since this is their first checkout UI extension, the Nextools team is hoping to get feedback from their users to iterate and improve, and add any features as they’re requested.
Nextools plans to build at least two more apps with Gadget, and is considering migrating some of their existing Shopify apps to the platform to take advantage of the performant infrastructure and scalability without having to worry about managing it themselves.