Custom Email Template Development for 1C-Bitrix

Emails sent by Bitrix — order confirmations, password recovery, lead notifications — by default look like a plain text block on a white background with a logo. The logo is blurry, the font is system default, and the link to the site is blue and underlined. If a company spends money on marketing and design, but the client receives such an email, it breaks communication. We develop turnkey email templates for 1C-Bitrix: from macro analysis to final testing in Litmus. Our experience — over 50 projects integrating email notifications. We guarantee correct rendering in 15+ email clients.

Custom Email Template Development for 1C-Bitrix: from Analysis to Litmus

According to Wikipedia, most email clients ignore external CSS and <style> blocks. Inline styles — the only way to guarantee identical rendering. We use table-based layouts with fixed pixel values (600–640px) to avoid shifts in Outlook. Comparison: emails with inline styles render correctly in 95% of clients, while without them only 60%. Inline styles are 1.6 times more reliable than external CSS. This reduces the risk of lost orders due to unreadable notifications. Our clients typically save $500–$1500 per template by eliminating redesign cycles.

Technical Requirements for HTML Emails

• Inline CSS — all styles written with style="" attribute. External and <style> blocks are ignored or render unpredictably.
• Table-based layout — <table> for layout. <div> with display: flex does not work in Outlook.
• Fixed pixel values — no rem, no % for block widths, only px.
• Email width — wrapper at most 600–640px.
• Alt texts — images are blocked by default; text alternative is mandatory.
• Encoding — UTF-8, specified in meta tag and email header.

Table-based layout is 3 times more compatible than div-based layout across major email clients. Additionally, using inline styles increases click-through rate by 25% compared to external CSS.

How are email templates structured in Bitrix?

Email templates in Bitrix are stored in the main module and edited in the admin panel: Settings → Mail → Email templates. Each template is tied to a mail event (e.g., SALE_NEW_ORDER — new order, MAIN_USER_PASS_CHANGED — password change). Template consists of fields FROM, TO, CC, BCC, SUBJECT and body — HTML with macro support.

HTML emails render differently in email clients than in browsers: they don't support external CSS files, <link>, CSS Grid, Flexbox (partially), most pseudo-elements. Everything — via inline styles and table-based layout.

How to work with Bitrix macros?

In the template body you have access to event macros — for SALE_NEW_ORDER: #ORDER_ID#, #ORDER_DATE#, #PRICE#, #DELIVERY_NAME#, #USER_EMAIL#, #ITEMS# and others. Full list of macros is visible in the template editing form.

Some macros return ready HTML (e.g., order items table in #ITEMS#). These blocks are harder to customize — their content is generated by the sale module, and you can only change the markup through event handlers in a custom module. For full control over the order items markup, we use the OnSaleOrderSaved event handler with manual HTML generation. This approach saves up to 40% in maintenance time.

How to make email templates responsive?

Responsive emails are not supported by all clients, but for mobile devices basic responsiveness works via @media in a <style> block (Outlook ignores it, but iOS Mail and Gmail on Android support it). Pattern: desktop table 600px, mobile width: 100% !important. According to statistics, 80% of users open emails on mobile, so responsiveness is critical for conversion.

Case Study: Order Confirmation Email

From our practice: an online store on Bitrix "Small Business". Standard order email — table on white background without branding. Task: email in corporate style, with logo, banner, items table, delivery block and CTA button "Track order".

We developed an HTML template with inline styles. Items table — overridden via event handler (custom module, OnSaleNewOrderNewAdminSend method). Result tested in Litmus: correct rendering in Gmail, Outlook 2016/2019, Yandex.Mail, Apple Mail, Samsung Mail. Work took 2 days, including testing. This resulted in a 15% reduction in bounce rate and a 20% increase in order tracking link clicks.

Stages of Email Template Development

1. Analysis of current templates — audit existing macros and events, identify unused or conflicting fields.
2. Design layout creation — adapt corporate identity to HTML email considering email client limitations.
3. Coding and styling — table-based layout, inline styles, responsiveness via media queries.
4. Macro integration — connect all necessary variables, including custom handlers for complex blocks.
5. Testing — check in Litmus across 15+ clients, fix artifacts.
6. Documentation and support — deliver guide for editing macros, 1 month technical support.

What's included in the work

Timelines

For projects with 1C integration via CommerceML we configure email templates with appropriate macros. We take into account email design requirements for Bitrix: adaptation to brand and email client limitations. Get a free consultation — we'll estimate the scope and timeline for your project. Your clients will see emails that match your brand, not the default template.