Fork, customize, deploy: Introducing extensible Shopify app templates to jumpstart your next project
TL;DR: You can now instantly fork, extend, and deploy a collection of fully customizable app templates with Gadget. Setup guides, easy-to-use docs, and best practices baked into every build.
New apps are released to the Shopify app store every day, and a lot of the time they’re variations on the same popular use cases. Because no matter how many options are available, there will always be merchants who want something different, and there will always be a need for custom apps. Gadget is introducing a suite of app templates based on popular use cases, to give Shopify developers the option to skip most of their app setup.
Each template includes all of the infrastructure, models, actions, and code you need to power your app. In seconds, you can go from having no project to a fully functional app deployed and installed on a Shopify store. Gadget templates let you offload the repetitive parts of your app builds by providing a high-level starting point that has all of the basic functionality built-in, but is designed to be fully customized and extended in code.
"With Gadget’s templates, we can save weeks of work by forking a starting point that already includes all of the boilerplate features, and lets us focus on the customizations the merchant desires."
— Jonathan Moore, Style Hatch
The new product quiz template, for example, gives developers access to a fully customizable version of a common use case. Many Shopify merchants want to personalize their store and recommend products based on a buyer’s needs or interests. By default, Gadget’s product quiz template includes the code to run theme app extensions, and can be installed on a store immediately. It gives merchants a tool to create their own questions and recommend a product for each answer, but it also comes with functional code and instructions on how to set up your actions to extend the logic that powers a quiz. You can quickly add features like automatic discounts, or recommend collections instead of individual products, and when you fork the template, it includes all of the models and backend logic required to run. It’s yours to extend and customize as you like, including the UI and admin workflows.
Jonathan Moore, the founder of Style Hatch and Engineering Lead at Kosas Cosmetics, recently launched a product quiz in the form of a shade finder, working to build the app in just three weeks with Gadget. “We often see merchants request similar apps, like custom product recommendation apps, and find ourselves spending a lot of time doing repetitive work. With Gadget’s templates, we can save weeks of work by forking a starting point that already includes all of the boilerplate features, and lets us focus on the customizations the merchant desires."
Fork and launch, again and again
Rather than spending your time constantly building and rebuilding the same projects, Gadget templates give you a way to instantly spin up an app that’s built for your specific use case, without worrying about the setup or maintaining the boilerplate code to power it. All you have to build are the custom features and interfaces for your individual clients.
Once you’ve made a template your own, you can fork the customized version again and again, abstracting away another layer of repetitive code. By giving you the tools to automate your specific processes, Gadget templates allow you to complete and ship projects in a fraction of the time, so you can build a thousand apps for a thousand merchants without breaking a sweat.
Join us for a live 20 minute demo on how to use and extend the new templates when we take our new Product Quiz template from fork to deploy.
Thursday, January 25 at 10:00 am ET
Register now →
Brendan Micallef, the Design & Technical Director at Head On, used a Gadget template to build a fully-custom product quiz that could quickly be adapted for regional sites when their client was working on a tight deadline. "We used the Gadget product quiz template to power one of our recent projects for a client. The template gave us the flexibility to implement a Shopify app with ease, at a level we could easily maintain and manage across multiple stores. Overall, it took us just a few hours to customize and deploy."
Each of the new Gadget templates includes straightforward documentation, clear setup instructions, and built-in best practices. The setup instructions provide detailed steps for extending and customizing a template to quickly build an app that meets specific merchant needs, whether you’re building apps for individual merchants or public use. All the new templates were built by the people who know Gadget best: the Gadget development team. Each one gives you code that follows Gadget and Shopify’s best practices, takes advantage of all of our latest features and tooling, and runs on the latest version of the Shopify API, Polaris, and the Gadget framework. All of the roles and permissions for templates are formatted with the proper security practices in mind to ensure that sensitive data is only accessible by authorized users.
The template gave us the flexibility to implement a Shopify app with ease, at a level we could easily maintain and manage across multiple stores.
— Brendan Micallef, Head On
Templates are also a great way to learn how to optimize your apps in Gadget. All the documentation comes with an overview of the application’s architecture, providing you with a roadmap to see which code files contain key logic and which models to look at. By exploring the documentation and setup and extending existing functionality, developers working on their first Gadget project have a real-life example of how to build using the Gadget framework.
Recreate on repeat
If you want to use one of the templates for your next project, it’s easy to quickly fork, customize, deploy, and use it on a live store.
Fork & install
Once you fork a template, the first thing you’ll want to do is connect to Shopify and install your app on a store. Because every Gadget template is set up to automatically sync all the necessary data upon connection, you’ll instantly have the opportunity to start using the app. Not forking a Shopify app? Then no setup is required, you can preview your app and start customizing right away.
Customize & extend
After you’ve forked a template, it’s yours to change as you like. You own the project, so it’s up to you to add, edit, and remove any features. You can customize the UI and frontend using React, and extend the backend logic in Node.js. The detailed docs and app architecture give you a roadmap of all the important files and models so you know where to focus your attention to start customizing.
Deploy & maintain
Once you’ve made a template yours, like all Gadget apps, you can deploy your project in a single click. When it’s live, Gadget’s auto-scaled infrastructure makes it easy to grow with a store, and the platform regularly provides easy migrations to the latest versions of Shopify’s API, so you’re not left with tedious maintenance.
10 new app templates
Each one of our new templates includes all of the Gadget features you know and love, including full-stack architecture, built-in auth, third-party connections, and more. We’ve introduced templates for building Shopify, web apps, and OpenAI-powered applications.
Product quiz
Recommend products based on how buyers answer a series of questions. This template uses tools like `useActionForm` to reduce the amount of code in your apps, optimizing those requests you get for shade match quizzes from makeup brands. Extend it by using the answers to apply custom filters to a product catalog, or suggest the perfect product bundle.
Pre-purchase upsell
Let merchants choose products to upsell and have them appear at checkout. This build combines Shopify admin UI extensions and checkout extensions to create an inline upsell offer on checkout. One way you could extend this could be as a way to enter customers into a contest.
Product tagger
Need to quickly tag products or create collections? The product tagger is a great way to see how Gadget can be used across Shopify to customize a store. You could add a layer by using OpenAI to create smart tag suggestions.
Billing templates x3
Whatever pricing model you use, we’ve got a billing template to suit your needs. Fork and customize our monthly subscription, usage-based, and one-time charge templates for your next public Shopify app.
Chat GPT Clone
Explore how Gadget can be used to build your own AI chatbot. This template uses the built-in OpenAI connection and comes with data models and backend logic built-in so you can learn how to work with generative AI. Add your own domain knowledge, prompts, and context so you can have a chatbot that works for your business.
CRUD Blog with auth
See how Gadget handles CRUD actions when it comes to public and protected routes. This template comes with a pre-built blog authors can publish to and readers can view. Consider pairing it with notification emails whenever a new post is published.
Screenwriter GPT
Maybe you want to explore how vector embeddings and response streaming work in Gadget, or maybe you want to break into Hollywood. This template comes with extensible logic and a built-in OpenAI connection to create the movie scenes of your dreams.
Start with TailwindCSS
Create a Gadget web app that’s been restyled with TailwindCSS. Start building your custom app theme in the included `tailwind.config.js` file. From there, you can build any web app you can think of, like a project that lets your non-developer friends submit their business ideas for the next crypto app, and automatically tells them not a chance.
You can find the full list of Gadget app templates here.
We’ll continue to release more templates and support more use cases so developers can build and learn faster with Gadget. If you have requests or ideas for new templates or you have feedback on the current ones, we want to know! You can share your suggestions, get updates on new template releases, and connect with the team over on our Discord.
