How to Build a Shopify Quiz Landing Page (Step-by-Step)

Key takeaways

• A Shopify quiz landing page exists to start and finish a quiz. It beats a homepage embed on message match, exit paths, and having a clean URL you can point campaigns at.
• Above the fold: a hook headline naming the payoff, a one-line subhead, one start button, and a trust strip. Cut the nav, the footer, and every competing offer.
• Build it as an alternate page template with a stripped layout file that omits the header and footer section groups.
• Fire quiz_start, question_complete, quiz_complete, result_view, and add_to_cart through a custom pixel, and judge the page on start rate, completion, result-to-cart, and revenue per session.
• An app-rendered quiz widget puts a script in front of your hero, which is the wrong tradeoff on a page whose only job is to load fast and start.

A Shopify quiz landing page is not the same thing as a quiz. The quiz is the logic that turns answers into a recommendation. The landing page is the container: the headline that gets someone to press Start, the layout that keeps them moving, and the results section that turns a recommendation into a cart.

This guide is about the container: the page build, the template, the pacing, the traffic, the speed, and the tracking. For the quiz logic itself, including question design, answer-to-product mapping, and email capture timing, read our guide to the Shopify quiz funnel.

Why you can trust us

We have been in the Shopify space for over four years and have worked with hundreds of Shopify brands on their storefronts. We build Fudge, an AI storefront editor with a 5.0 rating on the Shopify App Store and Built for Shopify status, so we work directly on the theme layer these pages live on.

Why a dedicated quiz landing page beats an embed

Most stores put their quiz somewhere convenient: a homepage section, a menu link, a block halfway down a product page. That is fine for organic browsers who stumble into it. It is the wrong host for paid traffic.

Message match. Someone who clicked “Find your shade in 60 seconds” should land on a page that says “Find your shade in 60 seconds.” Google’s guidance for advertisers is to send clicks to a page that closely matches the ad and mirrors its call to action.¹ A homepage cannot do that for five ad angles at once. A dedicated page can, and you can run one per angle.

No navigation leaks. An embed sits inside a full storefront. The header offers a menu, a search icon, and a cart, and every one of those is an exit that is not the quiz.

One job per page. A product page sells that product. A homepage introduces a brand. A quiz landing page gets one action started, which makes it easier to write, easier to test, and easier to read a number off.

A clean URL. /pages/find-your-shade is a campaign destination. Point ads at it, put it in email, retarget everyone who hit it, and read it as its own row in analytics.

Our guide on how to create a landing page in Shopify covers the general setup. The rest of this guide is the quiz-specific parts.

What goes above the fold

The fold has one job: get a tap on Start. Everything else is support.

The hook headline states the payoff, not the mechanic. “Take our quiz” describes work you are asking someone to do. “Find your shade in 60 seconds” describes what they get and how little it costs. Name the outcome, and where you can, name the time.

The subhead handles the objection. One line answering “how long is this” or “why trust the answer,” such as “Five questions, matched against every shade we make.”

One start CTA. A single high-contrast button wide enough to hit with a thumb. No secondary “browse all products” link beside it.

A trust strip. A thin row under the button: a star rating, a review count, or a returns line. It makes Start feel safe rather than selling anything. Only use numbers you can stand behind.

What to cut. The nav, the footer link farm, the announcement bar promoting a different sale, the newsletter popup, and the chat bubble that covers your CTA on mobile. Each competes with the only button that matters.

For above-the-fold layout patterns you can borrow, see our roundup of Shopify landing page examples.

If a section on this page does not help someone start or finish the quiz, delete it.

Building the quiz landing page in Shopify

Here is the build in six steps. Steps 1 and 2 are what separate a real landing page from a normal page with a quiz on it.

1. Create the page and give it an alternate template

Create the page under Online Store > Pages. The right-hand Online store card in the page editor has a Theme template dropdown listing your alternate page templates.

Shopify names alternate templates template-name.template-suffix.template-file-type, so a quiz template is templates/page.quiz.json.² An alternate template cannot replace the default page template, which is exactly what you want: normal pages keep the standard layout and only this one gets the stripped version. Preview it before assigning with /pages/find-your-shade?view=quiz.²

For the mechanics of creating the template file, see how to add a custom template in Shopify.

2. Strip the header and footer with an alternate layout

This is the part most guides skip. Hiding the header with CSS still downloads it. The cleaner route is a second layout file.

A JSON template accepts a top-level layout attribute naming the layout file to render it with, for example "full-width" to render layout/full-width.liquid.³ Set it to false for no layout at all.

{
  "layout": "landing",
  "sections": {
    "hero": { "type": "quiz-hero" },
    "quiz": { "type": "quiz" },
    "results": { "type": "quiz-results" }
  },
  "order": ["hero", "quiz", "results"]
}

Then create layout/landing.liquid as a copy of theme.liquid with the header and footer section groups removed. Themes render those groups with the sections Liquid tag, as in {% sections 'header-group' %}.⁴ Delete those two lines and keep everything else: content_for_header, your stylesheet links, and content_for_layout.

Leave a small logo in the hero so the page still reads as your brand. It just should not link to the homepage.

3. Build the hero as a real section

Headline, subhead, start button, trust strip, with schema settings so the headline is editable in the theme editor. You will be testing that headline, and you do not want a code deploy in the loop.

4. Drop in the quiz

The quiz is a multi-step form plus the logic that maps answers to products via tags, metafields, or scoring. That mapping is covered in the Shopify quiz funnel guide; treat the output here as a section that renders questions and emits a result.

At the page level, what matters is that the quiz renders in place. No modal, and no new URL per question. Both break the back button and both cost you a paint.

5. Render results into the same page

Swap the visible step rather than redirecting. A redirect to /pages/results throws away the page load you already paid for and puts a full navigation between intent and cart. Update the URL hash if you want the result to be shareable.

6. Pick the handle before you launch

The handle ends up in every ad, email, and report. Use the payoff, not the mechanic: /pages/find-your-shade reads better in an ad preview than /pages/quiz-2. Decide it before the first campaign goes live, because changing it later means a redirect and a round of broken ad links.

Progress and pacing

Pacing is a page design problem, not a quiz logic problem. Five decisions cover most of it.

Show progress. A bar or a “Question 2 of 5” counter, visible without scrolling. Without it the shopper cannot tell whether they are near the end, and that uncertainty is an abandon trigger.

One question per screen on mobile, always. Stacking all five on one page produces a form, and a form reads like work. One per screen reads like a conversation. On desktop, two is fine if the answers are short.

Size answers for the thumb. Answer options are the most-tapped elements on the page. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA,⁵ which is a floor, not a target. Full-width tiles in a single column beat a grid of small chips and sit in the natural thumb arc near the bottom of the screen. Our guide on mobile Shopify landing pages covers the wider mobile patterns.

Keep transitions fast. A 150 to 200 millisecond fade feels responsive. A half-second slide with a bounce feels slow by question four. Advance automatically on single-select questions so there is no separate Next tap.

Make the first question the easiest. The first answer is a commitment and it should cost nothing. Open low-stakes, then move to the questions that drive the recommendation. Never open with the email field.

The results section is still a landing page section

Once the last question is answered the page changes job, from qualifying to selling. Build it like a compact product page.

Lead with one recommendation card. Product image, name, price, one Add to cart. A grid recreates the choice problem the quiz just solved.

Write the why-this-fits copy. Two or three lines referencing the shopper’s actual answers: “You said combination skin and fragrance sensitivity, so this one is unscented and balances oil without stripping.” It is the difference between a recommendation and a random product.

Add to cart directly from the result. No click through to the product page first. The shopper has already read the pitch, and a navigation step between recommendation and cart is the most common way stores waste a completed quiz.

Offer exactly one secondary option. A single “also works for you” card below the primary gives the undecided shopper somewhere to go without reopening the catalogue.

Place social proof at the point of doubt. Not at the top of the results, where nobody has doubted anything yet. Put a review from a customer with the same profile directly under the Add to cart button.

Sending traffic to the quiz landing page

Match the ad to the page. The page headline should repeat the promise in the ad, ideally in the same words. Google recommends choosing a landing page that closely matches the ad and keywords and mirrors the ad’s call to action.¹ Three creative angles means three pages, or at minimum three headline variants.

Handle UTMs properly. Shopify’s marketing reports read the standard utm_source, utm_medium, utm_campaign, utm_term, and utm_content parameters and attribute sessions from them.⁶ The problem on a quiz page is that the interesting data sits in two places: the campaign that sent the visit, and the answers the shopper gave. You want both on the same row.

Read the UTM values from the URL on page load, keep them in session storage so they survive the step changes, then attach them to the events the quiz fires. Our guide on capturing UTM values in Shopify forms covers the JavaScript for reading and persisting them.

Retarget the starters who did not finish. They told you what they were looking for and stopped short, which makes them a sharper audience than a generic page visitor. Build it from quiz_start minus quiz_complete and send them back to the same URL with a “pick up where you left off” angle.

Speed and Core Web Vitals

This page sits at the top of a paid funnel, takes mobile traffic from social, and has one job: render a headline and a button fast enough that someone presses the button.

LCP is the number that matters. Largest Contentful Paint should be 2.5 seconds or less at the 75th percentile of page loads.⁷ Your LCP element is almost certainly the hero image or the headline. Right-size it, serve a modern format, and never lazy-load it.

INP matters once the quiz starts. Interaction to Next Paint should be 200 milliseconds or less at the 75th percentile.⁸ Every answer tap is an interaction, so five questions is five chances to feel sluggish.

Three things go wrong specifically on this page type.

The quiz script blocks the hero. If the quiz JavaScript parses before the headline paints, you have paid for a click and shown a blank screen. Render the hero in Liquid so it ships in the HTML, and defer everything the quiz needs.

Option images are heavier than they look. Five questions with six image options each is thirty images. Preload only the first question’s, lazy-load the rest, and keep the thumbnails small.

An app-rendered widget is the wrong tool here. A quiz app typically injects a script that fetches the quiz definition and renders it client side. On most pages that is a minor cost. On a page whose entire purpose is to load fast and start, it puts a network round trip and a client-side render in front of your primary content and tends to push the LCP element later.

Tracking the page

A quiz landing page is a funnel inside a single URL, so a page-level pageview tells you almost nothing. Fire an event at each step.

On the online store you publish custom events with Shopify.analytics.publish, and a web pixel subscribes to them and receives the payload in the event’s customData field.⁹ Prefix custom event names to avoid collisions with standard events.

// Fires on the Start button, with campaign context attached
Shopify.analytics.publish("quiz:quiz_start", {
  page_handle: "find-your-shade",
  utm_campaign: sessionStorage.getItem("utm_campaign"),
});

Include the question index and the chosen answer on question_complete. That one field turns a drop-off number into a diagnosis. Our guide on adding custom events in Shopify walks through writing and testing the pixel.

Four page-level metrics are worth watching:

• Start rate. Starts over landing page sessions. A pure measure of the fold. If it is low, the headline, the button, or the load time is the problem, and nothing downstream will save it.
• Completion rate. Completions over starts. A quiz design number, with the per-question drop-off pointing at the step to fix.
• Result-to-cart rate. Add to carts over result views. Measures the recommendation and the results section, not the quiz.
• Revenue per session. The number to compare against the collection page or PDP you would otherwise have sent that traffic to.

Read them in that order. A page can have an excellent completion rate and still lose money, because hardly anyone started.

What to test first

Test in funnel order, because a fix upstream changes every number downstream.

1. The hook headline. Largest audience, biggest effect. Test payoff framing against payoff plus time, or against a question. This is why the headline belongs in a theme editor setting rather than hard-coded.

2. Question count. Seven questions down to five is a real tradeoff: completion usually rises, recommendation precision may fall. Watch result-to-cart alongside completion so you catch a shorter quiz producing worse matches.

3. Gate placement. Whether the email ask sits before or after the result moves both capture rate and completion. The tradeoff is covered in the quiz funnel guide. Test it only after the headline is settled.

Two rules keep the results usable. Change one thing at a time. And decide the run length and the deciding metric before you start, because this page splits its traffic across several steps and the sample at add_to_cart is far smaller than the sample at quiz_start. Calling a winner on the thinnest number in the funnel is the fastest way to ship a change that does nothing.

Build options: app widget or native theme code

Two routes get you a quiz landing page.

A quiz app installs quickly and needs no developer: a builder UI, hosted logic, usually a hosted results page. The costs are a recurring fee, an extra script, a widget that may not match your theme, and a dependency, since uninstalling the app takes the quiz with it. Check the live App Store listing for current plans before committing, since pricing changes often.

Native theme code means the page, the layout, the quiz, and the results are Liquid, CSS, and JavaScript in your theme. No extra script, exact brand match, no monthly fee. The cost is that someone has to build it.

Fudge is an AI storefront editor that writes native theme code. You describe the page, and it writes the template, the layout, the sections, and the quiz JavaScript into your theme. Ask for “a quiz landing page at /pages/find-your-shade with no header or footer, a five-question shade finder, and a results card with add to cart,” then refine it by prompt.

Because the output is theme code rather than an app-rendered layer, there is no third-party quiz script in front of your hero, and the page survives uninstall. On a page whose whole argument is speed and message match, that is the tradeoff that matters.

FAQ