> ## 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.

# Intro Page

> Set up the first screen customers see before the quiz, including heading, image, and start button.

The Intro Page is the first screen customers see before starting the quiz. The following options are available for customization:

* Heading
* Subheading
* Image
* Button

## How to Enable or Disable the Intro Page

1. Hover over Intro Page in the Builder list.
2. Click the eye icon.
3. When visible, the tooltip displays: Click to hide intro page.
4. Click the eye icon again to show the Intro Page.

Note: When the Intro Page is hidden, customers go straight into the quiz without seeing the welcome screen.

## Intro Page Settings

Select Intro Page to open its settings.

### Brand Logo

You can upload your store's logo to display it in your quiz. Supported image formats:

* JPG
* PNG
* SVG
* WEBP

Maximum file size: 20 MB.

### Logo Alignment

After uploading a logo, choose how it should be aligned:

* Left
* Center
* Right

### Redirect URL

Enter a URL to redirect users to a specific page when they click the logo.

Example: `https://example.com`

## Intro Page Design Settings

Open the Design tab using the paintbrush icon to customize the Intro Page appearance.

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

  <tbody>
    <tr>
      <td>Background Color</td>
      <td>Choose the background color for the Intro Page to match your store's branding.</td>
    </tr>

    <tr>
      <td>Content Alignment</td>
      <td>Align the Intro Page content to the Left or Center.</td>
    </tr>

    <tr>
      <td>Custom CSS</td>
      <td>Apply custom CSS to the Intro Page only for advanced styling. Availability may depend on your subscription plan.</td>
    </tr>
  </tbody>
</table>

## Heading and Subheading

Use Heading and Subheading to customize the title and description on the Intro Page.

### Heading Content Settings

1. In the Builder list, click Heading under Intro Page.
2. Enter the main title customers should see.
3. Maximum length: 100 characters.

### Heading Design Customization

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Font Color</td>
      <td>Select the color to apply to the heading text.</td>
    </tr>

    <tr>
      <td>Font Size</td>
      <td>Adjust the heading font size between 8 px and 50 px.</td>
    </tr>

    <tr>
      <td>Font Weight</td>
      <td>Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.</td>
    </tr>
  </tbody>
</table>

### Subheading Content Settings

1. Click Subheading under Intro Page.
2. Enter supporting text below the heading.

### Subheading Customization

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Font Color</td>
      <td>Select the color to apply to the subheading text.</td>
    </tr>

    <tr>
      <td>Font Size</td>
      <td>Adjust the subheading font size between 8 px and 50 px.</td>
    </tr>

    <tr>
      <td>Font Weight</td>
      <td>Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.</td>
    </tr>
  </tbody>
</table>

## Image

Upload and place images on the Intro Page for desktop and mobile.

1. Click Image under Intro Page.
2. Use Settings to upload images and choose placement.

### Desktop Image

1. Click Select image to upload.
2. Supported formats: JPG, PNG, SVG, WEBP.
3. Maximum file size: 20 MB.
4. Choose Image Placement (Desktop).

<table>
  <thead>
    <tr>
      <th>Placement</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Top</td>
      <td>Displays the image at the top of the page or section.</td>
    </tr>

    <tr>
      <td>Center</td>
      <td>Centers the image within the available content area.</td>
    </tr>

    <tr>
      <td>Left</td>
      <td>Positions the image on the left side of the content.</td>
    </tr>

    <tr>
      <td>Right</td>
      <td>Positions the image on the right side of the content.</td>
    </tr>

    <tr>
      <td>Background</td>
      <td>Uses the image as the background for the entire page or section.</td>
    </tr>

    <tr>
      <td>Left Background</td>
      <td>Uses the image as a background on the left side of the page or section.</td>
    </tr>

    <tr>
      <td>Right Background</td>
      <td>Uses the image as a background on the right side of the page or section.</td>
    </tr>
  </tbody>
</table>

### Mobile Image

Turn on Mobile same as a desktop to reuse the desktop image and settings on mobile.

If the option is disabled:

* Upload a separate Mobile Image.
* Supported formats: JPG, PNG, SVG, WEBP.
* Maximum file size: 20 MB.
* Choose Image Placement (Mobile).

<table>
  <thead>
    <tr>
      <th>Placement</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Top</td>
      <td>Displays the image at the top of the question.</td>
    </tr>

    <tr>
      <td>Center</td>
      <td>Centers the image within the question area.</td>
    </tr>

    <tr>
      <td>Above Question Name</td>
      <td>Places the image directly above the question title.</td>
    </tr>

    <tr>
      <td>Background</td>
      <td>Uses the image as the background for the question.</td>
    </tr>

    <tr>
      <td>None Image</td>
      <td>Hides the image on mobile devices.</td>
    </tr>
  </tbody>
</table>

## Button

The Intro Page button starts the quiz when clicked.

1. Click Button under Intro Page.
2. Edit the button text. The default text is Start Quiz.
3. Maximum length: 50 characters.

You can also customize button text styling, including font color, size, weight, and related button appearance options.

<nav class="qh-pagination" aria-label="Pagination">
  <a class="pagination-prev" href="/quiz-builder/quiz">
    <span>
      <strong>Quiz</strong>
      <span>Previous</span>
    </span>
  </a>

  <a class="pagination-next" href="/quiz-builder/quiz/question">
    <span>
      <strong>Question</strong>
      <span>Next</span>
    </span>
  </a>
</nav>