# Styles

Style settings are divided into two sections. 

## Global

Global settings include options that impact variables found throughout the quiz, spanning most, if not all, pages.

### Typography

Typography allows you to choose a custom font for your quiz or inherit the font from your online store theme settings. Additionally, you have the option to select different fonts for the headings, body, and buttons within your quiz. 

<div align="left"><figure><img src="/files/0GFo63mPaPo7HqZkw9gK" alt="" width="246"><figcaption></figcaption></figure></div>

### Buttons

Customize the appearance of buttons for each question in your quiz.

<div align="left"><figure><img src="/files/xhthnhn6KouYDPi3b7oo" alt="" width="246"><figcaption></figcaption></figure></div>

### Input fields

Select the style for the field where your users input their desired information.

<div align="left"><figure><img src="/files/4r2gQwMpOU7g30POteE4" alt="" width="246"><figcaption></figcaption></figure></div>

### Tooltip

Customize the appearance and style of the tooltip (ⓘ) on the page.

<div align="left"><figure><img src="/files/t8jPYDbaJlvyl7CNN8ZF" alt="" width="246"><figcaption></figcaption></figure></div>

### Progress Bar

Customize the appearance of your progress bar as users navigate through your quiz.

{% hint style="info" %}
To utilize this feature, you must have logic set up with a predetermined number of questions.
{% endhint %}

<div align="left"><figure><img src="/files/qGKZ3ZvIZ7S2YTULVw2X" alt="" width="246"><figcaption></figcaption></figure></div>

### Custom CSS

Enhance your styling by incorporating custom CSS in addition to the provided settings here.

<div align="left"><figure><img src="/files/2W7lFB6eRu2bMMTdeSsF" alt="" width="246"><figcaption></figcaption></figure></div>

***

## Pages

Page settings are more specific to the four sections of content in your quiz: Introduction, Questions, Answers, and Results.

### Introduction

You can fine-tune the Introduction page settings at a more detailed level, including typography adjustments, button appearance, and diverse background styles.

<div align="left"><figure><img src="/files/NGlbV8wf6Abs7t5J3mdG" alt="" width="246"><figcaption></figcaption></figure></div>

### Questions

Similar to the settings for 'Introduction,' you have the ability to edit various elements of the question pages, such as the aesthetics of headings and subheadings, along with the optional bottom text.

<div align="left"><figure><img src="/files/0VAmMLMmT0p7TTCgsvfC" alt="" width="246"><figcaption></figcaption></figure></div>

### Answers

You'll encounter comparable editing options for 'Answers,' with the added capability to deactivate the transparent background.

<div align="left"><figure><img src="/files/xnfXlsO6Ic8qoRfn7rkb" alt="" width="246"><figcaption></figcaption></figure></div>

### Results

In the 'Results' settings, you'll find similar editing options for pages. The distinction lies in your ability to select specific action buttons to display at the conclusion of your quiz such as:

#### General Results Page

* Hide "Add to bag" button
* Hide "Add all to bag" button
* Hide "Retake Quiz" button

#### Products

* Make "Add to bag" button full width
* Show quantity picker
* Show description
* Show vendor
* Show money saved
* Show product title only
* Show product featured image instead of variant image
* Show product second image instead of variant image
* Show all product images
* Show variant name instead of product title
* Show variants as boxes
* Show variants as separate product items
* Hide variants
* Hide price
* Hide links from product image and title


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.quizkitapp.com/account-and-settings/quiz-builder/styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.