Email Template Development for 1C-Bitrix

The emails Bitrix sends — order confirmation, password reset, new lead notification — look like a text block on a white background with a logo by default. The logo is blurry, the font is system-default, and the site link is blue and underlined. If a company invests in marketing and design but then sends customers an email like this, that is a communication breakdown.

Email Template Development for 1C-Bitrix

How Email Templates Work in Bitrix

Email templates in Bitrix are stored in the main module and edited in the admin panel under Settings → Mail → Mail Templates. Each template is linked to a mail event (for example, SALE_NEW_ORDER — new order, MAIN_USER_PASS_CHANGED — password change).

An email template consists of:

• FROM, TO, CC, BCC, SUBJECT fields — can contain macros (#SITE_NAME#, #ORDER_ID#)
• Email body — HTML with macro support

HTML in email clients renders differently from HTML in a browser: external CSS files, <link>, CSS Grid, Flexbox (partially), and most pseudo-elements are not supported. Everything must use inline styles and table-based layout.

Technical Requirements for HTML Emails

• Inline CSS — all styles are applied via the style="" attribute. External stylesheets and <style> blocks are ignored by Gmail, Outlook, and other clients (or handled unpredictably)
• Table-based structure — <table> for layout. <div> with display: flex does not work in Outlook
• Fixed pixel values — not rem, not % for block widths, only px
• Email width — wrapper maximum 600–640px
• Alt text — images are blocked by default in Outlook, Gmail, and Yandex Mail. A text alternative is mandatory
• Encoding — UTF-8, specified in the meta tag and the email header

Working with Bitrix Macros

The template body has access to event macros — for example, for SALE_NEW_ORDER: #ORDER_ID#, #ORDER_DATE#, #PRICE#, #DELIVERY_NAME#, #USER_EMAIL#, #ITEMS#, and others. The full list of macros is visible in the template editor form.

Some macros return ready-made HTML (for example, the order items table in #ITEMS#). These blocks are harder to customize — their content is generated by the sale module, and changing the markup is only possible via event handlers in a custom module.

For full control over order item markup, use the OnSaleOrderSaved event handler and generate the HTML manually.

Responsive Design in Emails

Not all email clients support responsive emails, but basic responsiveness for mobile devices works via @media in a <style> block (Outlook ignores it, but iOS Mail and Gmail on Android support it). Pattern: 600px table on desktop, width: 100% !important on mobile.

Case Study: Order Confirmation Email

An online store on Bitrix "Small Business". The standard order email — a table on a white background with no branding. Task: an email in the company's visual identity, with a logo, banner, items table, delivery block, and a "Track Order" CTA button.

We developed an HTML template with inline styles. The items table was overridden via an event handler (a custom module, OnSaleNewOrderNewAdminSend method). The result was tested in Litmus: correct rendering in Gmail, Outlook 2016/2019, Yandex Mail, Apple Mail, and Samsung Mail. The work took 2 days including testing.

Timeline