The task sounds simple: "change the product card." In reality, the product card is a component template bitrix:catalog.element. It resides in /bitrix/components/bitrix/catalog.element/templates/.default/. You cannot edit it directly — changes will be lost on update. You need to create an override in /local/templates/<site_template>/components/ or in the site template folder. We specialize in custom 1C-Bitrix component template development. With over 80 projects and 7 years on the platform, we deliver turnkey solutions: from analysis to a ready template. We'll assess your project within 1 day and propose the optimal solution. A custom template runs 2–3 times faster than the standard one when implementing complex UI elements like tabs or AJAX-loaded filters. The project budget is reduced by 30–50% compared to developing a custom component from scratch.
Order of Component Template Override
Bitrix searches for a component template in the following order (simplified):
-
/local/templates/<site_template>/components/<namespace>/<component>/<template_name>/ -
/bitrix/templates/<site_template>/components/<namespace>/<component>/<template_name>/ -
/local/components/<namespace>/<component>/templates/<template_name>/ -
/bitrix/components/<namespace>/<component>/templates/<template_name>/
The correct location for custom templates is /local/templates/<template>/components/ or /local/components/. This guarantees preservation during core updates. For more details on override rules, see the official documentation.
The minimal folder structure for a template: template.php (mandatory), style.css and script.js (auto-included).
Which Components Most Often Require Custom Styling?
-
bitrix:news.list/bitrix:news.detail— news, blog, portfolio.$arResult['ITEMS']contains an array of elements with fields and infoblock properties. -
bitrix:catalog.element/bitrix:catalog.section— product card and catalog section page.$arResult['ELEMENT']holds product data,$arResult['OFFERS']contains SKUs. -
bitrix:form.result.new— web form. The template contains HTML form with fields from$arResult['FIELDS']. -
bitrix:main.include— including static areas.
From Our Practice: Product Card Template with Tabs
An online medical equipment store. The standard bitrix:catalog.element template displayed description, specifications, and documents in a single text block. The task: split into tabs — "Description", "Specifications", "Documents" (PDF files from an infoblock property of type "File").
We created an override in /local/templates/main/components/bitrix/catalog.element/detail/template.php. In the template: tabs using pure CSS (:target selectors, no JS dependency), specifications from $arResult['ELEMENT']['DISPLAY_PROPERTIES'], documents from the property with a check for non-empty value. We left the component caching untouched — the template works with the already prepared $arResult.
What Is Available Inside template.php
Inside template.php, the following are automatically accessible:
-
$arResult— data prepared by the component (structure depends on the specific component) -
$arParams— parameters passed when calling the component -
$APPLICATION,$USER,$DB— global Bitrix objects -
$this— the component object (CBitrixComponent), through which methods like$this->GetPath()are available
Before styling, we always study the structure of $arResult — either through documentation or var_dump() during development. A typical example: to output the "Color" property, you need to get $arResult['DISPLAY_PROPERTIES']['COLOR']['VALUE']. We use Bitrix D7 ORM for data selection if the component does not provide the necessary fields.
How Custom Styling Accelerates Development
We don't just style a template — we analyze the business logic and propose the optimal structure. In our work, we use:
- PHP 8.1+, infoblocks v2.0, ORM
- Tagged caching to reduce server load by up to 70%
- Integration with 1C, payment systems, SDEK as needed
Compared to developing a custom component, template customization saves up to 50% of effort. Overriding in /local/ guarantees that changes are preserved during core updates.
Why Override in /local/ Is Safe
Changes in /bitrix/ get overwritten during platform updates. The /local/ folder is not affected by updates; all custom templates remain intact. Additionally, when migrating to another server, you only need to transfer the /local/ folder — all settings and templates are preserved. This is the professional standard for Bitrix development.
Common Mistakes When Overriding Templates
- Editing the template in
/bitrix/— changes are lost after an update. - Forgetting to disable the component cache during debugging — the result does not update.
- Confusing
$arResult['ITEMS']and$arResult['ELEMENTS']— the structure depends on the component. - Not checking for a mobile version template — responsiveness is often overlooked.
What Is Included in the Work
| Stage | Description |
|---|---|
| Analysis | Study current template, requirements, structure of $arResult |
| Design | Develop layout and template logic (including responsiveness) |
| Styling | Create template.php, style.css, script.js in /local/ |
| Integration | Bind to data from $arResult, $arParams |
| Testing | Check on different pages, browsers, clear cache |
| Documentation | Describe template structure and recommendations for further improvements |
Estimated Timelines
| Task Type | Timeframe |
|---|---|
| Styling a single simple component template | 4–8 hours |
| Template with complex logic (tabs, filtering, AJAX) | 1–3 days |
| Set of templates (5–10 components) | 1–2 weeks |
Contact us for a project assessment — we will analyze your current templates for free and suggest customization options. Order custom template styling turnkey and receive a ready solution with compatibility guarantee.
More about the 1C-Bitrix platform on Wikipedia.