Gadget app templates give developers a massive head start on app development. Forked templates, such as the product quiz, come with all the models and code required to run a full stack app and are hosted and scaled on Gadget so you can go from zero to deployed faster than ever.
The other great thing about templates is that once you fork them, the new application is all yours. You can modify, customize, and extend them as you see fit! Because you don’t need to spend time building the initial prototype, you can dive right into customizing and extending to suit your, or a merchant’s, needs.
Looking for some inspiration on how to customize and extend your first template? Look no further! We have some ideas for extending the product quiz template to help capture shoppers' attention and increase conversion rates.
Before we get to some more creative suggestions, here are some practical, repeatable modifications of product quizzes often found on Shopify stores.
The quiz template is already set up to manage all the backend actions and data models required for a simple quiz. You might not need to change any code in the Gadget app at all! Instead, you can focus your time on the theme extension, and customize it to better integrate with a merchant’s storefront.
You will probably have to do this for most, if not all, quiz apps you deploy to merchant storefronts.
When you fork the product quiz, you get some default styling provided by the current theme. You can edit the appearance by adding a new <inline-code>css<inline-code> asset file or importing additional existing styles in <inline-code>quiz-page.liquid<inline-code>.
By default, the product quiz template will recommend one product for each answer. But for stores with large product catalogs and many product variants, it can be overwhelming if shoppers aren’t sure what they want when they visit the store. A quiz that acts as a filter on the product catalog and helps shoppers find the best style, size, fit, or variant for their needs can help focus a shopper’s attention on products that matter to them.
This quiz is great for clothing, bikes, skincare; anything that has a wide variety of categories within the product catalog!
Example: Allbirds product quiz for finding the ideal pair of shoes
Gadget’s product quiz template recommends a single product for each answer selected by shoppers. Instead of selecting products to recommend, you could:
Why recommend one product, when you could recommend multiple? One of our favorite ways to extend the template is by combining a quiz app with product bundles and discounts. You give shoppers a personalized experience, and an incentive to bundle their items to drive conversion. The base quiz may operate similarly to the Gadget quiz template, where each answered question has a recommended product and those products are then offered as a custom bundle, or a filter could be applied to some existing and pre-defined bundles.
This style of quiz is great for skin care, nutrition, and hygiene stores where bundling different products together makes sense for shoppers.
Example: Dr. Squatch’s quiz helps shoppers build custom soap bundles and offers a discount.
This is a good example of extending the existing quiz. Since the template already has a recommended product for each answer, you just need to extend your app to include discounts and bundles:
These are more out-of-the-box ideas for customizing or extending the quiz template that could add some zest to a shopper’s experience!
Studies show that people love free stuff. A giveaway that has shoppers come to a storefront, fill out a quiz, and enter contact information could be a powerful way to bring in new customers. An added incentive could be to offer the recommended product results to the winner.
The template already collects shopper email addresses and the products suggested, so extending it to select a content winner should be a relatively quick task!
You could keep the base quiz the same and just extend the template to add the contest functionality:
Instead of pre-defining selectable answers to questions, allow users to answer questions however they please. One part product quiz, one part chatbot, this app could be a more interactive quiz app that allows shoppers to answer questions how they want, which could lead to a better recommendation.
OpenAI can be instructed to make suggestions based on specific products, or a particular collection of products as defined by the merchant.
Merchants wouldn’t need to create predefined answers to questions, so you can remove some existing data models, and edit the embedded frontend and theme extension code:
Bonus: Looking for ways to implement the chatbot functionality? Check out our OpenAI chatbot tutorial.
Who doesn’t love a good flow chart? It’s like a “choose your own adventure”, but with… charts. Like our first practical suggestion, questions could act as a filter, but would also provide a fun and unique experience for shoppers filling out the quiz. You could present the quiz as either a flow chart or an interactive infographic, and questions presented to shoppers could change based on previous selections.
Some data model changes would need to be made, and the theme extension would need a new coat of paint:
These suggestions can be combined, modified, ripped apart, juiced, or changed in any way you see fit. Once forked, the quiz app is 100% yours, and with unlimited development environments, you are free to try as many of these ideas as you want. And because you skip all the boilerplate setup required, you have more time to experiment with different quiz styles and make your own app templates that you can reuse again and again and again.
Pop quiz: Do you have ideas for other templates or quiz customizations?
YES: Great! You can share them in our developer Discord.
NO: Hope you liked this guide! You can still join our Discord if you want.
.png)
