Styling of your Shop Quiz
Styling can be done at any point in your quiz! You could establish styling options before editing your quiz so that your preview reflects your preferred colors and backgrounds, or you could wait until pages are created so that you can see how styling affects each of those pages in real time.
There's no wrong answer here - to get you started, let's check out the quiz's overall styling settings.
Table of Contents
To reach your quiz's styling settings, click on the "Quiz settings" tab next to the "Sections" tab on the main sidebar when editing a quiz.
Let's start with the layout of your quiz.
Currently, the layout section adjusts the width of your quiz. The default begins at 1084 px and can be adjusted to make the area your quiz displays in wider or smaller.
The default width doesn't have any issues with our quiz, but this is a useful setting to keep in mind as you fill your quiz's pages with content.
If you want the quiz to be an integral part of your website, you can inherit font family from destination website:
If you want to make sure that the font style on the buttons is consistent and fits the entire quiz, you can go to Quiz Settings → Typography and select the custom font family box for each button style.
1.3. Color & styles settings
When you enter color settings, you'll be able to set specific colors for each text and button element in your quiz, as well as the background color:
Moreover, in the Color & styles section of the Quiz settings, you can choose the colors of individual elements of your buttons, such as background, text and border:
Using RGB or hexadecimal codes, you can select specific colors to match your brand with a live preview of each element on the right side of the screen.
1.4. Background image
You can also add a background image to your quiz. We recommend going with a full-page embed if you add a background image so that your background image can make the best use of the space it takes up.
Once you upload a background image, you'll be able to adjust the image's position (if its aspect ratio doesn't fit within the quiz space), as well as adjusting the brightness and even disabling background images for mobile:
Since a separate background image for mobile and desktop can't be set, the option to disable the background image for mobile devices can be quite useful.
Other styling settings, including background color, will still appear on mobile. Background image sizes are recommended to be at least 2000px wide for image quality purposes.
We'll leave out a global background image for our quiz, but we might want to add a background image for a specific page, like the explainer page or a results page.
1.5. Styling options for individual pages
You can also add background images for individual pages. Let's go back to our explainer page, and take a look at how that's done.
By removing the image added as additional content, and adding a blank version as this page's background image, we can create a more appealing aesthetic for the explainer page.
Instead of adding a background image, you might want to change the background color instead.
Any styling changes made on a specific page won't affect any other pages. We recommend using the background image/color you'd like for the majority of the quiz in quiz settings, and setting up any exceptions inside the page's settings.
1.6. Images ratio
Images can be used in the answers, product blocks and additional content of shop quiz.
Images in the quiz must:
be a maximum of 25 MB in size.
can be vector images (such as SVG files)
We recommend optimizing images for display on the web to avoid any impacts on your quiz's loading speed.
One background image is currently used for both desktop and mobile quizzes.
Background image sizes are recommended to be at least 2000px wide for image quality purposes.
Answer ratios are used for image choice sections, which allow you to display images in the answer to a multiple choice question.
Product blocks let you customize how product images are displayed on your results pages. Each product block has separate layout settings, so you can mix different types on the same results page by adding multiple product blocks.
Additional content doesn't include pre-formatted layout options. Instead, you set the max width of the image you upload.
The max width of an image won't be able to exceed the max content width of your Shopify store. By default, this is set to 1084px in your quiz's global settings (under Layout), but you can set this to any custom amount.
For more information, jump ahead to the content width section in best practices!
2. Quiz example
First we want to make sure that our quiz looks exactly as we want, the colors are consistent and the general style does not differ from the unique style of our store.
When the list of questions is ready, we thought through the logic of the quiz and selected products that match each type of a customer, it's time to start the fun part - designing the quiz!
The best way to keep things under control is to set up general styling rules first.
Let’s start with text.
If you want the font to match your website's style, please open Typography section and select the box:
Once it's done, you can start designing. In this section you can modify the style of titles, headings, subheadings and any other forms of text that you will probably use in your quiz. You can choose the color, size and weight of each text as well as use a custom font.
It is best to choose 2 or 3 colors to dominate in the quiz. In my quiz it’s gonna be brown and blue:
Tips & tricks: If you are not sure exactly where you will use titles, headings, or any other form of text, try playing around with the quiz first! Create a question, add an opt-in and check where the specific text style will be needed.
Any questions? We've got the answers!
If you want your quiz to be even more adapted to the style of your store, play around with the colors of the answers. This time we will start with the "Colors & styles" section. Here you can edit the colors of the answer buttons as well as the thickness of their borders:
You can edit three answer's states: default state, hover state (your customers will see it by hovering over the answer) and selected state (your customers will see it by selecting the answer).
The next step is choosing the color of the text. Let's go back to the "Typography" section. Here you can edit the color, the weight and the size of the text visible on the answers' buttons for each state:
Tips & tricks: You can also start from the "Typography" section when e.g. your text is white like mine. This way you will be able to choose the exact color of the background on which the white text will look fabulous!
2.3. Products in results page
At the end of the quiz, your customers will see products selected especially for them.
To make sure the products are presented in the best possible way, let's move to the "Typography" section and scroll down to the "Products in results page".
Here you can go ahead and edit the color, the weight and the size of a product name & description and a price:
You will be able to edit the "Add to cart button" in the next step.
Tips & tricks: Since you cannot see a preview of a product description in the "Typography" section, you can go to a Default results page, add a product and check if there's anything you'd like to change in the description styling.
In your quiz you'll be using many types of buttons to allow your customers to go to the next question, skip one or add an item to cart. To make sure that customers don't miss any button and thus no action, let's think about the colors first.
In the "Colors & styles" section, you're able to choose all the colors of your buttons - background, text and borders:
In order to choose the weight of the buttons' text, you'll need to jump to the "Typography" section:
Tips & tricks: If you want to know where each button will be used, try to create 2 or 3 questions and add one product to the results page. This way you can use functions like Continue, Skip or Add to cart and see which buttons correspond to them.
My quiz topic is coffee, so I decided to put a background image that's related to it and adjust the colors of the whole quiz.
To make sure that I like the style and the overall impression, I created one multiple choice question:
That's it! If you have any questions or need any help with designing a quiz, let us know on chat. We're always happy to help!