Setting up your results page:
After uploading your PRQ sheet or connecting your store to Shopify and importing the products, you are ready to start building the results page. On your quiz settings, you will have to select the Digioh results page under “Results”:
You will see the different settings for the page below, and each has an explanation next to it.
Editing the results page:
In the below portion of the results page editor, you will find our Custom CSS section. Here you can paste our root CSS and adjust as needed.
Below you will find details on the root CSS to use and how to tweak your results page:
Styling Results CSS
- Copy and paste the :root settings below into the Custom CSS section. These are set with some standard best practice or example changes.
- Update the CSS with your desired settings and feel free to delete lines that are not needed. You can always find these variables in the View Custom CSS Variables Reference dropdown at the bottom of the results setting if needed:
Anything in the code that is within /* */ brackets is a CSS Comment that will not affect the code. It is ok to leave in, but can be safely removed.
Root CSS:
: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;
}