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

# Send Email

> Design, automate, and send personalized emails to shoppers.

The **Send email** feature allows you to automatically deliver personalized custom follow-up emails directly to customers after they complete your quiz.

## Navigation

To open Send Email settings:

1. Go to **Shopify Admin → Apps → Quizify**.
2. Open any quiz from your **Dashboard** or **My Quizzes** (click **Edit** or create a new quiz).
3. In the Quiz Builder left icon bar, click **Email** (<Icon icon="envelope" color="#000000" />).
4. Select **Send email** in the left section list.

## Delivery & Timing Settings

* **Active**: Check this option to enable automated customer result emails.
* **Send After**: Choose when the  email is delivered to the customer after completing the quiz:
  * **Immediately** *(Recommended)*
  * **1 hour**
  * **6 hours**
  * **10 hours**
  * **24 hours**

## Email Options

Configure the sender identity and header details:

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

  <tbody>
    <tr>
      <td><strong>From Name</strong></td>
      <td>Enter the name that will appear as the sender in the customer's inbox (e.g. <code>Your Store Name</code>). Defaults to <em>Quizify</em> if left blank.</td>
    </tr>

    <tr>
      <td><strong>Reply-to Email</strong></td>
      <td>Enter the email address where customers can reply (e.g. <code>support\@yourstorecom</code>).</td>
    </tr>

    <tr>
      <td><strong>Subject</strong></td>
      <td>Enter the subject line for the email (e.g. <em>Your Personalized Quiz Recommendations</em>).</td>
    </tr>
  </tbody>
</table>

## Email Builder

The built-in drag-and-drop **Email Builder** allows you to design responsive, branded emails with custom layouts, rich typography, and dynamic quiz blocks.

The builder workspace is divided into:

* **Left Panel (Tabs)**: Switch between **Block** (content elements, quiz widgets, layouts) and **Layer** (element hierarchy).
* **Center Canvas**: Live visual editor with responsive preview controls.
* **Right Panel (Attributes Inspector)**: Customize styling, spacing, typography, and backgrounds for selected elements.

### Canvas Controls

At the top of the center canvas, you can toggle preview modes and edit states:

* **Edit Mode** (<Icon icon="pen-to-square" color="#000000" />): Select, drag, and configure elements on the canvas.
* **Desktop Preview** (<Icon icon="desktop" color="#000000" />): Preview the email layout as it will appear on desktop screens.
* **Mobile Preview** (<Icon icon="mobile-screen" color="#000000" />): Check how the responsive layout stacks on mobile devices.
* **Undo / Redo**: Revert or reapply recent design changes.

## Content Blocks & Dynamic Elements

Under the **Block** tab, you have access to standard content blocks, dynamic Quizify components, personalization tags, and multi-column layouts.

### Standard Content Blocks

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

  <tbody>
    <tr>
      <td><strong>Text</strong></td>
      <td>Add headings, paragraphs, or rich formatted text blocks.</td>
    </tr>

    <tr>
      <td><strong>Image</strong></td>
      <td>Insert logos, banner graphics, or product visuals with customizable dimensions.</td>
    </tr>

    <tr>
      <td><strong>Button</strong></td>
      <td>Add customizable Call-to-Action (CTA) buttons linking to your storefront or checkout.</td>
    </tr>

    <tr>
      <td><strong>Social</strong></td>
      <td>Include social media profile icons and links (Instagram, Facebook, Twitter, TikTok, etc.).</td>
    </tr>

    <tr>
      <td><strong>Divider</strong></td>
      <td>Insert horizontal separating lines between sections.</td>
    </tr>

    <tr>
      <td><strong>Spacer</strong></td>
      <td>Add vertical white space to control layout breathing room.</td>
    </tr>

    <tr>
      <td><strong>Hero</strong></td>
      <td>Create prominent header banners with background images and overlay text.</td>
    </tr>

    <tr>
      <td><strong>Wrapper</strong></td>
      <td>Container block that groups sections and manages page boundary widths.</td>
    </tr>
  </tbody>
</table>

### Dynamic Quizify Blocks

Quizify provides dynamic smart blocks that automatically populate customer-specific data when the email is sent, allowing you to design personalized result emails:

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

  <tbody>
    <tr>
      <td><strong>Recommended Products</strong></td>
      <td>Automatically displays the dynamic product recommendations assigned to the customer based on their quiz answers.</td>
    </tr>

    <tr>
      <td><strong>Question Answers</strong></td>
      <td>Inserts a full summary of the customer's answered questions and selected choices.</td>
    </tr>

    <tr>
      <td><strong>View Result Button</strong></td>
      <td>Adds a personalized button that directs the customer to their full online quiz result page.</td>
    </tr>
  </tbody>
</table>

<div class="qh-info-banner" role="note">
  <span class="qh-info-banner-icon" aria-hidden="true" />

  <p>You can drag and drop these blocks into your email canvas to create a fully customized, personalized result email that matches each customer's quiz responses and recommendations.</p>
</div>

### Personalization Placeholders

Insert dynamic merge tags into any text block to automatically insert personalized customer details:

<table>
  <thead>
    <tr>
      <th>Placeholder Tag</th>
      <th>Output Value</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>
          {"{{first_name}}"}
        </code>
      </td>

      <td>Customer's first name collected in the User Form.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{last_name}}"}
        </code>
      </td>

      <td>Customer's last name collected in the User Form.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{email}}"}
        </code>
      </td>

      <td>Customer's email address.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{phone}}"}
        </code>
      </td>

      <td>Customer's contact phone number.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{quiz_title}}"}
        </code>
      </td>

      <td>Name of the completed quiz.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{website_url}}"}
        </code>
      </td>

      <td>URL of your store website.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{view_result_url}}"}
        </code>
      </td>

      <td>Direct link for the customer to view their personalized quiz results page.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{completed_on}}"}
        </code>
      </td>

      <td>Date and time when the quiz was completed.</td>
    </tr>

    <tr>
      <td>
        <code>
          {"{{time_taken}}"}
        </code>
      </td>

      <td>Total time taken by the customer to complete the quiz.</td>
    </tr>
  </tbody>
</table>

### Multi-Column Layouts

Organize multiple content blocks side-by-side using pre-configured column structures:

* **2 Columns**: 50/50, 33/66, 66/33, etc.
* **3 Columns**: Equal thirds or asymmetric column distributions.
* **4 Columns**: 4-column balanced grid for badges, features, or product collections.

## Layer Management

The **Layer** tab displays the complete hierarchical tree of your email template:

```text theme={null}
Page
└── Wrapper
    └── Section
        └── Column
            ├── Text (Heading)
            ├── Image (Banner)
            ├── Recommended Products
            └── Button (CTA)
```

### Layer Tools

* **Expand / Collapse**: Click the arrow icon next to any parent element (`Page`, `Wrapper`, `Section`, `Column`) to show or hide child items.
* **Reorder Position**: Hover over an element and drag the handle up or down to reposition the item in the email structure.
* **Hide / Show**: Hover over an item and click the **Eye icon** (<Icon icon="eye" color="#000000" />) to toggle visibility without deleting the block.
* **Select for Styling**: Click any node in the layer tree to instantly open its specific attributes in the right sidebar.

## Email Editor Attributes & Styling

The right-hand attributes panel updates based on the currently selected element or page level.

### Page Attributes / Theme Settings

Controls global defaults for the entire email:

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

  <tbody>
    <tr>
      <td><strong>Font Family</strong></td>
      <td>Global typography family for the entire email (e.g. Arial, Helvetica, Inter, sans-serif).</td>
    </tr>

    <tr>
      <td><strong>Font Size & Weight</strong></td>
      <td>Base font size (in px) and font weight (Regular 400, Bold 700).</td>
    </tr>

    <tr>
      <td><strong>Line Height</strong></td>
      <td>Line spacing multiplier for readability (e.g. <code>1.5</code> or <code>1.7</code>).</td>
    </tr>

    <tr>
      <td><strong>Text Color</strong></td>
      <td>Default text color applied to body content throughout the email.</td>
    </tr>

    <tr>
      <td><strong>Background</strong></td>
      <td>Overall page background color surrounding the email container.</td>
    </tr>

    <tr>
      <td><strong>Content Background</strong></td>
      <td>Background color for the inner email content area.</td>
    </tr>
  </tbody>
</table>

### Wrapper Attributes

Controls outer wrapper containers and layout boundaries:

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

  <tbody>
    <tr>
      <td><strong>Background Image</strong></td>
      <td>Upload a custom image (supports <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>) or enter an image URL to set as the container background.</td>
    </tr>

    <tr>
      <td><strong>Background Color</strong></td>
      <td>Choose a background color using the color picker or hex color value (e.g. <code>#F5F5F5</code>).</td>
    </tr>

    <tr>
      <td><strong>Background Repeat</strong></td>
      <td>Control how the background image repeats across the wrapper: <strong>No repeat</strong>, <strong>Repeat</strong>, <strong>Repeat X</strong> or <strong>Repeat Y</strong></td>
    </tr>

    <tr>
      <td><strong>Background Size</strong></td>
      <td>Set the sizing behaviour of the background image (e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>, or custom dimensions).</td>
    </tr>
  </tbody>
</table>

### Section Attributes

Controls individual horizontal sections:

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

  <tbody>
    <tr>
      <td><strong>Background Image</strong></td>
      <td>Upload a custom image (supports <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>) or enter an image URL to set as the section background.</td>
    </tr>

    <tr>
      <td><strong>Background Color</strong></td>
      <td>Choose a background color using the color picker or hex color value (e.g. <code>#F5F5F5</code>).</td>
    </tr>

    <tr>
      <td><strong>Background Repeat</strong></td>
      <td>Control how the background image repeats across the section: <strong>No repeat</strong>, <strong>Repeat</strong>, <strong>Repeat X</strong> or <strong>Repeat Y</strong></td>
    </tr>

    <tr>
      <td><strong>Background Size</strong></td>
      <td>Set the sizing behaviour of the background image (e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>, or custom dimensions).</td>
    </tr>
  </tbody>
</table>

### Column Attributes

Controls individual vertical columns inside a section:

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

  <tbody>
    <tr>
      <td><strong>Width</strong></td>
      <td>Set custom column width in pixels or percentage (e.g. <code>50%</code> or <code>300px</code>).</td>
    </tr>

    <tr>
      <td><strong>Vertical Align</strong></td>
      <td>Control vertical content alignment inside the column: <strong>Top</strong>, <strong>Middle</strong>, or <strong>Bottom</strong>.</td>
    </tr>

    <tr>
      <td><strong>Padding</strong></td>
      <td>Set individual inner padding in pixels for <strong>Top (px)</strong>, <strong>Left (px)</strong>, <strong>Bottom (px)</strong>, and <strong>Right (px)</strong>.</td>
    </tr>

    <tr>
      <td><strong>Background Color</strong></td>
      <td>Choose a background color for the column using the color picker or hex value.</td>
    </tr>

    <tr>
      <td><strong>Border</strong></td>
      <td>Specify column border style (e.g. <code>none</code>, <code>1px solid #E5E7EB</code>).</td>
    </tr>

    <tr>
      <td><strong>Border Radius</strong></td>
      <td>Set column corner roundness in pixels (<code>px</code>).</td>
    </tr>
  </tbody>
</table>

### Text Attributes

Controls text blocks, typography, and optional inline logos:

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

  <tbody>
    <tr>
      <td><strong>Logo</strong></td>
      <td>Upload a custom logo image (supports <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>) with edit and delete controls, plus custom <strong>Width (px)</strong> and <strong>Height (px)</strong> fields.</td>
    </tr>

    <tr>
      <td><strong>Color</strong></td>
      <td>Set the text font color  using the color picker or hex value.</td>
    </tr>

    <tr>
      <td><strong>Background Color</strong></td>
      <td>Set an optional background highlight color for the text block container.</td>
    </tr>

    <tr>
      <td><strong>Font Family</strong></td>
      <td>Select the font family from the dropdown.</td>
    </tr>

    <tr>
      <td><strong>Font Size</strong></td>
      <td>Specify font size in pixels (<code>px</code>) (e.g. <code>28px</code>).</td>
    </tr>

    <tr>
      <td><strong>Line Height</strong></td>
      <td>Set line spacing multiplier (e.g. <code>1.25</code> or <code>1.5</code>).</td>
    </tr>

    <tr>
      <td><strong>Letter Spacing</strong></td>
      <td>Set character spacing distance in pixels (<code>px</code>) (e.g. <code>0px</code>).</td>
    </tr>

    <tr>
      <td><strong>Text Decoration</strong></td>
      <td>Choose text decoration style: <strong>None</strong>, <strong>Underline</strong>, or <strong>Line-through, etc</strong>.</td>
    </tr>

    <tr>
      <td><strong>Font Weight</strong></td>
      <td>Select font thickness from the dropdown </td>
    </tr>

    <tr>
      <td><strong>Align</strong></td>
      <td>Set horizontal text alignment: <strong>Left</strong>, <strong>Center</strong>, <strong>Right</strong>, or <strong>Justify</strong>.</td>
    </tr>

    <tr>
      <td><strong>Font Style</strong></td>
      <td>Choose font styling: <strong>Normal</strong> or <strong>Italic</strong>.</td>
    </tr>
  </tbody>
</table>

### Attribute Hierarchy Summary

<table className="qh-table-hierarchy">
  <colgroup>
    <col style={{ width: "20%" }} />

    <col style={{ width: "32%" }} />

    <col style={{ width: "48%" }} />
  </colgroup>

  <thead>
    <tr>
      <th>Level</th>
      <th>Scope</th>
      <th>Primary Controls</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><strong>Page</strong></td>
      <td>Entire email canvas</td>
      <td>Container width, responsive breakpoint, global fonts, background colors</td>
    </tr>

    <tr>
      <td><strong>Wrapper</strong></td>
      <td>Main outer containers</td>
      <td>Outer padding, background image/color, border radius</td>
    </tr>

    <tr>
      <td><strong>Section</strong></td>
      <td>Horizontal content rows</td>
      <td>Full-width toggle, section padding, row grouping</td>
    </tr>

    <tr>
      <td><strong>Column</strong></td>
      <td>Vertical grid partitions</td>
      <td>Column width percentage, vertical alignment, column background</td>
    </tr>

    <tr>
      <td><strong>Content Blocks</strong></td>
      <td>Individual text, images, buttons</td>
      <td>Typography, CTA links, image sizing, dynamic Quizify placeholders</td>
    </tr>
  </tbody>
</table>

## Live Preview

1. Use the **Desktop** and **Mobile** preview icons to inspect layout stacking and readability.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Can I send different emails based on the customer's quiz results?">
    * Yes. The dynamic **Recommended Products** and **Question Answers** blocks automatically pull the exact result and product matches assigned to each customer based on your result page logic.
  </Accordion>

  <Accordion title="What happens if a customer does not provide their name in the quiz?">
    * If the customer does not provide a name in the User Form, the <code>{"{{first_name}}"}</code> tag will gracefully omit or display standard greeting text configured in your template.
  </Accordion>

  <Accordion title="Can I delay when the customer receives their result email?">
    * Yes. Use the **Send After** dropdown under the **Send Email** settings to delay delivery (Immediately, 1 hour, 6 hours, 10 hours, or 24 hours).
  </Accordion>

  <Accordion title="What image formats are supported for logos and background images?">
    * Quizify supports all standard web image formats, including <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, and <code>.gif</code>.
  </Accordion>

  <Accordion title="How do I ensure emails don't land in the customer's spam folder?">
    * Set a recognizable **From Name** matching your store brand.
    * Use a verified domain email in the **Reply-to Email** field.
    * Write a clear, engaging **Subject Line** without excessive capitalization or spam trigger words.
  </Accordion>
</AccordionGroup>

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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.