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

# Thank You Page Recommendation

> Show a thank-you page, with a message, discount code, or custom content, after the quiz when you do not need to recommend products.

From this page you can:

* Enable Redirect after quiz to send users to another URL
* Add a Retake quiz action
* Build the result page with sections such as Discount, Rich Text, HTML, Hero Banner, Image with Text, and Video
* Hide, delete, or reorder sections
* Style each section and its blocks

## How to Set Thank You Page

1. Go to Shopify Admin → Apps → Quizify.
2. Open a quiz from Dashboard or My Quizzes by clicking Edit, or create a new quiz.
3. In the Quiz Builder, click Recommendation in the left icon menu.
4. Select Thank You Page.

## Page Overview

When Thank You Page is selected, you will see:

* Builder list (left): Result Action, Result page sections, and Add section
* Center preview: Live preview of the thank-you/result page
* Settings panel (right): Recommendation type, redirect options, and content/style settings for the selected item

## Thank You Page Recommendation Settings

### Redirect After Quiz

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

  <tbody>
    <tr>
      <td>Redirect after quiz</td>
      <td>When enabled, users are redirected immediately after submitting the quiz, and the Quizify result page is skipped.</td>
    </tr>

    <tr>
      <td>Destination URL</td>
      <td>Appears when redirect is enabled. Enter a valid website address, for example [https://example.com](https://example.com).</td>
    </tr>
  </tbody>
</table>

## Result Action

The Result Action section lets you customize a Retake quiz option on the result page.

### Content Settings

1. Hover over Result Action and click the eye icon to show or hide the section.
2. Customize the Retake quiz text.

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

  <tbody>
    <tr>
      <td>Retake quiz</td>
      <td>Label shown for retaking the quiz. Maximum 25 characters.</td>
    </tr>
  </tbody>
</table>

### Design Settings

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

  <tbody>
    <tr>
      <td>Background Color</td>
      <td>Background color of the Result Action bar.</td>
    </tr>

    <tr>
      <td>Section Placement</td>
      <td>Where this bar appears on the result page: Top or Bottom.</td>
    </tr>

    <tr>
      <td>Sticky Position</td>
      <td>Keep this bar fixed at the top while scrolling. On your store, this only applies to fullsize popup quizzes.</td>
    </tr>

    <tr>
      <td>Font Color</td>
      <td>Text color.</td>
    </tr>

    <tr>
      <td>Font Size</td>
      <td>8 px – 50 px.</td>
    </tr>

    <tr>
      <td>Font Weight</td>
      <td>Light, Regular, Semi Bold, Bold.</td>
    </tr>

    <tr>
      <td>Section Spacing</td>
      <td>Top and Bottom: 0 px – 100 px each.</td>
    </tr>
  </tbody>
</table>

### Retake Quiz Style

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

  <tbody>
    <tr>
      <td>Link Type</td>
      <td>Anchor or Button.</td>
    </tr>

    <tr>
      <td>Position</td>
      <td>Left, Center, or Right.</td>
    </tr>

    <tr>
      <td>Button Settings</td>
      <td>Available only when Link Type is Button: Border Width (0–10 px), Corner Radius (0–50 px), Background Color, and Border Color.</td>
    </tr>
  </tbody>
</table>

## Result Page Design

Select Result page to set overall page layout options in the Design panel.

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

  <tbody>
    <tr>
      <td>Make section full width</td>
      <td>Makes result page content use the full available width.</td>
    </tr>

    <tr>
      <td>Page width</td>
      <td>Sets the page content width, for example, 1400 px.</td>
    </tr>
  </tbody>
</table>

## Discount

The Discount section displays a coupon code on the result page for users to copy and redeem.

Click on Discount to access the following settings.

### Discount Content Settings

1. Click Discount under Result page.
2. Enter Coupon text, which is shown above the code. Maximum 125 characters.
3. Enter Coupon code. Maximum 25 characters.
4. Hover over Discount to access:
   * Hide/Show: Eye icon
   * Delete: Remove the section
   * Drag: Reorder the section on the result page

You can also add Custom CSS for styles that apply only to the Discount section, depending on your plan.

### Discount Design Settings

Coupon Text

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

  <tbody>
    <tr>
      <td>Font Color</td>
      <td>Text color.</td>
    </tr>

    <tr>
      <td>Font Weight</td>
      <td>Light, Regular, Semi Bold, Bold.</td>
    </tr>

    <tr>
      <td>Font Size</td>
      <td>8 px – 50 px.</td>
    </tr>
  </tbody>
</table>

Coupon Code

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

  <tbody>
    <tr>
      <td>Background Color</td>
      <td>Code box background.</td>
    </tr>

    <tr>
      <td>Font Color</td>
      <td>Code text color.</td>
    </tr>

    <tr>
      <td>Font Weight</td>
      <td>Light, Regular, Semi Bold, Bold.</td>
    </tr>

    <tr>
      <td>Font Size</td>
      <td>8 px – 50 px.</td>
    </tr>
  </tbody>
</table>

Section Spacing

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

  <tbody>
    <tr>
      <td>Top and Bottom</td>
      <td>0 px – 100 px each.</td>
    </tr>
  </tbody>
</table>

## HTML

The HTML section lets you add custom HTML code to the result page.

Click on HTML to access the following settings.

### HTML Content Settings

1. Click HTML under Result page.
2. Enter your custom HTML code in the editor.
3. The HTML content is displayed in the Result Preview and on the storefront.

Custom CSS: Add Custom CSS to apply styles only to the HTML section, depending on your plan.

### HTML Section Actions

Hover over the HTML section to access:

* Hide/Show: Enable or disable the section using the Eye icon
* Delete: Remove the HTML section
* Drag: Change the section order on the result page

### HTML Design Settings

Section spacing

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

  <tbody>
    <tr>
      <td>Top</td>
      <td>Adjust the spacing above the HTML section: 0 px – 100 px.</td>
    </tr>

    <tr>
      <td>Bottom</td>
      <td>Adjust the spacing below the HTML section: 0 px – 100 px.</td>
    </tr>
  </tbody>
</table>

## Rich Text

The Rich Text section displays custom text and buttons on the result page.

Rich Text supports blocks:

* Heading
* Text
* Button

Click Add block to add more content blocks. You can add multiple blocks and arrange them.

Click on Rich Text to access the following settings.

### Rich Text Section Actions

Hover over Rich Text to:

* Hide/Show
* Delete
* Drag to reorder

### Rich Text Content Settings

Custom CSS: Add Custom CSS to style only the Rich Text section, depending on your plan.

### Rich Text Design Settings

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

  <tbody>
    <tr>
      <td>Background Color</td>
      <td>Section background.</td>
    </tr>

    <tr>
      <td>Content Position</td>
      <td>Left, Center, Right. Automatically optimized for mobile.</td>
    </tr>

    <tr>
      <td>Text Alignment</td>
      <td>Left, Center, Right.</td>
    </tr>

    <tr>
      <td>Section Spacing</td>
      <td>Top and Bottom: 0 px – 100 px.</td>
    </tr>

    <tr>
      <td>Space Between Blocks</td>
      <td>0 px – 80 px. The first block does not get extra top spacing.</td>
    </tr>
  </tbody>
</table>

### Rich Text — Heading

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

  <tbody>
    <tr>
      <td>Heading text</td>
      <td>Maximum 300 characters.</td>
    </tr>

    <tr>
      <td>Design</td>
      <td>Font Color, Font Weight (Light / Regular / Semi Bold / Bold), Font Size (8–50 px).</td>
    </tr>
  </tbody>
</table>

### Rich Text — Text

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

  <tbody>
    <tr>
      <td>Description text</td>
      <td>Maximum 2,000 characters.</td>
    </tr>

    <tr>
      <td>Design</td>
      <td>Font Color, Font Weight, Font Size (8–50 px).</td>
    </tr>
  </tbody>
</table>

### Rich Text — Button

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

  <tbody>
    <tr>
      <td>Button text</td>
      <td>Maximum 50 characters.</td>
    </tr>

    <tr>
      <td>Button link</td>
      <td>Destination URL.</td>
    </tr>

    <tr>
      <td>Button style</td>
      <td>Solid, Outline, or Text.</td>
    </tr>

    <tr>
      <td>Colors & Type</td>
      <td>Background Color, Font Color, Font Weight, Font Size (8–50 px).</td>
    </tr>
  </tbody>
</table>

## Hero Banner

The Hero Banner section displays a promotional banner with text, image, and a call-to-action.

Hero Banner supports blocks:

* Heading
* Text
* Button

Click Add block to add blocks.

Maximum 3 blocks per Hero Banner.

Click on Hero Banner to access the following settings.

### Hero Banner Content Settings

Banner Image: Upload a banner image.

* Supported formats: JPG, PNG, SVG, WEBP
* Maximum file size: 20 MB
* Custom CSS

### Hero Banner Section Actions

Hover to access:

* Hide/Show
* Delete
* Drag

### Hero Banner Design Settings

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

  <tbody>
    <tr>
      <td>Show content card</td>
      <td>Enable or disable the content card over the banner image.</td>
    </tr>

    <tr>
      <td>Background Color</td>
      <td>Container background. Shown when Show content card is enabled.</td>
    </tr>

    <tr>
      <td>Block Alignment</td>
      <td>Top Left, Top Center, Top Right, Middle Left, Absolute Center, Middle Right, Bottom Left, Bottom Center, Bottom Right.</td>
    </tr>

    <tr>
      <td>Section Spacing</td>
      <td>Top and Bottom: 0 px – 100 px.</td>
    </tr>
  </tbody>
</table>

### Hero Banner Blocks

Heading, Text, and Button settings match the Rich Text blocks:

* Heading: Maximum 300 characters + font style
* Text: Maximum 2,000 characters + font style
* Button: Text (maximum 50 characters), link, Solid / Outline / Text, colors, and font size

## Image with Text

The Image with Text section displays an image alongside text and a button.

Image with Text supports blocks:

* Heading
* Text
* Button

Click Add block. Maximum 4 blocks per Image with Text section.

Click on Image with Text to access the following settings.

### Image with Text Image Settings

Upload an image.

* Supported formats: JPG, PNG, SVG, WEBP
* Maximum file size: 20 MB
* Custom CSS

### Image with Text Section Actions

Hover to access:

* Hide/Show
* Delete
* Drag

### Image with Text Design Settings

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

  <tbody>
    <tr>
      <td>Background Color</td>
      <td>Section background.</td>
    </tr>

    <tr>
      <td>Desktop Image Placement</td>
      <td>Image First or Image Second.</td>
    </tr>

    <tr>
      <td>Content Position</td>
      <td>Top, Middle, Bottom.</td>
    </tr>

    <tr>
      <td>Content Alignment</td>
      <td>Left, Center, Right.</td>
    </tr>

    <tr>
      <td>Section Spacing</td>
      <td>Top and Bottom: 0 px – 100 px.</td>
    </tr>
  </tbody>
</table>

Note: Heading, Text, and Button block settings are the same as Hero Banner / Rich Text blocks.

## Video

The Video section displays a Shopify-hosted or embedded video on the result page.

### Video Section Actions

Hover to access:

* Hide/Show
* Delete
* Drag

### Video Content Settings

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

  <tbody>
    <tr>
      <td>Heading</td>
      <td>Title for the video section.</td>
    </tr>

    <tr>
      <td>Heading Size</td>
      <td>Small, Medium, Large.</td>
    </tr>

    <tr>
      <td>Loop Video</td>
      <td>Enable or disable loop video.</td>
    </tr>

    <tr>
      <td>Make video full width</td>
      <td>Makes the video expand to fill the entire available width of the page.</td>
    </tr>

    <tr>
      <td>Shopify-hosted Video</td>
      <td>Upload or select a video: MP4, MOV, WEBM.</td>
    </tr>

    <tr>
      <td>Embed Video from URL</td>
      <td>YouTube or Vimeo URL. Used when no Shopify-hosted video is selected.</td>
    </tr>

    <tr>
      <td>Cover Image</td>
      <td>Custom thumbnail. Maximum 20 MB. Supported formats: JPG, PNG, SVG, WEBP.</td>
    </tr>

    <tr>
      <td>Video Alt Text</td>
      <td>Descriptive text for accessibility.</td>
    </tr>

    <tr>
      <td>Custom CSS</td>
      <td>Optional styling for this section, depending on your plan.</td>
    </tr>
  </tbody>
</table>

### Video Design Settings

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

  <tbody>
    <tr>
      <td>Section spacing</td>
      <td>Top and Bottom: 0 px – 100 px.</td>
    </tr>
  </tbody>
</table>

## Add Section

Click Add section to insert a new content section on the result page.

Available sections:

* Discount
* HTML
* Rich Text
* Hero Banner
* Image with Text
* Video

You can add multiple sections of the same type. Newly added sections can be reordered, hidden, or removed.

## Add Block

Click Add block inside a section to insert content elements.

* Available blocks depend on the selected section.
* Multiple blocks can be added and arranged.
* Hero Banner: Maximum 3 blocks.
* Image with Text: Maximum 4 blocks.

## Notes

* If Redirect after quiz is ON, users skip the Quizify result page.
* Use the eye icon to hide sections without deleting them.
* Drag sections to change their order on the result page.

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

  <a class="pagination-next" href="/quiz-builder/recommendation/normal">
    <span>
      <strong>Normal Recommendation</strong>
      <span>Next</span>
    </span>
  </a>
</nav>