Setting Up a Digioh Results Page

Open your Digioh Quiz in the box editor > in the left menu open Box Settings & select Quiz Settings.

You can also navigate to the quiz settings by clicking the three dots in the main box dashboard.

Go to the “Results” tab to begin configuring the results page. Under “Result Page Type” select “Digioh Results Page”.

Now you can begin setting up how your result page will be formatted.

1. 1. Max Results: The maximum number of products to recommend.
   2. Items Per Row: The number of products to show per row on the result page.
   3. Results Buttons CTA: Button “Call to Action” for each product in your results page.
   4. Max Page Width: Maximum width of your results page.
   5. Max Item Width: On a results page, maximum width of each product card.
   6. Product Button Action: For non-Shopify stores, we support only “view product details” which uses the PRQ:URL from the product data sheet. For Shopify stores, you can use the “add to cart”.
   7. Product Button Text: Customize your “Call to Action” button text.
   8. Add ALL To Cart Button (Only Shopify): Show a button at the bottom of the page that adds all items to the cart in a single click.
   9. Product Descriptions: Show the product description underneath the product title for each item.
   10. Hero Product: On a results page, display the first recommended product larger and on its own row.
   11. Out of Stock: On a results page, don’t include out of stock items in the recommendations.
   12. Results Order: (optional) Set fields from product data to sort results. Comma separated.
   13. Results Redirect Delay: Configure the pause before redirecting to the results page (default: 2 seconds).
   14. Price Format: Display your product prices in a specific currency and format.
   15. Reviews: Render results in your store via a redirect, or in the quiz itself.
   16. Fallback Results Type: Fallback options for what to display when no products are recommended.
   17. Results Page URL Query: This is an advanced option if you want to pass any data collected in the quiz as a URL parameters
   18. Results Page Header HTML: This is the header text that will appear on your results page. You can use any field that you collect throughout the quiz to display here as well. (ex. [NAME] or [CUSTOM_3])
   19. Results Page CSS: This is where you can edit the CSS for how your result page looks.

Here’s a root CSS you can use to get an initial look of the page and edit its components:

:root {
/* High Level Settings */
–results-page-font-family: “Open Sans”, sans-serif;
/* The styling above will set the font family for the whole page.
You can then edit individual section font families as needed */
–product-card-box-shadow-color: transparent;
–product-card-box-shadow-spread: 0;

/* Header HTML Settings */
–results-page-header-font-family: “Open Sans”, sans-serif;
–results-page-header-font-weight: normal;
–results-page-header-text-color: #333333;

/* Sub Hero Content Settings */
–optional-subhero-content-font-size: 22px;
–optional-subhero-content-text-color: #333333;
–optional-subhero-content-font-weight: normal;
–optional-subhero-content-font-family: “Open Sans”, sans-serif;

/* Hero Product Card Settings */
–product-feature-title-font-size: 30px;
–product-feature-description-font-size: 18px;
–product-feature-image-max-height: 100%;
–product-feature-image-fit-container: cover;

/* Product Title Settings */
–product-title-font-size: 20px;
–product-title-font-family: “Open Sans”, sans-serif;
–product-title-color: #333333;

/* Product Price Settings */
–product-price-font-size: 14px;
–product-price-font-weight: normal;
–product-price-text-color: #333333;

/* Product Card Button */
–product-button-text-color: #333333;
–product-button-bg-color: #e8a798;
–product-button-border-color: #e8a798;
–product-button-border-width: 1px;
–product-button-border-radius: 4px;
–product-button-hover-text-color: #333333;
–product-button-hover-bg-color: #ece1d3;
–product-button-hover-border-color: #ece1d3;
–product-button-text-transform: uppercase;
–product-button-font-size: 16px;
–product-button-font-weight: normal;
–product-button-font-family: “Open Sans”, sans-serif;

/* Retake Quiz Button */
–retake-quiz-button-background-color: transparent;
–retake-quiz-button-text-color: #333333;
–retake-quiz-button-border-width: 0px;
–retake-quiz-button-border-radius: 0;
–retake-quiz-button-text-transform: uppercase;
–retake-quiz-button-font-weight: normal;
–retake-quiz-button-font-size: 16px;
–retake-quiz-button-font-family: “Open Sans”, sans-serif;
–retake-quiz-button-hover-text-color: black;
–retake-quiz-button-hover-bg-color: transparent;
–retake-quiz-button-hover-border-color: transparent;

/* Add All to Cart Button */
–add-all-to-cart-button-background-color: #e8a798;
–add-all-to-cart-button-text-color: #333333;
–add-all-to-cart-button-border-color: #e8a798;
–add-all-to-cart-button-border-width: 2px;
–add-all-to-cart-button-border-radius: 4px;
–add-all-to-cart-button-text-transform: uppercase;
–add-all-to-cart-button-font-weight: normal;
–add-all-to-cart-button-font-family: “Open Sans”, sans-serif;
–add-all-to-cart-button-font-size: 16px;
–add-all-to-cart-button-hover-text-color: #333333;
–add-all-to-cart-button-hover-bg-color: #ece1d3;
–add-all-to-cart-button-hover-border-color: #ece1d3;
}

To preview how your result page will look, click the “Preview Results” button on the bottom right. This will open a new page of how your results page will display.

Once done editing be sure to click “Save” or “Save and Publish Live”.