Creating a personalized and engaging quiz experience can significantly enhance user satisfaction and conversion rates. With Lantern's robust features, such as Dynamic Content Blocks, metafield integration, CSS customization, and dynamic data reuse, you can tailor every aspect of your quiz results page to reflect the unique preferences and behaviors of each quiz-taker. This guide explores these features in depth, providing you with the tools to craft a truly customized and interactive user experience.
Dynamic content blocks
Dynamic Content Blocks allow you to customize the quiz results page by displaying tailored content based on quiz answers. You can include text, images, videos, buttons, and personalized product recommendations, all aligned with the individual profiles of your quiz-takers.
Why Use Dynamic Content Blocks?
They provide more control over the results page, allowing you to:
Display different content blocks based on specific customer profiles or quiz paths.
Separate results into categories (e.g., AM/PM routines).
Promote specific add-on products strategically, independent of the highest match score.
For more detailed guidance, see our full articles on Dynamic Product Blocks for Product Recommendations and Customizing Results with Dynamic Content Blocks.
Adding answer descriptions using metafields
Integrating Shopify's metafields with the Lantern app allows you to add short, engaging product descriptions directly to your quiz results, enhancing the interactivity and personalization of your online store. Here’s how it appears when you utilize product metafields in your Lantern quizzes.
For more details on adding short descriptions using product metafields, check out the full guide here.
Basic CSS customization ideas
Please note: these customization ideas will require you to add a bit of CSS to your quiz which is a feature available on our paid plans.
You can edit the CSS by clicking on the green button titled "Edit Quiz Flow CSS", which will open the CSS Editor where you can write your custom code.
1. Centering the price and product title: Can be done with the following CSS code.
.product-details {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.product-title {
width: 100%;
text-align: center;
}
And here is the result:
2. Making the product title larger: This can be done using the following CSS snippet.
.product-title {
font-size: 2rem;
line-height: 140%;
}
3. Making the price smaller: This can be done using the following CSS snippet.
.product-price {
font-size: 0.8rem;
line-height: 140%;
}
Here’s the result for these two changes:
4. Reducing/Increasing button size: To change the size of the buttons on this page, all you need to do is reduce or increase the size of the text inside the buttons. In the following CSS snippet, we target the add to cart button and make this larger:
.add-to-cart-button {
font-size: 1.5rem;
}
You can also target the View More button with the following selector .button-view-more
Please note: Whenever changing the size of fonts, we recommend that you always use rem, instead of pixels as these will help your look scale much better with different screen sizes.
Dynamically reuse customer input data in questions
Incorporating dynamic data reuse into your quizzes allows for a highly personalized user experience. By capturing user information, such as a first name, and creating property IDs for each question, you can reference this data throughout the quiz to create a more engaging interaction. For example, if you capture a user's first name, you can greet them later in the quiz.
For more information, you can view the complete guide here.
By applying these customization options to your Lantern Results Page, you can create a more personalized and engaging user experience. This ensures that every interaction feels tailored and relevant. For any help or questions, feel free to reach out to our support team.