Setting up linking a size chart to 1C-Bitrix products

Setting Up Size Chart Binding to Products in 1C-Bitrix

Returns of clothing in online shops reach 30–40% — and most of them are related to incorrect sizing. A size chart next to the trade offer selector directly reduces this figure. Standard Bitrix has no built-in size chart mechanism, so the task is solved through an iblock extension or a separate module.

Storage Architecture

Size charts are structured data bound to products or categories. In Bitrix, there are two places for this:

Iblock property of type "Element link" — a separate iblock "Size Charts" is created, each element of which contains chart data. Products reference the required chart through the PROP_SIZE_TABLE property. Advantage: convenient to reuse one chart for hundreds of products from the same brand.

Custom field of type "HTML/text" — the chart is stored directly in the product property as HTML markup. Simpler, but does not scale.

The first option is recommended. Structure of the "Size Charts" iblock:

Chart data is stored in JSON:

{
  "headers": ["EU Size", "RU Size", "Chest circumference (cm)", "Hip circumference (cm)"],
  "rows": [
    ["XS", "40", "80-84", "86-90"],
    ["S", "42", "84-88", "90-94"],
    ["M", "44", "88-92", "94-98"]
  ]
}

Binding to Products and Categories

Binding is implemented at two levels:

Category level — the section has a UF field UF_DEFAULT_SIZE_TABLE (link to a size chart iblock element). All products in the category automatically inherit this chart unless they have an individual one assigned.

Product level — the iblock property PROP_SIZE_TABLE of type "Element link". Allows overriding the chart for a specific product.

Logic for retrieving the chart for a product:

function getSizeTableForProduct(int $productId, int $sectionId): ?array {
    // First check the product property
    $element = CIBlockElement::GetByID($productId)->GetNextElement();
    $props = $element->GetProperties();
    $tableId = (int)($props['SIZE_TABLE']['VALUE'] ?? 0);

    // If not set — take from the category
    if (!$tableId) {
        $section = CIBlockSection::GetByID($sectionId)->Fetch();
        $tableId = (int)($section['UF_DEFAULT_SIZE_TABLE'] ?? 0);
    }

    if (!$tableId) return null;

    $table = CIBlockElement::GetByID($tableId)->GetNextElement();
    $tableProps = $table->GetProperties();
    return json_decode($tableProps['TABLE_DATA']['VALUE'], true);
}

Display on the Product Card

The size chart is rendered in the bitrix:catalog.element component template. The standard approach is a popup modal triggered by a "Size Chart" link next to the trade offer selector.

In the template, connect the data:

// In result_modifier.php or directly in template.php
$sizeTable = getSizeTableForProduct(
    $arResult['ID'],
    $arResult['IBLOCK_SECTION_ID']
);
$this->SetViewTarget('size_table_data');

Important nuance: if the product has trade offers of different sizes, the chart should only be shown when the size parameter is actively being selected (changing colour together with size is not needed — only the chart).

Multilingual Support and Multiple Measurement Systems

For shops operating in different regions, a single chart must contain multiple measurement systems. A system grouping is added to the JSON:

{
  "systems": {
    "EU": { "headers": [...], "rows": [...] },
    "US": { "headers": [...], "rows": [...] },
    "UK": { "headers": [...], "rows": [...] }
  }
}

A measurement system switcher is shown above the chart via JS without page reload.

Timelines

The "size chart — trade offer" combination pays off through reduced returns within the very first month of operation.