Email template editor
Learn how to design, customize, and manage email templates using the Email template editor — including adding content blocks, adjusting styles, and configuring settings before activating your template
Template editor 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.
Main features
Add Section: Build your email layout by adding content sections such as images, text, buttons, or dividers.
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:
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.
Top toolbar options
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.
📝 Read more about test email: Preview and test your email
Edit configs: Open the Edit email configs panel to set up the subject line, preview text, sender name, and reply-to address.
📝 Read more about email configs: Email configs
Save & activate: Once your template is finalized, click Save & activate to make it active and available for use in your workflows.
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.
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.
Header
Customize the header section of your email template to include your brand identity.
Layout: Choose how the logo and store name are arranged.
Logo left | Store name right
Logo right | Store name left
Center vertically
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.
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.
Text
Add and format text content, such as headings, paragraphs, or promotional messages.
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.
Button
Use the Button Block to create call-to-action buttons that encourage customers to engage with your email.
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.
Solid
Outline
Shape: Customize the button corners (square, rounded, or pill-shaped).
Square
Rounded
Pill-shaped
Width: Choose between Auto (fits text) or Full (spans container width).
Auto
Full
Image
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.
Image: Select image to upload image 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.
Video
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.
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 that will appear in the email and link to the video.
Video width: Adjust the size of the video preview.
Border radius: Customize the roundness of the video corners.
Image with text
The Image with Text Block allows you to display an image alongside text within your email, making it ideal for showcasing products, announcing promotions, or sharing information with your audience.
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.
Image left | Text right
Image right | Text left
Product
Use the Product Block to showcase a specific product in your email template. This block helps you automatically display key product details for promotional or restock notifications.
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.
Image
Select an image: Upload or choose an image to display. Leave blank to use the default product image.
Border radius: Adjust the corner roundness of the image for a softer or more modern look.
Title
Font: Choose a font style that matches your brand’s design.
Font size: Adjust the size of the product title for better visibility.
Text color: Set the color of the product title to ensure clear contrast and readability.
Price
Font: Choose the font style for the price text.
Font size: Adjust the size of the price.
Text color: Set the color of the product price.
Compare at price: Optionally show the original price with a strikethrough to highlight discounts or sale prices.
Show price strikethrough: Enable this option to display the original price crossed out.
Color: Choose the color for the strikethrough price text.
Buy button
Button link: This button automatically adds the product to the cart and links the customer to the checkout page.
Button label: Set the text that appears on the button.
Font & font size: Choose a font style and adjust the size.
Text color: Set the color of the button text.
Fill color: Choose the background color of the button.
Fill style: Select between Solid or Outline styles.
Shape: Adjust the button’s corners (square, rounded, or pill-shaped).
Width: Choose Auto (fits text) or Full (spans the container width).
Width: Adjust the product block width to fit your email layout.
Discount code
Use the Discount Code block to display promotional offers and encourage customers to complete their purchase.
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 easily visible.
Text color: Set the text color for the discount code.
Background color: Customize the background color to highlight the code.
Width: Choose Auto or Full width for the button display.
Auto
Full
Border radius: Adjust the corner roundness of the discount code block for your preferred look.
Divider
Use the Divider Block to visually separate different sections of your email and improve readability.
Style: Choose the divider style: Solid, Dashed, or Dotted.
Solid
Dashed
Dotted
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.
Spacer
Use the Spacer Block to add empty space between sections or elements in your email for better visual balance.
Space height: Adjust the vertical space in pixels to control the gap between elements.
Footer
Use the Footer block to include important business and contact information at the bottom of your email.
Social icons
Display your social media links to encourage customers to follow or connect with your brand.
Store name
Text editor: Add and format your store name
Font: Choose a font style that aligns with your brand identity.
Font size: Adjust the text size.
Text color: Set the color of your store name to match your footer design.
Store address
Text: Enter and format your store’s address.
Font: Choose a font style that fits your email design.
Font size: Adjust the size.
Text color: Set the color of your address text.
Unsubscribe details
Text: Customize the unsubscribe message.
Font: Choose a font style that matches your footer design.
Font size: Adjust the text size.
Text color: Set the text color.
Save template for reuse
After designing your email, click Save as template to store it for future use. You can use the saved template as a starting point to design new templates, helping you maintain a consistent design and save time on setup.
Related articles
Create an email templateEmail configsPreview and test your emailManage email templateAssign email template📩 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.
Last updated
Social icons
Use the Social Icons block to add links to your store’s social media profiles and encourage customers to connect with your brand.
Icon color: Choose between Light or Dark icons.
Light
Dark
Icon size: Select from Small, Medium, or Large to fit your design layout.
Small
Medium
Large
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.