Page Layout lets you put everything on your Results page in the order you want. For example, you can show the email sign-up right under the headline, place a content block between the headline and the product recommendations, or show two content blocks side by side.
Change the order
Open your quiz in the Quiz Builder.
Click Results Page in the left-hand side menu.
In the menu on the right, open Page Layout.
Drag a section by the handle (the six dots) to its new place. The preview updates as you go.
Publish your quiz so the new order goes live.
Your quiz keeps its current Results page until you change something in Page Layout. Your customers see the same order on desktop and on phones.
What you can move
Start over link: lets customers take the quiz again.
Headline and subheadline: the title and text above your recommendations.
Product recommendations: the products matched to the customer's answers.
View more button: shows more matching products.
Add all to cart button: adds all recommended products to the cart at once.
Email sign-up: an optional form where customers can leave their email after seeing their results. Find out more in Email sign-up on the Results page.
Each content block: every Dynamic Content Block on your Results page appears on its own in the list, so you can place each one wherever you want. Find out more about content blocks in Dynamic Content Blocks.
A section that's switched off is shown in the list with a note saying where to turn it on. When Hide default recommendations is on, the headline, product recommendations and their buttons stay hidden wherever you put them.
Content block widths
Each content block in the list has a Desktop width and a Mobile width: Full, 1/2, 1/3 or 1/4. Content blocks that are next to each other in the list share a row. For example, two content blocks set to 1/2 sit side by side, and three set to 1/3 fill one row.
These widths replace the Top Content Blocks Columns and Bottom Content Blocks Columns settings once you change the order. The first time you open Page Layout, each content block already has the width its columns setting gave it, so nothing moves until you change it.
Good to know
Once you change the order, the whole Results page uses the Bottom Section Width from General Design. The Top Section Width no longer applies.
The list also decides where the Add all to cart button appears, so the button's own position setting no longer applies.
A content block you add later appears next to your other content blocks. Drag it to the place you want.
Go back to the original order
Click Reset to the default order under the list. Your Results page goes back to how it looked before you changed the order.
Custom CSS
Each section keeps its usual classes. Once you change the order, the .results-top-section and .results-bottom-section wrappers are no longer used, so check any CSS that targets them. Instead, the page is wrapped in .results-layout, each row of content blocks has the class .results-content-blocks, and each content block has a data-block-id attribute with its id. Find out how to add CSS in How to add custom CSS to your quiz.
Using the Lantern assistant
If you build quizzes through the Lantern assistant in Claude or another AI tool, ask it to reorder your Results page, for example "put the email sign-up under the headline and show the two content blocks side by side".
If you have any questions, contact our support team and we'll be happy to help!