Custom HTML Block

The Custom HTML block allows you to add custom HTML code directly to your email templates. Use this block for advanced formatting, custom structures, or HTML that isn’t available through other blocks.

Adding a Custom HTML Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Custom HTML” or find it in the “Widgets” category
3. Click to insert the block
4. Enter your HTML code in the editor

Writing HTML for Email

Email-Safe HTML

Email clients have limited HTML and CSS support. Follow these guidelines:

Supported HTML Elements

• Tables: Use tables for layout (most reliable)
• Inline Styles: Use inline CSS styles
• Basic Elements: div, span, p, a, img, strong, em
• Limited CSS: Basic properties like color, background-color, padding, margin

Avoid

• External Stylesheets: Not supported
• JavaScript: Not supported
• Complex CSS: Advanced CSS features may not work
• CSS Classes: Limited support, use inline styles instead

Best Practices

1. Use Tables for Layout: Tables are the most reliable layout method in email
2. Inline Styles: Always use inline CSS styles
3. Test Thoroughly: Test HTML in multiple email clients
4. Keep It Simple: Use simple, straightforward HTML
5. Absolute URLs: Use absolute URLs for images and links
6. Email-Safe Colors: Use hex color codes
7. Width Constraints: Set explicit widths (often 600px max for email)

Common Use Cases

Custom Tables

Create custom table layouts:

<table width="100%" cellpadding="10" cellspacing="0" border="0">
  <tr>
    <td style="background-color: #f0f0f0; padding: 10px;">Cell 1</td>
    <td style="background-color: #ffffff; padding: 10px;">Cell 2</td>
  </tr>
</table>
Code language: HTML, XML (xml)

Custom Styled Content

Add custom-styled content:

<div style="background-color: #ff0000; color: #ffffff; padding: 20px; text-align: center;">
  Custom styled content
</div>
Code language: HTML, XML (xml)

Merge Tags in HTML

You can use merge tags within HTML:

<p>Hello, {user:first_name}!</p>
<a href="{order_url}">View Order</a>
Code language: HTML, XML (xml)

Styling Guidelines

Inline Styles

Always use inline styles:

<!-- Good -->
<div style="color: #333333; font-size: 16px; padding: 10px;">Content</div>
<!-- Avoid -->
<div class="content">Content</div>
<style>.content { color: #333333; }</style>
Code language: HTML, XML (xml)

Colors

Use hex color codes:

<div style="color: #333333; background-color: #f5f5f5;">Content</div>
Code language: HTML, XML (xml)

Spacing

Use padding and margin in inline styles:

<div style="padding: 20px; margin: 10px 0;">Content</div>
Code language: HTML, XML (xml)

Troubleshooting

HTML Not Rendering

• Verify HTML syntax is correct
• Check that HTML is email-safe
• Test in multiple email clients
• Some email clients strip certain HTML

Styles Not Applying

• Use inline styles only
• Avoid external stylesheets
• Test in multiple email clients
• Some CSS properties may not be supported

Images Not Displaying

• Use absolute URLs for images
• Ensure images are hosted on a reliable server
• Include alt text for images
• Test image URLs in a browser

Links Not Working

• Use absolute URLs for links
• Verify link URLs are correct
• Test links in a browser
• Some email clients may modify links

Layout Issues

• Use tables for layout
• Set explicit widths
• Test in multiple email clients
• Keep layouts simple

Security Considerations

• Sanitization: HTML is sanitized for security
• Scripts: JavaScript is removed for security
• External Resources: Be cautious with external resources
• User Input: Never trust user-provided HTML without sanitization

Best Practices

1. Test Extensively: Test custom HTML in multiple email clients
2. Keep It Simple: Use simple HTML for better compatibility
3. Inline Styles: Always use inline CSS styles
4. Tables for Layout: Use tables for reliable layouts
5. Absolute URLs: Use absolute URLs for all external resources
6. Validate HTML: Ensure HTML is valid and well-formed
7. Documentation: Document custom HTML for future reference