# Design your email templates

{% embed url="<https://youtu.be/bHWjmER5AJA/>" %}

{% hint style="info" %}

## Before you begin

* Want to use pre-built email templates? Check out [Explore pre-built email templates](/xflow-app/email-templates/explore-pre-built-email-templates.md)
* Learn more how to create an email template: [Create an email template](/xflow-app/email-templates/create-an-email-template.md)
  {% endhint %}

## Email template builder overview

Get an overview of the Template editor and learn how to design, customize, and configure your email templates before activating them for use in workflows.

<figure><img src="/files/ttU71tbPXprLSjuOCrGk" alt=""><figcaption></figcaption></figure>

<details>

<summary>Main features</summary>

* **Add section:** Build your email layout by adding content sections such as images, text, buttons, or dividers.

*Learn more:* [#content-blocks](#content-blocks "mention")

<figure><img src="/files/9Qz6KxDIOuZN8eLNuNUK" alt=""><figcaption></figcaption></figure>

* **Body settings:** Customize the background color, padding, and overall layout of your email.
  * **Background color:** Set the background color for the email.
  * **Padding:** Adjust the spacing inside the email.
  * **Content container:**&#x20;
    * **Desktop width:** Define the maximum width of the email content displayed on desktop devices.
    * **Padding:** Adjust the inner spacing between the content and the edges of the email container.
    * **Background color:** Set the background color of the email content area.
    * **Border color:** Add or change the border color around the email container.
    * **Border radius:** Round the corners of the email container for a softer look.

</details>

<details>

<summary>Top toolbar options</summary>

<figure><img src="/files/d1ecMcxZu2HDPlmP7e35" alt=""><figcaption></figcaption></figure>

* **Undo/Redo**: Revert or reapply changes made in the email editor.
* **Send test:** Click **Send test** to send a preview email to yourself or your team and verify the design and content.

{% hint style="info" %}
Learn more: [Preview and test your email](/xflow-app/email-templates/preview-and-test-your-email.md)
{% endhint %}

* **Edit configs:** Open the **Edit email configs** panel to set up the subject line, preview text, sender name, and reply-to address.

{% hint style="info" %}
Learn more: [Control how your email is presented with email configs](/xflow-app/email-templates/control-how-your-email-is-presented-with-email-configs.md)
{% endhint %}

* **Save & activate:** Once your template is finalized, click **Save & activate** to make it active and available for use in your workflows.

</details>

## Content blocks

Content blocks allow you to build and structure your email by adding different types of elements to your template.

### General section style

Customize the appearance and layout of all your email sections for better visual balance and design consistency.

<figure><img src="/files/Ad2pYdZ6HsGGtfrdAHo5" alt="" width="563"><figcaption></figcaption></figure>

* **Alignment:** Choose how the content is aligned within the section (left, center, or right).
* **Padding:** Adjust the spacing around content to control how much white space surrounds it.
* **Background color:** Set a background color for the section.

<details>

<summary>Header</summary>

Customize the header section of your email template to include your brand identity.

<figure><img src="/files/Lyorna2z1YomJmjN18S5" alt=""><figcaption></figcaption></figure>

* **Layout:** Choose how the logo and store name are arranged.

<table><thead><tr><th width="343">Layout</th><th>Design</th></tr></thead><tbody><tr><td>Logo left | Store name right</td><td><img src="/files/kQfAIKfuOJWcrgKd03MZ" alt="" data-size="original"></td></tr><tr><td>Logo right | Store name left</td><td><img src="/files/cm3kjlUvMY9pkW4lZMA5" alt="" data-size="original"></td></tr><tr><td>Center vertically</td><td><img src="/files/fNmKtvO8AJhk5N34ce8W" alt="" data-size="original"></td></tr></tbody></table>

* **Logo and logo width:** Upload or change your store logo and adjust its width.
* **Store name:** Enter the name that will appear in your email header. Leave the field blank to hide it.
* **Font size & color:** Customize the font size and text color of your store name.
* **Font:** Select a font style that matches your brand.
* **Padding:** Adjust spacing around the header content.
* **Background color:** Set a background color to make your header stand out.

</details>

<details>

<summary>Text</summary>

Add and format text content, such as headings, paragraphs, or promotional messages.

<figure><img src="/files/ojXwVudWfDYRsOplwJ7i" alt=""><figcaption></figcaption></figure>

* **Text:** Enter and style your message using formatting options such as bold, italic, underline, alignment, lists, links, and connect Shopify's Liquid placeholders for dynamic data.
* **Font:** Choose a font that fits your brand’s visual style.
* **Font size:** Adjust the text size.
* **Text color:** Set a color that complements your design and improves contrast.

</details>

<details>

<summary>Button</summary>

Use the **Button block** to create call-to-action buttons that encourage customers to engage with your email.

<figure><img src="/files/DCj3iz2iKoyHxDj4NaVd" alt=""><figcaption></figcaption></figure>

* **Button label:** Set the text displayed on the button.
* **Link:** Add the URL where recipients will be directed when they click the button.
* **Font & font size:** Choose the button text style and adjust its size.
* **Text color:** Set the color of the button text.
* **Fill color:** Choose the button’s background color.
* **Fill style:** Select between **Solid** or **Outline** button styles.

<table><thead><tr><th width="131.0052490234375">Style</th><th>Design</th></tr></thead><tbody><tr><td>Solid</td><td><div><figure><img src="/files/GpNdScRwM6zWwRGEcwLo" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Outline</td><td><div><figure><img src="/files/9tZhcPoy0BumgGQyVOnl" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

* **Shape:** Customize the button corners (square, rounded, or pill-shaped).

<table><thead><tr><th width="131.0052490234375">Shape</th><th>Design</th></tr></thead><tbody><tr><td>Square</td><td><div><figure><img src="/files/fqtD6pEGmRViAh1knoO3" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Rounded</td><td><div><figure><img src="/files/cF9sKBN0m4wX97HZfNA1" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Pill-shaped</td><td><div><figure><img src="/files/OBGe3CHUIZnL6b0nx0y9" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

* **Width:** Choose between **Auto** (fits text) or **Full** (spans container width).

<table><thead><tr><th width="131.0052490234375">Width</th><th>Design</th></tr></thead><tbody><tr><td>Auto</td><td><div><figure><img src="/files/LxSZk6lGbPD3ioaJdNlv" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Full</td><td><div><figure><img src="/files/urvoRumimLadFsgPT4i2" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

</details>

<details>

<summary>Image</summary>

Use the **Image block** to add a visual element to your email. This block lets you upload an image, add alt text, include a link, and customize its size and style to match your design.

<figure><img src="/files/h0DOTItSkQOMolsTnVhD" alt=""><figcaption></figcaption></figure>

* **Image:** Select an image to upload from your media library.
* **Alt text** (optional): Add a short description of the image.
* **Image link:** Enter a URL to make the image clickable, directing customers to a product page or any link you choose.
* **Image width:** Adjust the width of the image.
* **Border radius:** Customize the image’s corner rounding.

</details>

<details>

<summary>Video</summary>

The **Video block** allows you to add a video, increasing engagement by linking to YouTube or other videos, and providing an effective way to showcase product demos, tutorials, or promotional content.

<figure><img src="/files/Jvf8aSasC4FLGJ44xYij" alt=""><figcaption></figcaption></figure>

* **Video URL:** Enter a YouTube link to embed a video preview in your email.
* **Alt text** (optional): Add a brief description of the video.
* **Preview image:** Upload a custom thumbnail for the email and link to the video.
* **Video width:** Adjust the video preview size.
* **Border radius:** Customize the corner rounding of the video.

</details>

<details>

<summary>Image with text</summary>

The **Image with Text block** lets you display an image alongside text in your email, making it ideal for showcasing products, announcing promotions, or sharing information with your audience.

<figure><img src="/files/hT1c9U9cQkD3WjbeBkHB" alt=""><figcaption></figcaption></figure>

* **Content:** Includes blocks for an **image**, **text**, and an optional **button.**
* **Layout**: Choose whether the image appears on the left or right side of the text.

<table><thead><tr><th width="202.172119140625">Layout</th><th>Design</th></tr></thead><tbody><tr><td>Image left | Text right</td><td><div><figure><img src="/files/CAa85vomxq6xVLVJghHt" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Image right | Text left</td><td><div><figure><img src="/files/rPDACPgfQzHCi2S4fHgW" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

</details>

<details>

<summary>Product</summary>

Use the **Product block** to automatically display key product details for promotional or restock notifications.

<figure><img src="/files/3EwbffUt4tegrKI5Y0YN" alt=""><figcaption></figcaption></figure>

* **Select product:** Choose a product to feature in the email, or leave blank to use the product referenced in your workflow.
* **Content options:** Toggle visibility for the **Image**, **Title**, **Price**, and **Buy button** based on your design preferences.

<table><thead><tr><th width="100.18756103515625">Content</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td><p></p><ul><li><strong>Select an image:</strong> Upload or choose an image to display. Leave blank to use the default product image.</li><li><strong>Border radius:</strong> Adjust the corner roundness of the image for a softer or more modern look.</li></ul></td></tr><tr><td>Title</td><td><p></p><ul><li><strong>Font:</strong> Choose a font style that matches your brand’s design.</li><li><strong>Font size:</strong> Adjust the size of the product title for better visibility.</li><li><strong>Text color:</strong> Set the color of the product title to ensure clear contrast and readability.</li><li><strong>Font weight</strong>: You can choose between <strong>regular</strong> or <strong>bold</strong>.</li></ul></td></tr><tr><td>Price</td><td><p></p><ul><li><strong>Font:</strong> Choose the font style for the price text.</li><li><strong>Font size:</strong> Adjust the size of the price.</li><li><strong>Text color:</strong> Set the color of the product price.</li><li><p><strong>Compare at price:</strong> Optionally show the original price with a strikethrough to highlight discounts or sale prices.</p><ul><li><strong>Show price strikethrough:</strong> Enable this option to display the original price crossed out.</li><li><strong>Color:</strong> Choose the color for the strikethrough price text.</li></ul></li></ul></td></tr><tr><td>Buy button</td><td><p></p><ul><li><strong>Button link:</strong> This button automatically adds the product to the cart and links the customer to the checkout page.</li><li><strong>Button label:</strong> Set the text that appears on the button.</li><li><strong>Font &#x26; font size:</strong> Choose a font style and adjust the size.</li><li><strong>Text color:</strong> Set the color of the button text.</li><li><strong>Fill color:</strong> Choose the background color of the button.</li><li><strong>Fill style:</strong> Select between <strong>Solid</strong> or <strong>Outline</strong> styles.</li><li><strong>Shape:</strong> Adjust the button’s corners (square, rounded, or pill-shaped).</li><li><strong>Width:</strong> Choose <strong>Auto</strong> (fits text) or <strong>Full</strong> (spans the container width).</li></ul></td></tr><tr><td>View details</td><td><p>A button that links to the product detail page.<br></p><ul><li><strong>Button label:</strong> Set the text that appears on the button.</li><li><strong>Font &#x26; font size:</strong> Choose a font style and adjust the size.</li><li><strong>Text color:</strong> Set the color of the button text.</li><li><strong>Fill color:</strong> Choose the background color of the button.</li><li><strong>Fill style:</strong> Select between <strong>Solid</strong> or <strong>Outline</strong> styles.</li><li><strong>Shape:</strong> Adjust the button’s corners (square, rounded, or pill-shaped).</li><li><strong>Width:</strong> Choose <strong>Auto</strong> (fits text) or <strong>Full</strong> (spans the container width).</li></ul></td></tr></tbody></table>

* **Width:** Adjust the product block width to fit your email layout.

</details>

<details>

<summary>Discount code</summary>

Use the **Discount code** block to display promotional offers and encourage customers to complete their purchase.

<figure><img src="/files/9Yws4kPt6OC14B5S2dRM" alt=""><figcaption></figcaption></figure>

* **Button link:** Links to the store homepage. The discount code will automatically apply at checkout when customers use this link.
* **Discount code:** Enter the discount code text.
* **Font & font size:** Choose a font style and adjust the size to make the code easier to read.
* **Text color:** Set the text color for the discount code.
* **Background color:** Customize the background color to highlight the code.
* **Width:** Choose **Auto** (fits the button label) or **Full** width for the button display.
* **Border radius:** Adjust the corner roundness of the discount code block for your preferred look.

</details>

<details>

<summary>Divider</summary>

Use the **Divider block** to visually separate different sections of your email and improve readability.

<figure><img src="/files/pLEuMbO4fhCqfhYhWGRM" alt=""><figcaption></figcaption></figure>

* **Style:** Choose the divider style: **Solid**, **Dashed**, or **Dotted**.

<table><thead><tr><th width="98.09930419921875">Style</th><th>Design</th></tr></thead><tbody><tr><td>Solid</td><td><div><figure><img src="/files/xn86HyarreIoNffCF9DH" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Dashed</td><td><div><figure><img src="/files/IjTFgHMcyq4LxkOHAA0r" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td>Dotted</td><td><div><figure><img src="/files/57olBEOLDW6Bjhh2gMbx" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

* **Width:** Adjust the divider’s length as a percentage of the email width.
* **Thickness:** Set the line thickness in pixels.
* **Color:** Choose the color of the divider line to match your email design.

</details>

<details>

<summary>Spacer</summary>

Use the **Spacer block** to add empty space between sections or elements in your email for better visual balance.

<figure><img src="/files/qXjPhodZxWg6T0nmts0Z" alt=""><figcaption></figcaption></figure>

* **Space height:** Adjust the vertical space in pixels to control the gap between elements.

</details>

<details>

<summary>Social icons</summary>

Use the **Social icons** block to add links to your store’s social media profiles and encourage customers to connect with your brand.

<figure><img src="/files/4sqCDZme0FufbAZ8EyF4" alt=""><figcaption></figcaption></figure>

* **Icon color:** Choose between **Light** or **Dark** icons.

<table><thead><tr><th width="103.260986328125">Color</th><th>Design</th></tr></thead><tbody><tr><td><strong>Light</strong></td><td><div><figure><img src="/files/DQSgbHHbmDhxpKAjTDfF" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Dark</strong></td><td><div><figure><img src="/files/ca8chldEs3oaA8s3i7VS" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

* **Icon size:** Select from **Small**, **Medium**, or **Large** to fit your design layout.

<table><thead><tr><th width="109.877197265625">Size</th><th>Design</th></tr></thead><tbody><tr><td><strong>Small</strong></td><td><div><figure><img src="/files/HoAKprKoe85BgbpeTKmu" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Medium</strong></td><td><div><figure><img src="/files/zIUCdgY3NoTEogSFxIs6" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Large</strong></td><td><div><figure><img src="/files/ROBbacEUrAUJQ2gxJac9" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

* **Social links:** Add URLs for your social platforms (Facebook, Instagram, X /Twitter, LinkedIn, YouTube, TikTok, Pinterest, Tumblr, Snapchat, Reddit, Telegram, WhatsApp, Discord, Twitch, Threads). The corresponding icons will automatically appear in the email.

</details>

<details>

<summary>Footer</summary>

Use the **Footer** block to include important business and contact information at the bottom of your email.&#x20;

<figure><img src="/files/SoQWHySGX6Q9Y1qv11dd" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="132.881103515625">Content</th><th>Description</th></tr></thead><tbody><tr><td>Social icons</td><td><ul><li>Display your social media links to encourage customers to follow or connect with your brand.</li></ul></td></tr><tr><td>Store name</td><td><p></p><ul><li><strong>Text editor:</strong> Add and format your store name</li><li><strong>Font:</strong> Choose a font style that aligns with your brand identity.</li><li><strong>Font size:</strong> Adjust the text size.</li><li><strong>Text color:</strong> Set the color of your store name to match your footer design.</li></ul></td></tr><tr><td>Store address</td><td><p></p><ul><li><strong>Text:</strong> Enter and format your store’s address.</li><li><strong>Font:</strong> Choose a font style that fits your email design.</li><li><strong>Font size:</strong> Adjust the size.</li><li><strong>Text color:</strong> Set the color of your address text.</li></ul></td></tr><tr><td>Unsubscribe details</td><td><p></p><ul><li><strong>Text:</strong> Customize the unsubscribe message.</li><li><strong>Font:</strong> Choose a font style that matches your footer design.</li><li><strong>Font size:</strong> Adjust the text size.</li><li><strong>Text color:</strong> Set the text color.</li></ul></td></tr><tr><td>Logo</td><td><ul><li><strong>Image</strong>: Upload an image or your store logo to display in the email footer.</li><li><strong>Alt text (optional)</strong>: Add descriptive text for your image. This helps improve accessibility and is shown if the image cannot be loaded.</li><li><strong>Image link</strong>: Add a URL to make the logo clickable.</li><li><strong>Image width</strong>: Adjust the size of the logo to fit your email layout.</li><li><strong>Border radius</strong>: Set the corner roundness of the image,</li></ul></td></tr></tbody></table>

</details>

## Related articles

{% content-ref url="/pages/tEG7HvAAm4FAYdcLDJSn" %}
[Explore pre-built email templates](/xflow-app/email-templates/explore-pre-built-email-templates.md)
{% endcontent-ref %}

{% content-ref url="/pages/nXwNg4IKnFUKyqmD5GJb" %}
[Create an email template](/xflow-app/email-templates/create-an-email-template.md)
{% endcontent-ref %}

{% content-ref url="/pages/27ltXN2pm7mhbqMs6IcG" %}
[Understanding personalization variables in email templates](/xflow-app/email-templates/understanding-personalization-variables-in-email-templates.md)
{% endcontent-ref %}

{% content-ref url="/pages/9TMXBePs6zA8bV4oj3K6" %}
[Preview and test your email](/xflow-app/email-templates/preview-and-test-your-email.md)
{% endcontent-ref %}

{% content-ref url="/pages/TKnI92gQJmDkXsTvgMSw" %}
[Manage email templates](/xflow-app/email-templates/manage-email-templates.md)
{% endcontent-ref %}

{% content-ref url="/pages/7mi2grXoNsptsyKEmoV6" %}
[Use email templates in campaigns and workflows](/xflow-app/email-templates/use-email-templates-in-campaigns-and-workflows.md)
{% endcontent-ref %}

{% content-ref url="/pages/Rey69myeVHiNlaksnEsa" %}
[Email templates: FAQs](/xflow-app/email-templates/email-templates-faqs.md)
{% endcontent-ref %}

***

#### 📩 **Need help?**

We’re here to make your XFlow experience smooth and successful.\
Our support team is always ready to assist you—no matter how big or small your question is.

<a href="https://admin.shopify.com/apps/xflow?chat=true&#x26;utm_source=foxecom&#x26;utm_medium=help_center_xflow_design_your_email_templates&#x26;utm_campaign=cta_button&#x26;utm_term=chat_now" class="button primary" data-icon="comment-lines">Chat now</a> <a href="mailto:contact@help.xflow.so" class="button secondary" data-icon="envelopes">Message us</a>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/xflow-app/email-templates/design-your-email-templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.