How to create Dynamic Results Pages

You are here:
< All Topics

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.

Block Types

Blocks are individual elements that include content. You can create the following blocks:

HEADING BLOCK

This block lets you add a title or heading in your results page.

CONTENT BLOCK

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.

Content Block Product Recommendation Quiz

HTML BLOCK

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.

IMAGE BLOCK

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…

Check this video or this article to learn how to use the Product Slots Block.

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:

 

 

Conditional Logic / Block Logic

 

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:

 

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.

Change Checkout Settings: Add to Cart or View Product

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.

“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. 

How to change the Checkout Settings

How to add subscription products

“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:

Product Reviews by Shopify

Stamped Product Reviews & UGC

Judge.me Product Reviews

Rivyo Product Reviews

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:

Advanced Customization

Custom JavaScript Code

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.

To add your Custom JS Code, click on the Results Page Settings > Advanced Settings and scroll down to the Custom JavaScript section:

Try adding the following code:

console.log(prq);

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 prq scope:

Please check this article for more information on using JavaScript within the Product Recommendation Quiz app. In the article you’ll find:

  • 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.

 

Table of Contents

Install the app and get started today

Add a Product Recommendation Quiz on your store and start offering a personalized shopping experience