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

# Normal Recommendation

> Recommend products from the answers users select by linking answers to products, variants, collections, or tags.

From this page you can:

* Configure recommendation settings and map supported questions
* Customize Result Action
* Build the result page with HTML, Rich Text, Hero Banner, and more
* Customize the Products section

## How to Set Normal Recommendation

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

## Normal Recommendation Page Overview

When Normal is selected, you will see:

* Builder list (left) — Questions for answer mapping, Result Action, Result page sections including Products, and Add section
* Center preview — Live preview of the result page
* Settings panel (right) — Recommendation type, Type dropdown, Result options, and section/block settings

## Types (Settings Panel)

Choose the recommendation Type. Only one type can be selected.

<table>
  <thead>
    <tr>
      <th>Type</th>
      <th>What you assign</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Product</td>
      <td>Recommend products</td>
    </tr>

    <tr>
      <td>Variants</td>
      <td>Recommend product variants</td>
    </tr>

    <tr>
      <td>Collection</td>
      <td>Recommend collections</td>
    </tr>

    <tr>
      <td>Tag</td>
      <td>Recommend by product tags</td>
    </tr>
  </tbody>
</table>

## Result Options (Settings Panel)

When Type is Product, Variants, or Tag, these Result options are available:

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

  <tbody>
    <tr>
      <td>Exact matches</td>
      <td>Shows recommendations only when a user’s answers exactly match the conditions you set.</td>
    </tr>

    <tr>
      <td>Partial matches</td>
      <td>Appears when Exact matches is enabled. Shows the most matched products if no exact match is found.</td>
    </tr>

    <tr>
      <td>Product limit</td>
      <td>Sets the maximum number of products to display. Range: 1–50 when enabled.</td>
    </tr>

    <tr>
      <td>Hide unavailable products</td>
      <td>Hides or shows unavailable products and variants.</td>
    </tr>

    <tr>
      <td>Show last result</td>
      <td>Shows the user’s previous result if they took the quiz before, or starts from the beginning.</td>
    </tr>

    <tr>
      <td>Show randomise product order</td>
      <td>Randomly shuffles the recommended product order for each user.</td>
    </tr>
  </tbody>
</table>

When Type is Collection, Exact matches and Product limit are not shown.

Available options:

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

  <tbody>
    <tr>
      <td>Hide unavailable products</td>
      <td>Hides or shows unavailable products and variants.</td>
    </tr>

    <tr>
      <td>Show last result</td>
      <td>Shows the user’s previous result if they took the quiz before, or starts from the beginning.</td>
    </tr>

    <tr>
      <td>Show randomise product order</td>
      <td>Randomly shuffles the recommended product order for each user.</td>
    </tr>
  </tbody>
</table>

## Supported Question Types

Normal recommendation mapping works with these question types:

<table>
  <thead>
    <tr>
      <th>Question Type</th>
      <th>How mapping works</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Single Choice</td>
      <td>Assign a recommendation to each answer option.</td>
    </tr>

    <tr>
      <td>Multiple Choice</td>
      <td>Assign a recommendation to each answer option.</td>
    </tr>

    <tr>
      <td>Feedback</td>
      <td>Assign recommendations to three ranges: Least Likely, Average, Most Likely.</td>
    </tr>

    <tr>
      <td>Rating</td>
      <td>Assign recommendations to three groups: Unlikely, About as likely as not, Likely.</td>
    </tr>
  </tbody>
</table>

In the left sidebar, questions appear with short labels such as Single, Multi, Feedback, and Rating.

## How to Map Product with Answer

### Single Choice

1. Open the Single Choice question in the left list.
2. Each answer option includes a Select button.
3. Click Select to assign the chosen recommendation to that answer.
4. After assignment, click Change Product to replace the existing recommendation.

### Multiple Choice

1. Open the Multiple Choice question in the left list.
2. Each answer option includes a Select button.
3. Click Select to assign the chosen recommendation to that answer.
4. After assignment, click Change Product to replace the existing recommendation.

### Feedback

The Feedback question type is divided into three ranges:

* Least Likely
* Average
* Most Likely

Assign recommendations separately for each range using Select. After assignment, use Change Product to replace it.

### Rating

The Rating question type is divided into three groups:

* Unlikely
* About as likely as not
* Likely

Assign recommendations separately for each group using Select. After assignment, use Change Product to replace it.

## Result Action

Customize the actions displayed on the result page, such as Retake quiz, Cart, and Checkout.

### Section Visibility

1. Hover over Result Action.
2. Click the Eye icon to hide or show the Result Action section.

### Result Action Content Settings

Retake Quiz: Button on the result page that lets shoppers restart the quiz from the beginning.

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

  <tbody>
    <tr>
      <td>Retake quiz</td>
      <td>Customize the Retake quiz label. Maximum 25 characters.</td>
    </tr>
  </tbody>
</table>

View Cart: Show a button on the result page that takes shoppers to their cart.

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

  <tbody>
    <tr>
      <td>Cart button</td>
      <td>Enable or disable the Cart button on the result page that takes shoppers to their cart.</td>
    </tr>

    <tr>
      <td>Cart button text</td>
      <td>Customize the Cart button label. Maximum 25 characters.</td>
    </tr>
  </tbody>
</table>

Proceed to Checkout: Show a button on the result page that sends shoppers to Shopify checkout.

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

  <tbody>
    <tr>
      <td>Checkout button</td>
      <td>Enable or disable the Checkout button on the result page.</td>
    </tr>

    <tr>
      <td>Checkout text</td>
      <td>Customize the Checkout button label. Maximum 25 characters.</td>
    </tr>
  </tbody>
</table>

### Result Action 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 / View Cart Button / Proceed to Checkout

<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 Sections

Build the result page using content sections.

Use + Add section to add sections. Available sections include:

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

  <tbody>
    <tr>
      <td>Discount</td>
      <td>Shows a coupon code users can copy.</td>
    </tr>

    <tr>
      <td>HTML</td>
      <td>Adds custom HTML to the result page.</td>
    </tr>

    <tr>
      <td>Rich Text</td>
      <td>Adds Heading, Text, and Button blocks.</td>
    </tr>

    <tr>
      <td>Hero Banner</td>
      <td>Displays a full-width banner with an image and content blocks. Maximum 3 blocks.</td>
    </tr>

    <tr>
      <td>Image with Text</td>
      <td>Displays an image beside text and button blocks. Maximum 4 blocks.</td>
    </tr>

    <tr>
      <td>Video</td>
      <td>Displays a Shopify-hosted or embedded video.</td>
    </tr>

    <tr>
      <td>Products</td>
      <td>Shows recommended products for the fallback outcome</td>
    </tr>
  </tbody>
</table>

Hover over a section to:

* Hide/Show
* Delete
* Drag to reorder

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

## Products

The Products section displays the recommended products on the result page. Customize the product card layout by adding, removing, reordering, and styling product blocks.

### Product Section Actions

Hover over Products to:

* Drag — Reorder the Products section
* Hide/Show — Enable or disable the section with the Eye icon
* Delete — Remove the Products section from the result page

### Layout

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

  <tbody>
    <tr>
      <td>Desktop columns</td>
      <td>Number of product cards per row on desktop. 1 to 4.</td>
    </tr>

    <tr>
      <td>Mobile columns</td>
      <td>Number of product cards per row on mobile. 1 to 2.</td>
    </tr>

    <tr>
      <td>Image ratio</td>
      <td>Adaptive image, Square image, Landscape image, or Portrait image.</td>
    </tr>

    <tr>
      <td>Equal card height</td>
      <td>Makes all product cards in the same row equal height when titles or content vary in length.</td>
    </tr>
  </tbody>
</table>

Note: Adaptive image uses a uniform square frame and crops each image consistently so product cards stay aligned.

### Cart

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

  <tbody>
    <tr>
      <td>Add to cart all</td>
      <td>Shows an Add to cart all control so customers can add all recommended products in one click.</td>
    </tr>

    <tr>
      <td>Add to cart all text</td>
      <td>Custom button label. Maximum 50 characters.</td>
    </tr>
  </tbody>
</table>

Note: Add to cart all is available only when fewer than 10 products are displayed on the result page.

### Load More Button

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

  <tbody>
    <tr>
      <td>Button text</td>
      <td>Customize the Load more button label. Maximum 50 characters.</td>
    </tr>
  </tbody>
</table>

This button appears only when additional recommended products are available. You can also style it under Style → Load more button.

### Custom Input Field

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

  <tbody>
    <tr>
      <td>Show custom input</td>
      <td>Enable or disable custom input fields for recommended products.</td>
    </tr>

    <tr>
      <td>Label name</td>
      <td>Shown when custom input is enabled. Used as the placeholder above price.</td>
    </tr>
  </tbody>
</table>

### Product Actions & Messages

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

  <tbody>
    <tr>
      <td>No match found</td>
      <td>Message shown when no products match the recommendation criteria.</td>
    </tr>
  </tbody>
</table>

Custom CSS: Add Custom CSS to customize the appearance and layout of the Products section, depending on your plan.

### Product Design Settings

Background

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

  <tbody>
    <tr>
      <td>Background color</td>
      <td>Background color of the Products section.</td>
    </tr>

    <tr>
      <td>Product caption background color</td>
      <td>Background color behind each product’s information.</td>
    </tr>

    <tr>
      <td>Text alignment</td>
      <td>Left, Center, or Right.</td>
    </tr>
  </tbody>
</table>

Product Spacing

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

  <tbody>
    <tr>
      <td>Max gap between products</td>
      <td>Horizontal spacing between product cards. 0% to 20%.</td>
    </tr>

    <tr>
      <td>Enable product shadow</td>
      <td>Shows or hides the shadow around each product card.</td>
    </tr>
  </tbody>
</table>

Load More Button Style

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

  <tbody>
    <tr>
      <td>Background color</td>
      <td>Button background.</td>
    </tr>

    <tr>
      <td>Font color</td>
      <td>Button text color.</td>
    </tr>

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

    <tr>
      <td>Font size</td>
      <td>Button text size.</td>
    </tr>

    <tr>
      <td>Border color</td>
      <td>Button border color.</td>
    </tr>

    <tr>
      <td>Border width</td>
      <td>Border thickness.</td>
    </tr>

    <tr>
      <td>Corner radius</td>
      <td>Button corner roundness.</td>
    </tr>
  </tbody>
</table>

Add to Cart All Style

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

  <tbody>
    <tr>
      <td>Font size</td>
      <td>Button text size.</td>
    </tr>

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

    <tr>
      <td>Font color</td>
      <td>Button text color.</td>
    </tr>

    <tr>
      <td>Link position</td>
      <td>Above products or Below products.</td>
    </tr>

    <tr>
      <td>Link type</td>
      <td>Button or Text link.</td>
    </tr>

    <tr>
      <td>Redirect after add to cart</td>
      <td>None, Cart page, or Checkout page.</td>
    </tr>

    <tr>
      <td>Button style</td>
      <td>Available only when Link type is Button. Includes Background color, Border color, Border width, and Corner radius.</td>
    </tr>
  </tbody>
</table>

Section Spacing

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

  <tbody>
    <tr>
      <td>Top & Bottom</td>
      <td>0 px – 100 px</td>
    </tr>
  </tbody>
</table>

### Product - Image

Drag and drop this block to change the position of the product image.

Section-level settings such as image ratio can be managed by selecting the parent Products section.

Hover over Image to perform these actions:

* Delete
* Drag

### Product - Heading

This shows the product name/product title on the result page.

Hover over Heading to perform these actions:

* Delete
* Drag

Heading Design Settings

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

### Product - Variants

Drag and drop this block to change the position of the product variants selector.

Hover over Variants to perform these actions:

* Delete
* Drag

### Product - Price

Show the price of the product.

Hover over Price to perform these actions:

* Delete
* Drag

Price Design Settings

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

### Product - Button

Use it to show the add to cart button.

Hover over Button to perform these actions:

* Delete
* Drag

Button Content Settings

Add to Cart

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

  <tbody>
    <tr>
      <td>Add to cart</td>
      <td>Show or hide the Add to cart control on each product card.</td>
    </tr>

    <tr>
      <td>Hide add to cart for free products</td>
      <td>Hides the Add to cart control for products that are free.</td>
    </tr>

    <tr>
      <td>Add to cart text</td>
      <td>Customize the text displayed on the Add to cart button. Maximum 50 characters.</td>
    </tr>

    <tr>
      <td>Sold out button text</td>
      <td>Customize the text displayed when a product is sold out. Maximum 50 characters.</td>
    </tr>
  </tbody>
</table>

Quantity Buttons: Allow the user to add or remove the product.

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

  <tbody>
    <tr>
      <td>Show quantity buttons</td>
      <td>Show or hide quantity controls for products.</td>
    </tr>

    <tr>
      <td>In cart text</td>
      <td>Customize the text displayed when the product is already added to the cart. Maximum 25 characters.</td>
    </tr>
  </tbody>
</table>

Button Design Settings

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

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

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

    <tr>
      <td>Background Color</td>
      <td>Custom color</td>
    </tr>

    <tr>
      <td>Border Color</td>
      <td>Custom color</td>
    </tr>

    <tr>
      <td>Border Width</td>
      <td>1 px to 10 px</td>
    </tr>

    <tr>
      <td>Corner Radius</td>
      <td>0 px to 50 px</td>
    </tr>
  </tbody>
</table>

### Product - Text

Show the description of the product.

Hover over Text to perform these actions:

* Delete
* Drag

Text Content Settings

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

  <tbody>
    <tr>
      <td>Show product metafield</td>
      <td>Show or hide the product metafield on the product card.</td>
    </tr>

    <tr>
      <td>Text</td>
      <td>Add a product metafield using the database icon. You can remove a selected metafield using × or Backspace.</td>
    </tr>
  </tbody>
</table>

Text Design Settings

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

<nav class="qh-pagination" aria-label="Pagination">
  <a class="pagination-prev" href="/quiz-builder/recommendation/thank-you-page">
    <span>
      <strong>Thank You Page Recommendation</strong>
      <span>Previous</span>
    </span>
  </a>

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