Customize the quiz design

You are here:
< All Topics

You can edit the quiz design to match your store’s look & feel. Open your quiz and navigate to the “Quiz Design” tab.

 

You can choose from any of our pre-designed themes or create your own. All themes that you’ve created or edited will appear in the “My Themes” tab.

To edit a theme, click on the “theme options” button and a dropdown will appear. Click on the “Edit” option.

Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.

 

Add your custom CSS

In the theme editor, click on the “add” button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz.

Your developer will be able to add custom CSS which will override the default styles of the quiz.

You can add specificity to your CSS rules, so that they are applied only to the quiz or a certain question. For example:

#quiz  p {color: red;}

will change the color of all the paragraphs in the quiz to red.

#question-AbC7Zde  p {color: red;}

will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question id. You can find a specific question ID in Quiz Builder -> Question setttings.

Here are a few popular CSS selectors for elements in the quiz:

/* Hide Progress Bar in the footer */
.lq-progress-box{
  display: none;
}

/* Change the styles of the choices */
.widget li.lq-choice, li.lq-choice{
  /* your CSS rules go here */
}

/* Change the styles of the picture choices */
.widget .lq-images li.lq-choice, .lq-images li.lq-choice{
  /* your CSS rules go here */
}

/* Place the footer bar at the top, for more visibility */
.widget .lq-footer, .lq-footer{
  position: absolute;
  width: 100%;
  top: 0;
  margin: 0;
}

/* Make "Back" and "Next" arrows point left and right */
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* Adding a custom font, you'll have to host the font in your server */
@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
  font-family: Morion, serif;
}

NOTE: If your fonts are hosted within your Shopify store, they'll appear as a "private" fonts or hosted within a site restricted for us. If you want to use that font it'd have to be hosted elsewhere, and that way you could implement them within the quiz.

/* Muliptle choice questions: change the selected options background */
 li.lq-selected .lq-letter {
background-color: gray;
}  

/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
   color: black;
}

/* Change the background of the Add to Cart button */
.lq-checkout {
background-color: #ff7028;
}

/* Change the background of the singluar Add to cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

/* this hides the product variants */
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}


/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}


/* Adds quiz border */

.lq-quiz {
border-style: solid;
border-color: red;
}


/* Changes Results Page Single Product Block Width */
.results .lq-results .lq-noslot ul li, .results .lq-results .lq-slot ul li{
max-width: 50%;
}


/* Change Picture Choices to Icons */

.builder-container-preview .lq-images li, .widget .lq-images li{
max-width: none !important;
}

.builder-container-preview .lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}

NOTE: If you're using an older theme, or have issues with your rules not being applied you may need to add and !important at the end of every rule or a .lq-quiz for the changes to be applied ot the quiz.
Fe example: .lq-quiz p {color: red !important;}

Upload a Google Font

To upload a custom Google Font to the quiz, first navigate to the font’s page.

For example: https://fonts.google.com/specimen/Quicksand

Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

Add custom CSS 

To add a Google font to the quiz elements (h1-h6, p) use this sample code:

@import url(‘https://fonts.googleapis.com/css2?family=Quicksand:[email protected];700&display=swap‘);

 h1, h2, h3, h4, h5, h6, p, button,  div{
font-family: ‘Quicksand’, sans-serif ;
}

Navigate to the Quiz Design section of the app and paste the code into the custom CSS field:

Table of Contents

Install the app and get started today

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