Every quiz in Phoenix is made of components. They are the building blocks of your quiz. For example, a page with a multiple-choice question might contain a Text component, a Multiple Choice component, a Back Button component, and a Skip Button component.

You can find every component in the Components panel on the right side of the editor. To add one, drag it onto the page where you want it. You can also click on the component to add it directly to the page you are currently on. Use the search bar at the top of the panel to find a component by name.

To see a quick description of any component, click the ⓘ icon next to its name.

Components are grouped into categories. The Essentials category is a shortcut to the components used most often, so you'll also find each of them in their own category below.

Tip: You can ask the AI agent to add and edit any component you need, with no need for manual configuration.

The Essentials category holds the components most quizzes need: Multiple Choice, Email, Heading, Text, Image, Next Button, Products, and Loading. Each one works exactly like its copy in its own category, explained below.

Use these components to ask shoppers questions and collect their answers.

Shows a question with a list of answers. Each answer can add points toward an outcome, or boost or hide certain products.

It can be single-select, which moves the shopper to the next page automatically, or multi-select, which needs a Next Button. You can also add a "None of the above" style answer that clears the shopper's other picks.

Works like Multiple Choice, but each answer is a picture or color swatch.

A single-line text box for short answers, like a first name.

You can collect the shopper's name early, then show it later with a {{name}} variable on other text components, question title, HTML blocks, and more. Like "Picks for Sam."

A multi-line text box for longer answers, like "Tell us about your skin concerns."

Lets shoppers hold and drag along a track. It has two modes:

Collects a number. You can set a minimum and maximum, and add a currency or unit, such as "years", as well as change the number formatting.

Shows a date picker, a time picker, or both. You can set limits, for example, to only allow shoppers who are 18 or older, or to block weekends.

Use these components to collect shoppers' contact details.

Collects an email address and checks that it's formatted correctly. It can also suggest fixes for common typos, like "gmial.com."

To add a marketing opt-in checkbox, turn it on in the component's Market Consent setting under the Validation settings.

Collects a phone number, with a country selector. It has its own SMS opt-in checkbox, which you can turn on in its Market Consent setting. You can also change the phone format.

Use these components to show information on a page.

One line of large title text, like "Your results."

Formatted paragraphs with bold text, links, lists, and more. You can insert a shopper's answers with variables, like "Thanks, {{name}}!"

Adds a picture with alt text. You can add a caption and rounded corners, and set the image to open larger or link to another page when clicked. You can also show a different image on mobile.

Embeds a video from YouTube, Vimeo, Wistia, or Loom, or a direct video file URL. You can change autoplay settings, change the aspect ratio, have it loop, and more.

Use these components to turn quiz results into sales.

Shows product cards with images, prices, variant pickers, and an Add to Cart button. It can choose which products to show in four ways:

Reveals a discount code voucher, for example, as a reward for finishing the quiz or submitting the email opt-in. This will use the discount code you set up by going to Settings -> Discounts. The code syncs directly to Shopify, and the shopper can copy it with one click.

Use our AI solutions to personalize the quiz for each shopper.

AI-written text based on the shopper's answers, like a personalized summary on the results page. You write the instructions for the AI and add fallback text to be shown if the AI fails to generate the text somehow. You can give it details such as the tone and length, and it even supports HTML.

Asks the shopper for a selfie or another photo, then reads it with AI. It can return a written description, specific values (like "oiliness: high"), or both. You can then use those values in your logic and product recommendations.

You can require the shopper's consent and give them an option to skip.

Click on Edit setup to add all the necessary parameters and what the image analysis should return.

Use these components to arrange other components on a page.

A vertical container. Everything inside sits in rows, top to bottom, with consistent spacing.

A horizontal container. Everything inside sits side by side and wraps on small screens.

Rows and columns together, with preset layouts like Sidebar + Main or 3 Columns.

Spacer

Adds vertical space between components. It can also show a line that is solid, dashed, or dotted, and you can adjust options like its size and color.

Use these components to move shoppers through your quiz.

Moves the shopper to the next page. Before it does, it checks required fields and saves the shopper's answers and points. It also follows any jump rules you've set.

Single-select questions don't need a Next Button, because they move forward as soon as the shopper picks an answer.

You can customize its label and design.

Returns the shopper to the previous page. You can choose whether or not you want it to be added to all pages automatically, or just the one you are working on. You can change its label and design as well.

A small "Skip" button that moves forward without an answer. It's ideal for optional questions and for email and photo pages. You can choose whether or not you want it to be added to all pages automatically, or just the one you are working on. You can change its label and design as well.

Shows shoppers how far along they are. You can choose whether or not you want it to be added to all pages automatically, or just the one you are working on. You can change its label and design as well.

Lets you add custom code for anything the other components can't do. It runs inside an iframe element, so be aware of its limitations.

Shows a picture that changes dynamically when a shopper selects or hovers over an answer in another question on the same page. You can add a default image and change its design settings such as the image width.

An animated spinner for pages like "Finding your match…"

Note: The Loading component doesn't move the page forward on its own. Add a Next Button or turn on Advance Automatically inside the page settings.

A customizable button that links to a URL or fires a custom event (available for the Plus and Enterprise plans only). It doesn't move the quiz forward.

Starts the quiz over from the beginning.

Link / URL

A standalone link to an outside page. You can set it up so that it opens on a new tab, the same tab, on its parent frame, or on the top frame.

Calculates a number from earlier answers, like a daily dose or a serving size. Write a formula using any number, slider, or choice answers (choices use their answer values), then show the result in your own richly formatted sentence - bold, headings, lists, links, and the same style controls as Text.

The Decimals setting rounds the saved value itself (what logic rules, other formulas, and your marketing tools receive), not just what is shown - leave it empty to keep full precision.

Turn off 'Show on page' to calculate silently and use the result elsewhere: in logic rules, in other formulas, or synced to your marketing tools.

Hidden calculators can live anywhere, but the end of the page keeps them out of your way.

Turns two answers into one value, like a shade name or a routine. Pick two things your quiz already knows (a question, a value read from a photo, a formula result, a points total or a number), and the editor lays out a grid: one row per answer of the first, one column per answer of the second. For a number, you set the span and chop it into pieces (single values or ranges) first. Then type the value for every cell, or paste the cells from a spreadsheet.

The table stays hidden on the page. Use its value in text as {{its key}}, in logic rules, in formulas (number tables), in product rules, and with your marketing tools. An optional fallback value covers a shopper who skipped one of the inputs.

No matter which component you add, you can adjust these settings: