![How to Make a Shopify Quiz [Step-by-Step Guide]](https://odicci.com/wp-content/uploads/2023/11/Blog-Featured-Image-How-to-Make-a-Shopify-Quiz-1024x536.png)
How To Create A Product Recommendation Quiz For Your Shopify Store
Table of Contents
Shopify Quiz Cheat Sheet
Brief:
- Industry: eCommerce
- Experience type: Quizzes
Your Toolkit
- Experience Builder: Odicci
- eCommerce Platform: Shopify
- Email/SMS integration: Klaviyo (or your integration of choice)
- Free Tools: Google Sheets quiz map template
Today we’re going to learn how to make a quiz on Shopify.
By the end of this how-to article, you’ll have built and published a little thing called a product recommendation quiz.
You know, those cheeky little quizzes that ask you what kind of animal you are, or what colour suits your personality, or what kind of shampoo you should use for your gorgeous locks.
Well, these quizzes are not just for entertainment, they can also be used to help you find the best products for your needs and preferences.
How cool is that?
With Shopify Quizzes, you can help your shoppers overcome the dilemma of choice overload and guide them to the best items in your catalog that match their needs.
But that’s not all!
You can also make your quiz a roaring success by using the right promotional tactics and follow up campaigns in your marketing.
I’m going to show you how to do that, so you can boost your sales, increase your customer loyalty, and stand out from the crowd.
Now:
Before we get sucked into the details of crafting this quiz, let’s have a chat about why you’d want to build such a thing in the first place.
Here’s a special 7 day 15 day Odicci free trial.
🛠️ Intuitive quiz creator
🎨 Tons of templates
📊 Collect priceless zero-party data
Why Build a Product Quiz on Shopify?
There’s this thing called the paradox of choice, which basically means that if you give people too many options, they tend to get overwhelmed and might just take off without buying anything from your store…
You see:
Even if they do manage to make a purchase, they’ll probably feel a bit peeved about their decision, wondering if they picked the right thing or if they missed out on something better.
So:
What you want to do is help your customers out with a quiz that asks them a few strategic questions to find out what they’re looking for, what they’re hoping to achieve, and then suggests products based on their answers.
This way:
You make it much easier and quicker for shoppers to browse through your catalog and find products that suit their specific needs.
It’s like having a friendly shop assistant that guides your customers to the right section of your store, only it’s online, it’s scalable, and it runs itself.
You also get to know your customers on a deeper level.
Quiz answers are a treasure trove of juicy insights into how your customers think and feel.
You’ll learn about their preferences, their goals, and what drives them crazy.
You can use that to refine your customer personas, to spice up your marketing campaigns, and to shape your product direction.
You also get to personalize the shopping experience with zero party data.
Personalization is the bee’s knees when it comes to boosting your revenue.
Studies show that personalized customer journeys can reduce customer acquisition costs by as much as 50% and increase revenue by 40%.
If you want to join the elite club of top performing Shopify stores, you really need to get your hands on some first party data.
Quizzes, my friends, are a firehose of useful customer data that can level up your marketing campaigns with highly personalized content.
You could use those bits of information you gather from your quizzes to follow up with relevant emails, cheeky text reminders, targeted ads, irresistible offers, and so on.
And you could use that data to suggest items for future product launches as well.
But:
How do you craft a quiz that dazzles and delights?
Let’s take a peek at some successful ecommerce brands and see what they’ve done.
This will help us get a clear vision on what we should create.
Successful Quiz Examples
Before diving into creating your Shopify quiz, we have some examples of what a great eCommerce quiz looks like.
Your quiz needs to make your customers’ shopping experience as smooth as butter, like these eCommerce brands have done with their brilliant quizzes.
Hotel Chocolat’s Delicious Flavor Match Quiz
Hotel Chocolat has devised a charming quiz to help you find the perfect hot chocolate flavor, based on your mood and taste buds.
How clever is that?
But don’t expect them to ask boring questions like “Do you want milk or dark chocolate?” or “Do you like nuts or fruits in your drink?”
No, no, no.
That would be too easy, too obvious, too mundane.
Instead, they explore your psyche, asking about the movie genres that put you at the edge of your seat, or the season that makes you feel alive.
They want to know you –really know you – before they reveal your ideal match.
And why not?
Why should we settle for generic drinks that don’t reflect our unique personalities and preferences?
Why should we drink what the masses drink, when we can have something tailor-made for us?
That’s the beauty of Hotel Chocolat’s hot chocolate flavor match quiz:
- It’s not just a quiz, it’s a journey of self-discovery.
- It’s not just a drink, it’s a statement of who you are.
- It’s not just a brand, it’s a lifestyle.
So go on, take the quiz and find out what flavor suits you best.
You might be surprised by the results.
You might learn something new about yourself.
You might even fall in love with a new flavor.
NEOM Organics’ Fragrance Quiz
A brilliant way to use product recommendation quizzes is to recommend a specific variation of your product.
This is common in the wellness space for things like candles, diffusers, or oils but can also be used for things like cosmetic shades or clothing sizes & colors.
In the case of NEOM Organics, the brand leverages its fragrance finder quiz:
NEOM has a simple quiz that asks you about your mood and your preferences.
Based on your answers, NEOM Organics will guide you to the right fragrance for you.
Benefit Cosmetics’ Summer Makeup Quiz
Here’s a stellar example of a cosmetics brand using quizzes to collect valuable zero party data.
Benefit Cosmetics’ “Summer Beauty Quiz” is not just a way of helping customers discover new products that are trending for this summer.
It’s also a way of helping Benefit Cosmetics learn more about customers and their preferences to ensure the brand always delivers the most relevant products.
Styles and trends change so frequently that the same customers who took this quiz last year, or even last season, may have drastically changed their preferences.
By taking the quiz, customers voluntarily share information such as skin type, favorite colors, and the amount of makeup they prefer to use.
This is what we call zero party data, which is data that customers willingly provide to brands in exchange for personalized, relevant, product recommendations.
Zero party data is becoming more important for brands, because it helps them understand their customers better, personalize their marketing campaigns, and improve their products and services, resulting in lower costs per acquisition, increased sales, and stronger brand loyalty.
OK:
Now that we know what successful quizzes look like, let’s actually start the process of building a quiz.
Quiz Best Practices
Listen up, you lovely lot.
You want to make a quiz that helps people find the right products, right?
Well, you can’t just chuck any old questions at your customers and hope for the best.
You need to be clever, creative, and follow some simple rules.
Here’s what you need to do.
First of all:
Don’t make your quiz too long.
People have got better things to do than answer a million questions about their preferences, and you don’t want to spend ages making up different results for every possible combination of answers (Trust me, I spend all day building quizzes).
Just ask enough questions to get a good idea of what your customers are looking for, and make them feel special.
3 to 4 questions should do the trick for most cases and you can always add more later if you need to.
Next:
Don’t give them too many options for each result.
The whole point of making a quiz is to help your customers narrow down their choices and make their shopping easier.
You don’t want to overwhelm them with a bunch of items that look similar or confuse them with too many options.
Your job is to figure out the best product for them and tell them why they should buy it.
Sometimes it makes sense to give them more than one option, like if you’re selling things that come as a set or bundle together, but you should still limit it to 2 or 3 items max and make sure those items are different enough to help your customers decide.
The questions you ask should flow naturally from one to another and make sense for your business.
For example:
If you’re selling clothing, you’ll probably ask your quiz taker about the occasion they’re dressing for before you ask about their style or the season.
Mapping Out Your Quiz
To make your life easier, plan out the structure of your quiz before you start building it.
You can do this on paper or use a fancy tool like a mind map or something.
Here are some of our favorite free tools for mapping / planning out Shopify product quizzes:
Your questions and answers might look something like this:
What are you dressing up for?
Date Night
Work Meeting
Casual Day Out
What kind of vibe are you going for?
Chic
Edgy
Comfy
What season are you dressing for?
Spring
Summer
Autumn
Winter
- 3 questions, with 3 answers each with the last question having 4.
Hold on!
You could come up with different results for every combination of these answers, but that means 36 different product recommendations which would take forever to build (again, trust me).
Instead:
Keep it simple to start, consolidate answers, and focus on your top customer segments.
For example:
Question 1’s “Date Night” and “Work Meeting” options can be easily consolidated into one answer (see below):
The reason we can do this is because Question 2’s options of “Chic” and “Edgy” can be used as subcategories of Question 1’s “Formal” option to differentiate between work and date night appropriate recommendations (“Chic” for work and “Edgy” for date night).
We can also do this for Question 3 (Four answer options is way too many).
Categories like seasons can be warmer or colder depending where a customer lives.
When asking a question like this, think about the user’s end goal.
What are they trying to achieve?
In this case, your customers are trying to either find clothing for warm or cold weather.
So instead of asking “what season is it?”, you can ask, “what’s the weather like?” (see below):
Down from 4 answer options to 2 – now that’s more like it 💪!
Think about creative ways to combine answer options to reduce the amount of recommendations you have to build out while still providing a useful product recommendation experience to your customer. This is why mapping out your quiz in advance is so important.
You can always add more details later if you find you’re missing something important.
Here is what the mind map would have looked like before we cleaned up our quiz:
And here is what our mind map looks like after a bit of clean up:
Again, check out our favorite mind map tools to start mapping, or make a copy of our Google Sheets quiz map template if you prefer spreadsheets.
Name your results as the sequence of question answers that lead up to it.
For example, if our quiz taker’s answers to the 3 questions in our mind map are:
- Answer to question 1: Formal
- Answer to question 2: Edgy
- Answer to question 3: Warm
Then you should name the result for this sequence “Formal, Edgy, Warm.”
This will make life so much easier later on when connecting logic paths to success frames.
How to Build a No-Code Quiz in Odicci
Drum roll please 🥁
It’s time to show you how to actually build this quiz without code or software developers in the Odicci Interactive Marketing Hub.
We’ll use the mind map from our made-up clothing store to build out the quiz.
Let’s go step by step.
First, Let’s find a quiz template to make the quiz creation process as easy as possible.
From the Odicci app home screen, choose “Templates” from the top navigation bar.
Choose a Quiz Type
There are 4 quiz types to choose from on the Odicci platform:
Product
Quiz
Logic
Quiz
Knowledge
Quiz
Profiler
Quiz
For this example, we’ll choose a logic quiz.
Start with a Template
Start with the template that aligns with your products and goals.
Odicci has a wide range of customizable quiz templates for all kinds of holiday events.
For this example, We’ll use the “Gift Finder” quiz template.
Once in “Templates”, we’re going to choose the “Gift Finder” quiz template by filtering for “Quiz” under the “Module” section.
Setup Your Quiz Experience
When your experience is loaded up, you’ll be sent to the “Setup” page.
Here, you can name your quiz, set your language, and set your quiz duration.
For duration, you can choose a specific start and end date if you are running a seasonal promotion, however, we recommend having an “Always On” quiz alongside any seasonal experiences for more consistent zero party data collection and customer engagement.
Hit “Save” and navigate to the “Studio” where you’ll see your quiz workstation.
Customize Your Frame Design
At the top left, underneath the Odicci logo and your experience’s name, select the paint brush to tab over to the theme editor.
Here, we can edit aspects of your quiz that will be applied to every frame.
Let’s start with adding your logo, background, and if you’d like, a loading spinner.
Now that our logo, background, and loader are updated, scroll down on the left bar.
Here, we can make edits to our content layout, text orientation, text backgrounds, and various other items.
For our clothing store, we’re going to push the layout to the right so that the text doesn’t clash with the model in our background.
Other than that, the default settings work just fine.
Create Frames With Questions
Once you’re done designing your frames, tab back to the “Frames” bar, and hover over the 2nd frame.
You’ll see 3 options on the bottom: Hide, copy, and delete.
To add new frames, scroll down the “Frames” bar and click the “Add a Frame” button (the circle with a plus sign in the middle).
You can also rearrange your frames by simply dragging them into your desired order.
From here on, you can either follow along to practice building our example clothing store quiz, or you can start building your own, using our guide as a reference.
Since our quiz will need 3 “Multi Image” frames, a “Form”, and 12 “Success” frames, let’s get that set up.
We’re going to delete the 2nd and 4th frames since they are “Multi Text” frames, and we are going to replace them with 2 “Multi Image” Frames.
We can either do this by copying our existing “Multi Image” frame, or adding a new frame.
For this example, let’s try adding a new frame.
Scroll down and click “Add a Frame” (circle with plus sign) and select “Multi Image” from the “Interactive” tab in the pop up.
Once your “Multi Image” frame is selected, you’ll be prompted to name your new frame.
We’re going to name ours “What’s the weather like?”
You can edit the name of your frame at any time by hovering over the frame in the “Frames” bar and selecting the pencil icon.
Once your frame is named and created, select “add a choice” to add your answer options.
You must add choices to your frame before moving on to other frames.
Once your answer options are created, you can “Add a label” and “Add a choice description”.
We’re going to add our choice options of “Warm” and “Cold” in the labels section and leave the descriptions blank since we want our quiz to be simple and clean.
If you hover over your answer images, you can change your image or edit the dimensions of your image.
It’s best if your image is already cropped as a 1:1 square before adding to your quiz to ensure your image dimensions remains intact.
It’s basically rinse and repeat for our other two questions, so let’s finish that up.
Once our frames are set up, we can style our “Multi Image” frames to band our clothing store’s brand guidelines.
Ensure you have selected one of your “Multi Image” frames and tab over to the “Settings” section on the very right column of the Studio.
Let’s change our answer option text to our desired font, size, and text color.
Now let’s edit our “Multi Image” frame’s styling.
In the “Style” section, we can edit our images’ roundness, label background color, hover effects, label roundness, and a variety of other editing options to get your answer options looking just right.
After editing the style of your “Multi Image” frame’s answer options, we’ll scroll down the “Settings” column to the “Options” section.
Here, we can choose to add or remove the “Back” and “Submit” buttons, and show or remove label descriptions.
We’re going to remove our “Submit” button to give our quiz a cleaner look and a smoother/faster user experience.
We’re also going to deselect “Show Descriptions” since our quiz doesn’t have any descriptions.
For long or complicated quizzes that require your user to put some thought into their answers, a “Back” and “Submit” button is a good idea because it gives the quiz taker more control over their quiz answers.
Final Design Touches
Let’s do a final bit of clean up on the design.
Click the heading in the Canvas of any one of your “Multi Image” frames and mouse over to the right-hand “Settings” bar.
We’re going to select a desired font and edit font size.
Most importantly, we want to select “Apply to all existing headings” so that we can easily implement a uniform design across all headings in this Shopify quiz experience.
Setup Lead Generation Form Frame
Now, let’s set up our “Form” frame.
Navigate to the right-hand toolbar and tab over to “Add Components”.
In the “Static Components” field, we have popular items to add to your frames such as buttons, images, paragraphs, and horizontal lines & spacers.
Drag your desired elements into the Canvas to make your quiz experience your own.
Once your form is designed according to your specifications, we can configure our “Submit” button.
Select your button in the experience Canvas and tab into “Settings” in the right-hand toolbar.
Here, we can choose where the button will take our quiz taker with the “Target Frame” dropdown menu.
Since our form is the last frame in our Shopify quiz experience, we are going to set our target frame to “Prize,” which will send our quiz taker to their outfit recommendation.
Configure Your Success Frames
To configure your Success Frames (prizes), we need to click into the prizes tab and select “New.”
Here, we will name our success frame in accordance with the quiz map we made earlier.
Since this is a quiz and not an instant win game, we do not want to limit the amount of times a quiz taker can reach the success frame, so we will select “Unlimited” for Number of Prizes.
We can also add a fun confetti effect if you’d like.
Repeat this step as needed (We’ll be creating 12 Success Frames/Prizes).
Once completed, your list of prizes should look something like this.
Map Quiz Answers
Now let’s map our quiz answers to the Success Frames we just created.
Click back into the Studio, hover over your first question frame, and click the “Logic Paths” icon that will appear to the right of your selected frame.
Since our first question’s answers will both lead to our next question, we can set both logic paths to target our 2nd question frame “What kind of vibe are you going for?”
On our second question’s logic path list, things may look a little complicated, but don’t worry!
Since all of our answers on the second question lead to our 3rd frame, we can use the “Set Target Frame for ALL PATHS” function on the top to send all logic paths to our 3rd question frame.
Now here is the satisfying part – connecting your final question frame’s answers to each success frame.
If you named your success frames according to your answer combinations, it’s going to be super easy to match up the right success frame to the right logic path.
For example, our first logic path is:
- Answer to question 1: Formal
- Answer to question 2: Edgy
- Answer to question 3: Warm
So we’re going to set the target success frame to “Formal, Edgy, Warm.”
Repeat this process as needed until you’ve connected all of your success frames.
Don’t forget to test out your success frames in “Preview Mode” to make sure you mapped your logic paths correctly!
Publishing Your Experience
Once you’re ready to publish your experiences, click into the “Confirm” section.
Here, you can choose if you’d like your quiz to be a popup or iFramed into your Shopify store.
If you do not choose “popup” or “iFrame” for your quiz, the default action will be to send your quiz taker to a new browser tab to take your quiz.
At the time of writing this How-to article, the Odicci platform requires an image to be uploaded for each prize.
You may notice some warnings on the confirm page related to CTA buttons, Privacy policy, and connecting email templates to prizes. These are all best practices but not mandatory.
Once you’ve selected how you’d like to display your quiz on your Shopify store, you’re ready to publish your Odicci quiz experience.
You just created your first product recommendation quiz for your Shopify store!
