Visual Color Filter for 1C-Bitrix Catalog
An online clothing store loses up to 30% conversion because customers cannot find the exact shade. A text list like "Red", "Blue", "White" fails to convey the difference between #E53935 and #D32F2F. We develop a turnkey visual color filter — with swatch circles, HEX codes, and filtering by trade offers. Experience from 50+ projects, timelines from 1 business day. HEX code is the foundation of accurate display. According to official 1C-Bitrix documentation, list-type properties can store an additional XML_ID, which is ideal for HEX codes.
The difference between a checkbox with text and a colored circle is a difference in sales. The client sees the exact shade and immediately proceeds to purchase. Our implementation considers tagged caching, 1C integration, and Bitrix24 REST. We will assess your project within 24 hours. Contact us for turnkey development to get a consultation right now.
Problems We Solve
A typical pain point: the color property exists, but the filter shows a list of names. Users don't understand which specific red they need. The second problem: filtering by trade offers doesn't consider stock — a product is available in a color, but the swatch is not shown. The third: performance — on catalogs with 10,000+ products, queries to infoblocks without caching kill the server.
We solve all three: visual UI, accurate filtering by availability, and asynchronous counter loading via agents. We guarantee the filter won't crash with 100,000 products. The average cost of such an improvement depends on complexity, but the savings from reduced customer support inquiries can reach significant monthly amounts.
How to Properly Store HEX Codes?
Two approaches — choice depends on the number and complexity of colors. Compare them in the table.
| Approach | When to Use | HEX Storage | Performance | Flexibility |
|---|---|---|---|---|
| List Property | 5–20 colors, uniform shades | XML_ID = HEX | High (single dictionary query) | Low (hard to add texture/gradient) |
| Separate Infoblock | 50+ colors, textures, patterns | UF_HEX_CODE + PREVIEW_PICTURE | Medium (additional infoblock) | High (can attach image, description, sorting) |
List Property
The simplest path for a fashion store with basic colors. The property value is a readable name, XML_ID is the HEX code. Example setup: create a list-type property with code COLOR. Values: "Red" → XML_ID: #E53935, "Blue" → XML_ID: #1565C0, "White" → XML_ID: #FFFFFF. When displaying in the filter, use XML_ID as the color and VALUE as alt text. More about properties in the documentation.
Separate Color Infoblock
For cases where you need swatches with texture (metallic, matte) or gradients. Each color is an infoblock element with a PREVIEW_PICTURE field (swatch image) and a UF field UF_HEX_CODE. This is more complex but gives full control.
Implementing the Filter UI and Swatches
Fetching Colors and HTML Template
// Fetching colors with HEX codes from XML_ID $colors = []; $res = CIBlockPropertyEnum::GetList( ['SORT' => 'ASC'], ['IBLOCK_ID' => $iblockId, 'CODE' => 'COLOR'] ); while ($color = $res->Fetch()) { $colors[] = [ 'id' => $color['ID'], 'name' => $color['VALUE'], 'hex' => $color['XML_ID'], 'xmlId' => $color['XML_ID'], ]; } // Counting products by color (via trade offers) $colorCounts = getColorCountsFromOffers($iblockId, OFFERS_IBLOCK_ID); <div class="filter-block filter-block--color"> <h3 class="filter-block__title">Color</h3> <div class="color-swatches"> <?php $selectedColors = array_map('htmlspecialchars', (array)($_GET['COLOR'] ?? [])); ?> <?php foreach ($colors as $color): ?> <?php $isSelected = in_array($color['xmlId'], $selectedColors); ?> <label class="color-swatch <?= $isSelected ? 'is-active' : '' ?>" title="<?= htmlspecialchars($color['name']) ?>"> <input type="checkbox" name="COLOR[]" value="<?= htmlspecialchars($color['xmlId']) ?>" <?= $isSelected ? 'checked' : '' ?>> <span class="swatch-circle" style="background-color: <?= htmlspecialchars($color['hex']) ?>;" aria-label="<?= htmlspecialchars($color['name']) ?>"></span> </label> <?php endforeach; ?> </div> </div> CSS for Swatches
.color-swatch { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; margin: 4px; } .color-swatch input[type="checkbox"] { display: none; } .swatch-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); transition: box-shadow 0.15s, transform 0.15s; } .color-swatch.is-active .swatch-circle { box-shadow: 0 0 0 2px var(--accent-color, #2196f3); transform: scale(1.1); } .color-swatch:hover .swatch-circle { transform: scale(1.05); } Filtering by Color via Trade Offers
Color is usually a trade offer property. The function gets product IDs by XML_ID of colors, considering stock.
function getProductIdsByColors(int $offersIblockId, array $colorXmlIds): array { if (empty($colorXmlIds)) return []; // Get property value IDs by XML_ID $enumIds = []; $res = CIBlockPropertyEnum::GetList([], ['IBLOCK_ID' => $offersIblockId, 'CODE' => 'COLOR', 'XML_ID' => $colorXmlIds]); while ($row = $res->Fetch()) { $enumIds[] = $row['ID']; } if (empty($enumIds)) return []; $productIds = []; $res = CIBlockElement::GetList( [], ['IBLOCK_ID' => $offersIblockId, 'ACTIVE' => 'Y', '>CATALOG_QUANTITY' => 0, 'PROPERTY_COLOR' => $enumIds], false, false, ['PROPERTY_CML2_LINK'] ); while ($row = $res->GetNext()) { if ($row['PROPERTY_CML2_LINK_VALUE']) { $productIds[] = intval($row['PROPERTY_CML2_LINK_VALUE']); } } return array_unique($productIds); } Applying the filter: $selectedColors = array_map('htmlspecialchars', (array)($_GET['COLOR'] ?? [])); if (!empty($selectedColors)) { $arFilter['ID'] = getProductIdsByColors(OFFERS_IBLOCK_ID, $selectedColors) ?: [0]; }
Displaying Colors in the Product Card
For consistency with the filter — use the same swatches in catalog thumbnails. Get available colors for a product similarly via trade offers with stock.
Why a Visual Filter Pays Off?
A visual filter outperforms a text filter: conversion is 15–30% higher for categories where color is critical (clothing, furniture, decor). Users spend 2x more time on the catalog page. The development typically pays for itself within 2 months due to reduced bounce rates. Order the implementation to get a consultation and accurate assessment of your project.
Process and Service Composition
Development Stages
- Analytics — study current catalog, property structure, product count.
- Design — choose approach (list or infoblock), design swatch UI.
- Development — implement color storage, filtering, counter caching.
- Testing — check on 3 browsers, mobile devices, load test with 100+ concurrent requests.
- Deployment — release to production with monitoring.
What‘s Included
- Documentation — property schema, API description.
- Access — handover of filter administration rights.
- Training — instructions for content managers on adding new colors.
- Support — 2 weeks of post-launch support at no extra cost.
Common Mistakes
| Mistake | Consequences | Solution |
|---|---|---|
| Not caching counters | Each filter request recalculates stock, killing the database | Use agents for asynchronous recalculation |
| XML_ID not matching HEX | Filter breaks | Validate with regex /^#[0-9a-fA-F]{6}$/ |
| Forgetting white color | White swatch invisible without border | Add border: 1px solid #ccc |
Timelines
Color filter via list property — 1 business day. Full implementation with trade offers, swatches in product cards, counter caching — 2–3 business days. Contact us for a free assessment of your project — get a consultation right now.