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.
Example: To add an HTML link button to the Results Page, add an HTML block and copy the following code:
<a class="button" href="https://example.com" target="_blank" style="color:white; text-decoration:none; background-color: black; display: block; border-radius: 20px; width:400px; height:50px; text-align:center; padding:10px">THIS IS A BUTTON</a>
The button can also be styled with custom CSS code in the Quiz Design tab. Selector to be used is .lq-results a.button .
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):
The result page will recommend a maximum of 27 products.
In the Product Block Settings, you can:
- add a Product Block Title,
- add a Products Description,
- limit the number of recommended products,
- choose to hide the block when no products are recommended (otherwise, a default message will be displayed).
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. Check this article to learn more about Block Logic and see an example.
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 “Advanced” tab:
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 that is possible in headless commerce solutions when you insert your quiz in third-party websites or blogs.
Show Product Reviews (Shopify & WooCommerce)
You can choose which Product properties you want to show on the Results Page. You can add a product description, price, vendor or you can even show a product review. To do it, open the Results Page Settings -> Basic > Individual Product Setttings and enable “Show Reviews”.
After activating the setting, a manual product sync should be triggered to sync the reviews. Learn how to trigger a manual sync here.
We currently support the WooCommerce Reviews and these Reviews Apps for Shopify:
Change Checkout Settings
To change Checkout Settings navigate to the Results Page tab and open the Results Page settings.
Under Basic -> Checkout Settings, you’ll have a choice to either to:
- Add product to cart
Then, you can choose whether the customer should proceed to the cart or straight to checkout.
- Link to product
The “view product” link will take the customer directly to the product page without adding to the cart.
Don’t show out-of-stock products
You can exclude all out-of-stock items from your recommendations in the Results Page settings.
Navigate to Results Page Settings -> Advanced -> Recommendation Settings -> Show Unavailable products.
Don’t show duplicate products
If you have more than one product/slot block, you can exclude all duplicate items from your recommendations in the Results Page settings.
Navigate to Results Page Settings -> Advanced -> Recommendation Settings and deactivate Allow duplicated recommendations.
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 Jump 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 Jump 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
- how to trigger the prq functions from an element in the results page
- how to insert calculations into the quiz results page
Product Metafields / Attributes
Some stores use Metafields (Shopify) or Attributes (Woocommerce) to display certain product properties.
For example, in Germany it is mandatory to display the grundpreis or “per 100ml price” for cosmetic products. Ecommerce platforms don’t show this by default, but metafields /attributes let you display it.
If you wish to import product metafields / attributes from your store into Product Recommendation Quiz in order to display them in your quiz’s results page, check this article.