Bitrix24 Email Template Setup
We specialize in Bitrix24 email template configuration and coding, ensuring email client compatibility across all platforms. Our email testing services guarantee perfect rendering in 70+ clients. We often encounter situations where Bitrix24 emails render differently in Gmail, Outlook, and Apple Mail. The issue isn't the mailing service but the template markup. A template in the Marketing module (a.k.a. sender) combines a block editor, CRM variables, and personalization rules. Our team configures them end-to-end, considering the requirements of all popular email clients. This saves up to 40% in rework time (about 60 hours per year, equivalent to $6,000). We'll evaluate your project within 24 hours — just contact us. Our service starts from $400 per template, with typical savings of $2,000 annually.
Template Architecture in the Sender Module
Bitrix24 stores email templates in the b_sender_letter table. Each template consists of HTML code (field BODY_TEMPLATE_HTML), a plain text version (BODY_TEMPLATE_TEXT — critical for corporate servers with HTML disabled), and blocks (structure in JSON format BODY_DESIGNER). The built-in editor uses table-based HTML — necessary because older Outlook versions do not support flexbox and grid. When loading custom HTML, insert only the <body> content; otherwise, Bitrix24 creates double nesting. According to Bitrix24 documentation, this reduces debugging time by 50%.
Personalization Through Variables
Variables in templates use the syntax #{VARIABLE_NAME}. The standard set for CRM mailings includes #{NAME}, #{COMPANY}, #{ASSIGNED_BY_NAME}, #{UNSUBSCRIBE_LINK}. Extended data from deals is connected via segments and trigger chains. If a variable is empty, a blank string remains — to substitute a default value, use #{NAME|"Dear Customer"} (works in current versions of the sender module; in older versions a conditional block in code is required).
How to Avoid Common Email Template Errors?
The most frequent problem is that an email looks fine in Gmail but breaks in Outlook. Reasons:
- Outlook uses Word as its rendering engine: it doesn't understand
max-width, ignores padding on some elements, and cuts off background images in CSS. Solution — conditional comments <!--[if mso]>...<![endif]-->.
- Fonts: Google Fonts via
@import don't work in Outlook — use web-safe fallbacks like font-family: 'Roboto', Arial, sans-serif.
- Retina images: for HiDPI screens, the image should be twice the display size with explicit
width and height attributes.
Table-based coding is 40% more compatible with Outlook than the block editor. For testing, we use services like Litmus or Email on Acid — they show rendering in 70+ clients without actual sending. This ensures all recipients see the email correctly. Our testing covers 70+ email clients, which is 5 times more than typical manual testing. Our approach reduces email display errors by 80%.
Why Trust Template Setup to Professionals?
Incorrect markup reduces deliverability by 20–30%. After our setup, the rate of correct display reaches 95% among all recipients. We use proven techniques: conditional comments, font fallbacks, explicit image sizes. As a result, conversion from emails increases by an average of 15%. Typical project saves $2,000 per year on rework.
What's Included in the Work
- Audit of current templates and identification of compatibility issues
- Structure design: blocks, branding, responsiveness
- Table-based HTML coding considering Outlook quirks (40% better compatibility)
- Personalization variable setup and substitution check
- Testing in email clients via Litmus or Email on Acid
- Upload to Bitrix24, plain text version setup
- Test send to control addresses
As a result, you receive template documentation, access to test tools, and support during launch.
Editor Comparison
| Characteristic |
Block Editor |
HTML Editor (Code) |
| Design flexibility |
Limited |
Full |
| Requires HTML knowledge |
No |
Yes |
| Outlook compatibility |
Basic (30% success) |
Requires tuning (95% success) |
| Development time |
Less (30% faster) |
More |
| Cost |
$200–$500 |
$400–$800 |
Work Process for a Template
- Audit current templates and identify compatibility issues
- Design structure: blocks, branding, responsiveness
- Code table-based HTML considering Outlook quirks
- Set up personalization variables and verify substitution
- Test in email clients via Litmus or Email on Acid
- Upload to Bitrix24, configure plain text version
- Test send to control addresses of all target clients
Estimated Timelines and Costs
| Task Scale |
Timeline |
Cost Range |
| Modifying an existing template |
4-8 hours |
$400–$800 |
| New template from scratch (1 layout) |
1-3 days |
$1,200–$3,600 |
| Template system (5+ emails in a chain) |
1-2 weeks |
$4,000–$8,000 |
Cost is calculated individually after analyzing the brand book, existing templates, and personalization requirements. Your experience and needs directly affect the scope of work. Contact us — we will prepare a detailed commercial proposal. Order template setup, and your emails will display correctly for 99% of recipients.
Pre-send Checklist
- [ ] Unsubscribe link verified
- [ ] Plain text version filled
- [ ] Tested in 5+ email clients
- [ ] Font fallbacks specified
- [ ] Retina images with explicit sizes
- [ ] Conditional comments for Outlook added
Why does website layout for 1C-Bitrix require professionalism?
Open template.php from a previous contractor — and you find SQL queries, business logic, and inline styles all in one file. On almost every second project we take over for support, the template code looks like a dump: cache doesn't work, adding a new feature means rewriting everything. Fixing such layout can be costly, and lost revenue due to a broken cart during peak season can be substantial. Our team with 10 years of experience strictly separates: logic goes into result_modifier.php or component_epilog.php, presentation into template.php. No CIBlockElement::GetList in templates. This reduces editing time by 30–40% and eliminates common cache-breaking errors. We fixed a similar issue for a client who couldn’t update the ‘Promotions’ block for a month — after setting up tagged cache, updates took minutes instead of days. Want the same results? Get a free audit of your current layout.
How to properly organize component templates?
A custom template is not a single file but a structure of five to six files:
-
template.php — only HTML and output of $arResult
-
result_modifier.php — data preparation, additional queries
-
component_epilog.php — code after caching (counters, dynamic content)
-
style.css and script.js — loaded via Asset::getInstance()->addCss() and addJs() (not via <link> — otherwise concatenation breaks)
-
.parameters.php — visual editor parameters
Example structure for a catalog:
local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php
Typical templates we develop turnkey:
| Component |
What we do |
catalog.section and catalog.element |
View switching (grid/list/table), lazy load for images, srcset for retina |
sale.basket.basket |
AJAX update without reload, mini-cart via sale.basket.basket.line |
menu |
Mega menu with caching by sections, lazy loading of submenus |
search.title |
Autosuggest with 300ms debounce, product previews in dropdown |
breadcrumb |
Microdata BreadcrumbList according to Schema.org |
Caching: why does it break and how do we fix it?
Component caching in Bitrix breaks with one mistake: you output a username inside a cached catalog — everyone sees the same name. Solution — use component_epilog.php for dynamic inserts.
Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) is configured by default. Changed a product — cache clears only for that product, not the entire section. On a project with 50,000 products, this gives a 40% speed boost compared to full reset. Official Bitrix documentation recommends using component_epilog.php for dynamic inserts. Real case. A client complained that everyone saw the same cart on the catalog page. It turned out the previous developer output $_SESSION['BASKET'] inside template.php of the catalog.section component. The component was cached for an hour — the cart was frozen. We moved the output to component_epilog.php and configured tagged cache on sale.basket.basket.line. The page didn’t lose speed, the cart became up-to-date. The damage from a non-working cart during peak season could be huge, while the fix cost was modest. Tagged cache reduces page rebuild time by 50× compared to full reset.
CSS approaches: BEM, Tailwind, or hybrid?
For large projects (30+ templates) we use BEM — .product-card__price, .product-card--featured. Styles are isolated, no conflicts. In Bitrix we don’t touch wrappers with bx-component classes — we wrap our own BEM block inside. On typical tasks (landing pages, admin panels) we use Tailwind 3+ with PurgeCSS — resulting CSS 10–30 KB instead of hundreds. Design tokens in tailwind.config.js lock colors, fonts, spacing in one place. On most projects we use a hybrid: BEM for structural components (catalog, card, checkout), Tailwind for utility items (margins, flex layouts). We agree on the boundary with the team in advance.
How do we achieve Core Web Vitals?
Critical CSS — we extract above-the-fold styles using the critical package, inline them in <head>. The rest loads asynchronously via media="print" onload="this.media='all'". LCP on mobile decreases by 1–1.5 seconds.
Images — the main bottleneck. We use <picture> with WebP and JPEG fallback. loading="lazy" for everything below the fold. width and height explicitly set — CLS = 0. A handler in urlrewrite.php generates WebP on the fly.
Minification and compression. CSS and JS via Vite or Bitrix built-in concatenation. Brotli on nginx (brotli_comp_level 6) — 15–20% more efficient than gzip. Static caching: expires 1y + versioning via query string.
For a catalog of 10,000 products, LCP went from 4.2 s to 2.1 s. Conversions improved by 12% after the speed fix. Want similar results? Order a free audit — we’ll evaluate your current layout and propose specific steps.
Deliverables after layout completion
When you order template development or adaptation, you receive:
- Source files of component templates with separation into
template.php, result_modifier.php, epilog
- CSS and JS loaded via Asset — no inline styles
- Configured caching with tags
- Documentation on structure and parameters
- Access to a Git repository with change history
- Training for your developer: how to edit the template without losing upgradeability
We guarantee Core Web Vitals compliance and cross-browser compatibility. Each project is assigned a lead engineer with 10+ years of Bitrix experience.
Process:
- Analysis of mockups and current project — identify components for rework
- Structure design — break the page into BEM blocks
- Implementation — build templates according to the scheme: template, result_modifier, epilog, CSS, JS
- Testing — check cache, responsiveness, Core Web Vitals, cross-browser compatibility
- Deployment — staging, acceptance, production
At each stage you get intermediate results and can make corrections. Contact our team for a project estimate — we’ll provide a timeline and cost within 1–2 days after receiving mockups.
Common mistakes in Bitrix layout
- SQL queries inside
template.php — breaks caching and creates heavy load
- Inline
<style> and <script> — breaks Asset concatenation and slows loading
- Missing
result_modifier.php — logic mixed with presentation
- Direct
$_REQUEST in cached components — user-specific data leaks
- Not using
component_epilog.php for dynamic content — entire cache invalidated on each user action
Each mistake has a simple fix — we correct them during development or audit.
Timelines
| Scope |
Timeline |
| Landing page (5–7 screens) |
3–5 days |
| Corporate website (15–20 unique pages) |
2–4 weeks |
| E-commerce store (30+ component templates) |
4–8 weeks |
| Customization of a Marketplace solution |
1–3 weeks |
| Redesign of an existing project |
3–6 weeks |
Ready to improve your layout? Order a preliminary consultation — we’ll calculate timelines and budget individually.
