> ## Documentation Index
> Fetch the complete documentation index at: https://help-center.quizify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Design

> Customize quiz typography, buttons, animations, navigation, and sticky header settings.

From Design you can:

* Choose fonts for headings and body text
* Upload custom fonts (plan permitting)
* Style the progress bar, result loader, and buttons
* Set navigation mode and page animations
* Adjust sticky header offsets for your theme

## Navigation

1. Go to Shopify Admin → Apps → Quizify.
2. Open a quiz from Dashboard or My Quizzes (click Edit or create a new quiz).
3. In the Quiz Builder, click Design in the left icon menu.
4. Choose Typography, Appearance, or Settings.

## Page Overview

When Design is selected, you will see:

* Builder list (left) — Typography, Appearance, and Settings
* Center preview — Live preview of the quiz look and transitions
* Settings panel (right) — Edit the selected design options

## Typography

Choose the fonts used throughout your quiz.

Open Typography in the left list.

### Font Family

Choose separate fonts for headings and body text across your quiz. Each picker includes System fonts from the Quizify library and a My Fonts tab for custom uploads. After you upload a font, select it from My Fonts in either picker.

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Headings</td>
      <td>Select the font used for question titles and headings</td>
    </tr>

    <tr>
      <td>Body</td>
      <td>Select the font used for descriptions, answers, and other text</td>
    </tr>
  </tbody>
</table>

### Add Your Own Font

Upload your own font and use it anywhere in the quiz.

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Font name (appears in dropdown)</td>
      <td>Enter a name for the custom font · Max 50 characters</td>
    </tr>

    <tr>
      <td>Upload font</td>
      <td>Choose and upload a custom font file, then click Upload file</td>
    </tr>

    <tr>
      <td>Supported formats</td>
      <td>.TTF, .OTF, .WOFF, .WOFF2</td>
    </tr>
  </tbody>
</table>

After upload, open the Headings or Body picker → My Fonts and select your font.

## Appearance

Customize the visual appearance of quiz elements.

Open Appearance in the left list.

### Progress Bar

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Bar color</td>
      <td>Color of the filled progress indicator (completed part of the bar)</td>
    </tr>

    <tr>
      <td>Background color</td>
      <td>Color of the unfilled track (remaining part of the bar)</td>
    </tr>
  </tbody>
</table>

### Result Loader

Shown while your quiz results are being calculated.

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Loader style</td>
      <td>Choose the loading animation (for example Spinner). You can also choose a custom GIF option</td>
    </tr>

    <tr>
      <td>Loader color</td>
      <td>Color of the loading spinner (shown for icon loaders)</td>
    </tr>

    <tr>
      <td>GIF file</td>
      <td>When you select a custom GIF loader, upload your GIF here</td>
    </tr>
  </tbody>
</table>

### Button

Customize the appearance of all quiz buttons.

#### Typography

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>Options / details</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Font size</td>
      <td>Adjust the button text size (for example 16 px)</td>
    </tr>

    <tr>
      <td>Font weight</td>
      <td>Light, Regular, Semi bold, Bold</td>
    </tr>

    <tr>
      <td>Font color</td>
      <td>Set the button text color</td>
    </tr>
  </tbody>
</table>

#### Appearance

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Background color</td>
      <td>Set the button background color</td>
    </tr>

    <tr>
      <td>Corner radius</td>
      <td>Adjust the roundness of the button corners</td>
    </tr>

    <tr>
      <td>Border Width</td>
      <td>Adjust the border thickness</td>
    </tr>

    <tr>
      <td>Border color</td>
      <td>Set the button border color</td>
    </tr>
  </tbody>
</table>

Changes appear live in the center preview (for example on the Next button).

## Settings

Configure quiz navigation and display behavior.

Open Settings in the left list.

### Quiz Configuration

#### Display Options

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hide question steps</td>
      <td>Hides the question step counter from the quiz navigation</td>
    </tr>

    <tr>
      <td>Letter labels on answers</td>
      <td>Shows letter labels (A, B, C) on answer options</td>
    </tr>

    <tr>
      <td>Auto scroll to top</td>
      <td>Scrolls the page to the top of the quiz when moving to the next question</td>
    </tr>
  </tbody>
</table>

#### Navigation Mode

Choose how users move between questions.

<table>
  <thead>
    <tr>
      <th>Mode</th>
      <th>What it does</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Automatically</td>
      <td>Moves to the next question as soon as an answer is selected</td>
    </tr>

    <tr>
      <td>On click of next button</td>
      <td>Requires clicking Next to proceed after selecting an answer</td>
    </tr>
  </tbody>
</table>

#### Select Animation Type

Choose the transition animation used between quiz pages.

Available options:

* None
* Fade in
* Fade in up
* Left slide
* Right slide
* Slide up
* Slide down

You can search animations in the picker and preview each style.

### Sticky Header Settings

If your theme has a sticky header, enable this so questions scroll into view correctly.

<table>
  <thead>
    <tr>
      <th>Setting</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>My theme has a sticky header</td>
      <td>Enable or disable sticky header support</td>
    </tr>

    <tr>
      <td>Desktop menu height</td>
      <td>Sticky header height for desktop · Typically 50 px – 300 px</td>
    </tr>

    <tr>
      <td>Mobile menu height</td>
      <td>Sticky header height for mobile · Typically 40 px – 80 px</td>
    </tr>
  </tbody>
</table>

Desktop and mobile height fields appear after you enable My theme has a sticky header.

## Notes

* Always click Save after design changes.
* Custom fonts support .TTF, .OTF, .WOFF, and .WOFF2.
* Custom font upload is on the Pro plan.
* Sticky header heights help the quiz clear your theme’s fixed navigation.