Best Practices for Separate Templates in 1C-Bitrix Multi-Site

We've often faced this scenario: a client launches a second (or third) store on the same Bitrix installation, but uses a single template. Layout breaks, customization becomes a nightmare. The mistake is that each site gets its own design, but inheritance is not configured. Using separate templates for each site is the key to avoiding conflicts. Let's break down how to properly organize templates in a multi-site setup without wasting time on duplication. For example, in one project, because of a shared template, edits for the wholesale site broke the retail product card, leading to a 3-day downtime and a loss of about 15% of orders. Separate templates in a multi-site reduce the time required for edits by 4 times compared to a single template. This approach is 75% more efficient than a single template approach.

Why Is It Important to Separate Templates?

If multiple sites live in one Bitrix copy but use a single template, sooner or later you run into style conflicts and edits for one site break another. Separate templates provide flexibility: the retail site can have its own product card, the wholesale site another, the mobile version a third. Common logic is then isolated in a base template. Over 90% of our projects benefit from this structure, and it saves up to 30 hours per month on maintenance.

Template Structure in Multi-Site

Bitrix stores templates in /bitrix/templates/ (system) and /local/templates/ (user). For each site, you set the default template in the admin panel: Settings → Sites → List of Sites → {Site} → Site Template.

Recommended structure for multiple sites:

/local/templates/
    base/              # Common base template (layout, header, footer)
    site_retail/       # Retail site template
    site_wholesale/    # Wholesale site template
    site_mobile/       # Mobile version (if not responsive)

Template inheritance. Bitrix does not support template inheritance natively, but you can simulate it via includes or symbolic links:

// /local/templates/site_retail/header.php
// Include the common header and override only what's needed
define('TEMPLATE_BASE_PATH', $_SERVER['DOCUMENT_ROOT'] . '/local/templates/base/');
include TEMPLATE_BASE_PATH . 'header.php';

How We Set Up Templates: A Real Case

Recently we configured a multi-site for a client: a retail store (template retail) and a wholesale platform (wholesale) on the same database. We moved the common header, footer, and analytics scripts into base. For retail, we customized the product card by replacing the catalog.element template in its own folder. For wholesale, we removed prices and added a "Request Quote" button. Everything worked without copying unnecessary code. According to 1C-Bitrix documentation, the multi-site configuration supports separate templates through each site's settings.

How to Assign Component Templates to Different Sites?

For each component, you can set a different template on different sites. Component templates are searched in this order:

1. /local/templates/{site_template}/components/{namespace}/{component}/{template}/
2. /local/components/{namespace}/{component}/templates/{template}/
3. /bitrix/templates/{site_template}/components/...
4. /bitrix/components/{namespace}/{component}/templates/{template}/

This means: to give the retail site its own product card, simply create /local/templates/site_retail/components/bitrix/catalog.element/.default/template.php.

Practical Nuances

CSS and JS resources. Each template has its own style.css and script.js in its root. Bitrix automatically includes them. For builds with Vite or Webpack, set publicPath per template.

Checking the current site in code:

// Get the current site ID
$siteId = \Bitrix\Main\Context::getCurrent()->getSite(); // 's1', 's2', etc.

// In components and templates — global constant
define('SITE_ID', $siteId);

// Conditional rendering in a template
if (SITE_ID === 's2') {
    // Logic for wholesale site
}

Language files: Template-specific translations are stored in /local/templates/{template}/lang/{lang}/. Bitrix loads them automatically when using GetMessage().

Comparison of Approaches: Shared vs Separate Templates

/local/templates/
    base/
        header.php
        footer.php
        style.css
    retail/
        header.php (include base/header.php with modifications)
        components/bitrix/catalog.element/.default/template.php
    wholesale/
        header.php (include base/header.php, remove cart)
        components/bitrix/catalog.element/.default/template.php (without prices)
    mobile/
        header.php (responsive)
        style.css

What's Included in the Work

• Analysis of the current template architecture and site map
• Designing the /local/templates/ structure with base and child templates
• Migrating existing design into the new structure
• Configuring inheritance and component overrides
• Cross-browser and mobile adaptation testing
• Documenting the structure for future maintenance
• Handover of access and training for the client's team

How We Do It: Process

1. Analysis — assess the number of sites and their shared/unique elements.
2. Design — create a template structure blueprint.
3. Implementation — deploy the base template and child templates.
4. Testing — verify each site works correctly.
5. Deployment — push to the production server.

Approximate Timelines

Pricing starts at $550 for a basic two-template setup. We handle projects of any complexity — get a consultation for your project, and we'll provide accurate timelines and estimates. Order an audit of your current template structure to uncover hidden issues.

Our Experience and Guarantees

We have been developing on 1C-Bitrix for over five years and have completed more than 40 multi-site projects. We guarantee correct operation of the templates and their compatibility with system updates. Write to us, and we'll evaluate your project and provide accurate timelines.

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:

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:

1. Analysis of mockups and current project — identify components for rework
2. Structure design — break the page into BEM blocks
3. Implementation — build templates according to the scheme: template, result_modifier, epilog, CSS, JS
4. Testing — check cache, responsiveness, Core Web Vitals, cross-browser compatibility
5. 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

Ready to improve your layout? Order a preliminary consultation — we’ll calculate timelines and budget individually.