Close

Sign up to Gadget

3 practical and 3 creative ideas for extending the product quiz template

-

About

Get some inspiration for how you can extend and customize the product quiz template for yourself or merchants.

Problem

Solution

Result

3 practical and 3 creative ideas for extending the product quiz template

Riley Draward
January 25, 2024

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. 

Practical ideas

Before we get to some more creative suggestions, here are some practical, repeatable modifications of product quizzes often found on Shopify stores.

1) Modify the theme extension to better integrate with a merchant’s store

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.

How you could modify the template

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>.

  • Change the look and feel of the buttons and questions to match a merchant’s brand. This is an easy way to make the quiz feel like a fully custom app. 
  • Change how shoppers interact with the quiz. For example, you could have all the questions on one page, or set it up to go question by question.
  • Add a progress bar to help communicate with shoppers how many questions they have left.

2) Use Quiz questions to act as filters on a product catalog

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

How you could modify the template

Gadget’s product quiz template recommends a single product for each answer selected by shoppers. Instead of selecting products to recommend, you could:

  • Capture some pre-defined filters to be applied as part of a product or product variant request using a new data model. These could include price filters, filters on product tags, or filters on collections.
  • Update <inline-code>frontend/components/Answers.jsx<inline-code> and the quiz state captured in <inline-code>frontend/pages/CreateQuizPage.jsx <inline-code> and <inline-code>frontend/pages/EditQuizPage.jsx <inline-code> so that merchants can associate these filters with answers to questions in the quiz.
  • Apply the filter conditions as part of a product query once a shopper has finished filling out the quiz. This could be done in the theme extension’s <inline-code>assets/product-quiz.js<inline-code> file.

3) Create a personalized bundle and discount code

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.

How you could modify the template

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:

  • Add a global action that generates a discount code and dynamic bundle that relates to a specific shopper.
  • Use Shopify’s Cart Transform Function to dynamically create discounted bundles based on product categories, tags, or however you want to dynamically determine what products to offer shoppers.

Fun ideas

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!

1) Create a contest entry for every quiz submission

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!

How you could modify the template

You could keep the base quiz the same and just extend the template to add the contest functionality:

  • Add a global action that randomly selects one or more shoppers who filled out the quiz as a winner.
  • Add a page to the admin-embedded frontend that allows merchants to enter how many winners they want to select, calls the new global action, and returns the contact information for the contest winners.
  • An additional data model to capture <inline-code>contest<inline-code> info could also be helpful.

2) Dynamically recommend products with OpenAI

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.

How you could modify the template

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:

  • Modify the admin app’s <inline-code>frontend/component/QuizForm.jsx<inline-code> and its children so merchants only need to define questions for a quiz.
  • Collect all shopper answers and store them in a new data model.
  • Enable the OpenAI connection on your Gadget app.
  • Call OpenAI’s embedding API to generate vectors for product name/descriptions AND a shopper’s recorded answers.
  • Use an HTTP route and Gadget’s built-in cosine similarity sorting to find products that best match quiz answers and stream suggestions back to shoppers.
Bonus: Looking for ways to implement the chatbot functionality? Check out our OpenAI chatbot tutorial.

3) Build an interactive flow chart with different “paths” to suggested products

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.

Display questions based on the previous response to really personalize the quiz.

How you could modify the template

Some data model changes would need to be made, and the theme extension would need a new coat of paint:

  • This would require an additional relationship field from the <inline-code>answer<inline-code> model to the next <inline-code>question<inline-code>.
  • Heavily modify the theme app extension to present a flow chart on the storefront and allow shoppers to click through it to see their suggested products/bundles/collection .

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.

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