How to create Dynamic Results Pages
With Dynamic Results Pages you can customize your results page content based on your customers’ responses.
You make your results page dynamic by creating content blocks and applying conditional logic to those blocks in order to show or hide them.
Types of blocks
Blocks are individual elements that include content. You can create the following blocks:
This block lets you add a title or heading in your results page.
Content blocks can be used to add plain or formatted text. They’re useful to write an explanation about why the following products are the perfect match for your customer.
If you need to further customize your results page, this block type can be used to add raw HTML code. You can also add
<style> tags with CSS code.
With this block you can add an image to your results page.
PRODUCTS LIST BLOCK
This block will show a list of the best matching products (read more about how our recommendation algorithm works). You can set the maximum number of products to be recommended (from 1 to 15):
PRODUCTS SLOTS BLOCK
This block can be used to recommend bundles of products of different categories that combine well with each other and are of more value to the user if sold together.
Example 1: a skincare store that wants to recommend a skincare routine composed of a cleanser, a toner, a serum and a moisturizer.
Example 2: an electric bike store that recommends bicycles + accessories (trolley for kids, helmet…)
Example 3: a haircare company that wants to sell a complete haircare routine: shampoo, oil, conditioner…
To add slots to this block, click on the “block settings” (little wrench icon).
For the Slots Block to work correctly you need to:
- Create collections in your Shopify store that group products of those categories
- Link those collections in the “Slots” block, in the Results Page settings
- Link products from those collections to the corresponding choices in the quiz
Make sure you link at least one collection in the “included collections” input. If not, this slot won’t be displayed because no product categories will be linked to it.
You can add or remove slots by clicking the “more options” button (three dots):
This is how your quiz results can look like when arranged into Slots:
Adding Conditional Logic to the blocks
Conditional Logic is like having a visual interface for creating IF-THEN-ELSE conditional statements, with the advantage of not needing to know how to code.
To add conditional logic to a block, click on the “block logic” button:
Conditional Logic lets you show or hide a block based on what your customers have responded to your quiz.
You can create multiple Conditional Logic rules for one single block using AND and OR statements.
You can add other (OR) conditional rules by clicking the plus sign at the bottom of the section:
You remove conditional rules by clicking the trash can button:
Tweaking the Results Page settings
Open the Results Page settings by clicking on the little “cog” icon on the top. This should display most of the settings you need to configure the quiz to your liking. For advanced customization, you can click on the “show advanced settings” on the bottom:
Most of the settings are self explanatory, but here are a few which might need clarification:
- Group product variants. If activated, all variants will be bundled in a single product and your customer will be able to select the variant from a dropdown. If deactivated, variants will be displayed separately.
- “Add to Cart” vs. “Link to Product”. If you want your customers to be able to add products to the cart, choose the first option. If you want to link to the product or if you’re using subscription apps like ReCharge, ReCart or Bold, choose the second one.
- “Proceed to Cart” vs. “Proceed to Checkout”. If you want to skip the cart and go to the checkout directly, choose the second option. This option is the only one which is possible in headless commerce solutions when you insert your quiz in third party websites or blogs.
Multiple Results Pages
This feature is useful when you want to show completely different results pages depending on what your customers’ responses to your quiz.
To activate this option, go to the Results Page Settings > Show Advanced Settings > Activate Multiple Results Pages.
This will open a sidebar where you will be able to add, delete and edit multiple results pages:
If no Conditional Logic is added to point to secondary default pages, after taking the quiz your customers will be taken to the default results page. You can add Conditional Logic in the Quiz Builder to point to other results pages:
Even though we have a lot of settings to make it very easy to change the look and feel and the content of the Results Page, there are times that you want to harness the power of the Product Recommendation Quiz but want to:
- add custom behavior, texts or logic
- display custom product recommendations
- forward to any particular page on your store
We made it very easy for developers to tap into the quiz response and get all the information they need: individual answers to questions, triggered tags and recommended products.
Try adding the following code:
Now, when you complete the quiz and go to the Results Page, your browser’s console will show you a preview of all the Vue.js functions and properties that are available in the
Other interesting properties and functions
/* List of all the quiz questions (including the responded values) */ console.log(prq.quiz.attributes.slides.data); /* List contents of the results page, blocks, products, etc. */ console.log(prq.currentResponse.attributes.selected_result.data.attributes); /* List recommended products */ console.log(prq.currentResponse.attributes.recommended_products); /* adds all the products to cart automatically */ prq.addAllToCart(); /* proceeds to cart/checkout automatically */ prq.checkout(); /* retake quiz */ prq.retakeQuiz(); /* close quiz */ prq.closeQuiz(); /* get the slide/question value by passing the slide ID */ prq.getSlideValue(slideId);
Trigger the prq functions from an element in the results page
You can do it two ways: Create an element in the result page and add the
<!-- In Result page in a HTML block --> <!-- add a HTML element such as --> <a id="special_retake_quiz">Click here to retake the quiz</a>
onclick event first and then inject it in the results page.
You can display the information you have gathered throughout the quiz and mash it up however you want. For example you could create a body mass index calculator the following way.
<!-- In Result page in a HTML block --> <!-- add an HTML element such as --> <div id="body_mass_index_calculation"></div>
You can also load jQuery this way.