How to Add a Product Recommendation Quiz to Shopify Without an App

2026-09-27 · upselling

Why a Product Recommendation Quiz Lifts Average Order Value

A recommendation quiz does one job better than almost any other storefront element: it removes the guesswork that stops shoppers from buying. A customer who doesn't know whether they need the 30ml or the 100ml bottle, the trail shoe or the road shoe, tends to leave and "think about it." A quiz that asks four or five questions and then lands them on the exact right product shortens that decision to a few clicks.

The AOV lift comes from three places. First, quiz takers convert at a higher rate than browsers because they arrive at a product page with a reason to buy. Second, a well-built quiz can recommend a bundle or a higher-tier variant when the answers support it, which raises order value per transaction. Third, the quiz collects zero-party data — sizes, concerns, use cases — that you can attach to a Klaviyo or Shopify Email profile and use for follow-up.

The friction is usually the app. Quiz apps on the Shopify App Store typically charge a monthly fee that scales with quiz views, and many lock logic branching behind a paid tier. If you sell a small catalog and want to test the concept before paying, you can build this yourself with a free form tool and a theme section. That's what this guide covers.

What You Need Before You Start (No Paid Apps Required)

You need four things, and none of them require a recurring subscription:

A Shopify store on any plan with theme access. Online Store 2.0 themes (Dawn, Refresh, Craft, Studio, and most modern paid themes) support sections and app blocks. If you're on a vintage theme like Debut, you can still do this, but you'll edit theme.liquid directly instead of adding a section.
A free form builder that allows custom HTML embedding. Tally, Fillout, and Google Forms all work. Tally and Fillout give you conditional logic on free plans; Google Forms does not do branching well, so treat it as a last resort. Check current pricing and free-tier limits before committing, since these change.
A quiz destination. This is the key decision. You can send quiz takers to a filtered collection page, a single product page, or a custom landing page you build in Shopify. Filtered collections are the fastest to set up and work well when your answers map cleanly to tags.
Your product data organized. Before you write a single question, know your tags. If your products aren't tagged by the attributes you want to quiz on — skin type, activity, size range, scent family — tag them first in Shopify admin under Products.

One more thing worth setting up now: a UTM parameter convention. You'll want to distinguish quiz traffic from everything else in Shopify Analytics and Google Analytics 4. Use something like ?utm_source=quiz&utm_medium=onpage&utm_campaign=recommendation on every quiz destination link.

Step 1: Map Your Quiz Questions to Products and Collections

Work backwards. List the collections or products you want to be able to recommend, then ask what a shopper would need to tell you to land there.

If you sell skincare, your recommendable destinations might be: Oil Control, Hydration, Anti-Aging, and Sensitive. Your questions then become: "How does your skin feel by mid-afternoon?" (oily / dry / combination / reactive) and "What's your main concern?" (breakouts / fine lines / redness / dullness). Each answer combination maps to one collection.

Keep the quiz to four to six questions. Beyond six, completion rates drop and you're usually asking things that don't change the recommendation anyway.

A simple mapping table keeps you honest:

Question	Answer	Maps to collection	Shopify tag used
Skin feel by midday	Oily or shiny	Oil Control	`concern-oily`
Skin feel by midday	Tight or flaky	Hydration	`concern-dry`
Main concern	Fine lines	Anti-Aging	`concern-aging`
Main concern	Redness or stinging	Sensitive	`concern-sensitive`
Routine length	2 steps max	Oil Control, Hydration	`routine-minimal`

Notice the last row isn't a concern — it's a modifier. Modifiers are where AOV gains live, because they let you recommend a smaller starter set instead of a full regimen, which increases the chance of a first purchase. You can upsell on the thank-you page.

Step 2: Build the Quiz Form With a Free Form Tool

Open Tally or Fillout and create a new form. Build it as a multi-step form rather than one long page — one question per screen reads better on mobile, which is where most of your quiz traffic will be.

For each question, use radio buttons or image-choice blocks, not dropdowns. Radio buttons require one tap; dropdowns require two and hide the options.

Set up the logic now, before you style anything:

Add your first question with all answer options.
Add a hidden field or a calculation field that stores a score or a tag string. In Tally, this is a "Hidden field" with a default value; in Fillout, use a calculation variable.
On each answer option, set the hidden field to append the matching tag from your mapping table.
Add a final "Thank you" page with a button that links to your destination.

The cleanest destination for most stores is a collection URL with a tag filter:

https://yourstore.com/collections/all/skin-care?filter.p.tag=concern-dry

Shopify's native filter syntax uses filter.p.tag= for product tags on collection pages with filtering enabled. If your theme doesn't expose tag filters, use a dedicated collection per outcome instead — /collections/quiz-dry-skin — and link straight to it.

If your form tool supports passing answers as URL parameters, you can build one dynamic destination instead of several static ones. Tally's redirect-with-answers feature does this. Otherwise, use the form's conditional logic to show a different thank-you page per outcome.

Step 3: Embed the Quiz in a Shopify Theme Section

In your Shopify admin, go to Online Store → Themes → Edit code. Under Sections, click Add a new section and name it quiz.liquid.

Paste a minimal section shell:

<section class="quiz-section page-width">
  {% if section.settings.heading != blank %}
    <h2 class="quiz-section__heading">{{ section.settings.heading }}</h2>
  {% endif %}
  <div class="quiz-section__embed">
    {{ section.settings.embed_code }}
  </div>
</section>

{% schema %}
{
  "name": "Recommendation Quiz",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Find your match" },
    { "type": "html", "id": "embed_code", "label": "Embed code" }
  ],
  "presets": [{ "name": "Recommendation Quiz" }]
}
{% endschema %}

Save, then go to Online Store → Customize, open a page template (create a dedicated page.quiz template if you want the quiz on its own URL), and add the "Recommendation Quiz" section. Paste your form tool's embed snippet into the Embed code field. Tally and Fillout both provide an iframe or script embed; the iframe version is more reliable inside a Shopify section because it won't collide with theme JavaScript.

If you're on a vintage theme without sections, paste the embed snippet directly into the page content area using the Show HTML view in the page editor. It works, you just lose the drag-and-drop control.

Step 4: Route Answers to the Right Products With Logic

Routing is where most DIY quizzes fail. Two rules keep it working:

One outcome per answer combination. If a shopper can land in two collections, they'll land in neither. Resolve ties with a priority order — concern beats routine length, for example.
Always show a fallback. If no tag matches, send them to your bestsellers collection. Never send a quiz taker to an empty collection page.

If you want product-level recommendations rather than collection-level, use Shopify's product recommendation API on the destination page instead of hardcoding products in the quiz. The quiz routes to a collection; the collection page shows the products. This keeps the quiz maintainable when you add or retire SKUs.

For bundles, add a second link on the thank-you page: "Customers with your profile usually add this" pointing to a bundle product or a two-item collection. This is the single highest-leverage AOV addition in the whole build, and it costs you one extra button.

Step 5: Style the Quiz to Match Your Theme

An unstyled iframe looks like a foreign object and tanks trust. Do three things:

Set the iframe width to 100% and remove fixed height. Use your form tool's responsive embed option. If it forces a fixed pixel height, set min-height in your section CSS and let it scroll.
Match type and color. Pull your theme's heading font and primary button color from Customize → Theme settings → Typography and Colors, and apply the same hex values in your form tool's theme settings. Most free form tools have a theme editor for exactly this.
Match border radius and spacing. If your theme uses 8px rounded corners on buttons, use 8px in the form. Mismatched radii are the fastest way to make an embed look bolted on.

Add this to your section's CSS to kill the default iframe border:

.quiz-section__embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

Testing, Tracking, and Measuring the AOV Bump

Test on a real phone before you publish. Check that radio buttons are tappable, that the thank-you redirect works, and that every outcome lands on a collection with products in it. Run through every answer combination manually — with four questions and four options each, that's 256 paths, so instead test each tag outcome at least once by forcing the answers that produce it.

For tracking, add the UTM parameters from Step 1 to every destination link. Then in Shopify Analytics, compare:

Conversion rate for sessions containing utm_source=quiz versus all other sessions.
Average order value for the same two groups.
Quiz completion rate in your form tool's built-in analytics — if it's below 60%, your quiz is too long or your first question is too vague.

Give it two to three weeks and at least a few hundred quiz starts before drawing conclusions. A quiz that lifts conversion rate but not AOV is still a win; a quiz that lifts AOV but not conversion usually means you're recommending too expensive a product for the answers given.

Conclusion

A product recommendation quiz is one of the few storefront additions that improves both conversion rate and average order value, and you don't need a paid app to ship one. Map your questions to tags, build the form in a free tool with branching logic, embed it as a theme section, and route every outcome to a real collection. Track it with UTMs and give it a few weeks before you judge the results.

FAQ

Do I need Shopify Plus or a specific theme to do this? No. Any Shopify plan works, and any Online Store 2.0 theme supports custom sections. If you're on an older theme, you can still embed the form directly in a page's HTML editor — you just lose the section controls.

Will the quiz slow down my store? An iframe embed loads separately from your theme, so it won't block your main page render. Keep it on a dedicated page or below the fold on your homepage rather than in the header, and it won't affect your Core Web Vitals meaningfully.

What if my catalog is too small to need branching logic? If you sell fewer than about ten products, skip the branching and just ask two qualifying questions with a single recommendation at the end. The AOV logic still applies — recommend the larger size or the bundle — but you don't need a tag-filtered collection to route to.