Design

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.

Setting	What it does
Headings	Select the font used for question titles and headings
Body	Select the font used for descriptions, answers, and other text

​

Add Your Own Font

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

Setting	Details
Font name (appears in dropdown)	Enter a name for the custom font · Max 50 characters
Upload font	Choose and upload a custom font file, then click Upload file
Supported formats	.TTF, .OTF, .WOFF, .WOFF2

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

Setting	What it does
Bar color	Color of the filled progress indicator (completed part of the bar)
Background color	Color of the unfilled track (remaining part of the bar)

​

Result Loader

Shown while your quiz results are being calculated.

Setting	What it does
Loader style	Choose the loading animation (for example Spinner). You can also choose a custom GIF option
Loader color	Color of the loading spinner (shown for icon loaders)
GIF file	When you select a custom GIF loader, upload your GIF here

​

Button

Customize the appearance of all quiz buttons.

​

Typography

Setting	Options / details
Font size	Adjust the button text size (for example 16 px)
Font weight	Light, Regular, Semi bold, Bold
Font color	Set the button text color

​

Appearance

Setting	What it does
Background color	Set the button background color
Corner radius	Adjust the roundness of the button corners
Border Width	Adjust the border thickness
Border color	Set the button border color

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

Setting	What it does
Hide question steps	Hides the question step counter from the quiz navigation
Letter labels on answers	Shows letter labels (A, B, C) on answer options
Auto scroll to top	Scrolls the page to the top of the quiz when moving to the next question

​

Navigation Mode

Choose how users move between questions.

Mode	What it does
Automatically	Moves to the next question as soon as an answer is selected
On click of next button	Requires clicking Next to proceed after selecting an answer

​

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.

Setting	Details
My theme has a sticky header	Enable or disable sticky header support
Desktop menu height	Sticky header height for desktop · Typically 50 px – 300 px
Mobile menu height	Sticky header height for mobile · Typically 40 px – 80 px

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.