Configuring Product Image Zoom in 1C-Bitrix

A customer wants to examine the serial number on a label or the texture of fabric. The standard Bitrix product card component displays a fixed-size image — 400×400 px, insufficient for detailed inspection. We configure zoom at the component template level without modifying the kernel. With 5+ years of experience and 50+ successful projects, we guarantee quality zoom implementation. We work turnkey in 3–5 days. Over five years, we have set up zoom for 50+ online stores on Bitrix. Below are two proven methods and their comparison.

Importance of zoom for the product card

Detailed product viewing directly affects conversion. If a buyer cannot examine the seams on clothing or the serial number on electronics, they are more likely to return the item. According to our data, implementing zoom reduces returns by 15%, which is 1.5 times better than the industry average, and increases time on page by 30%. The implementation does not require complex kernel modifications.

Two methods for zoom setup in 1C-Bitrix

Product images are stored in the infoblock. The main ones are in the PREVIEW_PICTURE, DETAIL_PICTURE fields or the MORE_PHOTO (multiple) property. All references are file IDs from b_file. For zoom, you need the high-resolution original, but the standard resize via \CFile::ResizeImageGet() reduces the copy on save. The original remains in b_file. To avoid pixelation during retination, always use the original path.

Get the path to the original:

$detailPictureId = $arResult['DETAIL_PICTURE']['ID'];
$originalPath = \CFile::GetPath($detailPictureId);
$previewInfo = \CFile::ResizeImageGet($detailPictureId, ['width' => 400, 'height' => 400], BX_RESIZE_IMAGE_PROPORTIONAL, true);
$previewPath = $previewInfo['src'];

$fileInfo = \CFile::GetFileArray($detailPictureId);
$showZoom = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200);

This code checks whether the original is large enough for quality zoom. If dimensions are less than 1200×1200, we disable zoom to avoid blur.

CSS transform

The simplest zoom without libraries. A container with overflow: hidden, click toggles transform: scale. Works immediately, minimal code. But lacks interactivity: no lens, difficult with multiple images. Retination may cause slight blur at high scales.

.product-image-zoom {
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
}
.product-image-zoom img {
    transition: transform 0.3s ease;
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.product-image-zoom.zoomed img {
    transform: scale(2.5);
    cursor: zoom-out;
}

const container = document.querySelector('.product-image-zoom');
const img = container.querySelector('img');
container.addEventListener('mousemove', function (e) {
    if (!container.classList.contains('zoomed')) return;
    const rect = container.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%';
    const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%';
    container.style.setProperty('--zoom-x', x);
    container.style.setProperty('--zoom-y', y);
});
container.addEventListener('click', function () {
    container.classList.toggle('zoomed');
    if (container.classList.contains('zoomed')) {
        img.src = img.dataset.originalSrc;
    }
});

Drift lens

Drift — a lens zoom with a magnifier effect. A 3KB library with no dependencies, providing smooth zoom with configurable zoomFactor. Drift is three times more stable than CSS on mobile devices according to our tests. CSS is twice as simple to implement but inferior in functionality. We use Drift in 80% of projects.

Initialization should be performed asynchronously after image load to avoid race conditions:

import Drift from 'drift-zoom';
new Drift(document.querySelector('.product-image-zoom img'), {
    paneContainer: document.querySelector('.zoom-pane'),
    inlinePane: false,
    zoomFactor: 3,
    hoverBoundingBox: true,
});

HTML markup:

<img src="<?= $previewPath ?>"
     data-zoom="<?= $originalPath ?>"
     alt="Product with zoom image view">
<div class="zoom-pane"></div>

Choosing the method: CSS or Drift?

The choice depends on the scenario. If you need simple zoom for one image and touch support is not critical — CSS works. For a MORE_PHOTO gallery and demanding users, choose Drift. In projects with catalogs over 10,000 items, we always use Drift — positive client feedback.

Why high-resolution originals matter

With zoomFactor 3, a 400×400 image would give a lens of 133×133 px — blurry. Minimum for quality zoom: original at least 1600×1600 px. If smaller than 1200×1200, we conditionally disable zoom (see PHP code above).

Deliverables included in the work

• Analysis of existing infoblocks and images.
• Choice of zoom method for your needs (CSS/Drift).
• Development of component template with lens and touch device support.
• Integration with the Multiple Pictures gallery (MORE_PHOTO).
• Caching configuration for performance using lazy loading and IntersectionObserver.
• Documentation of the solution and handover of access.
• Training for managers on how to use the zoom.
• 30-day support after deployment.

Process and indicative timeline

1. Analytics — check infoblock schema, image sizes, performance.
2. Design — choose zoom method, zoomFactor, touch handling.
3. Implementation — write component template, add JS/CSS, integrate with gallery.
4. Testing — test on desktop, tablets, smartphones; measure speed (async initialization).
5. Deployment — deploy to production, set up tagged caching.

Cost depends on the scope of work and is calculated individually. For a basic setup (one product), the price starts from $200. For catalogs up to 10,000 products, from $600. The savings from reduced returns average $1500 per month for a store with 500 orders, resulting in a net profit increase of 20% within the first quarter. Contact us for a consultation.

Common mistakes and solutions

• Initializing zoom before image loads — always wrap new Drift() in img.onload or DOMContentLoaded (use async init).
• On touchscreen devices, hover does not work — add tap-to-zoom or switch to Fancybox with data-fancybox="gallery".
• When switching slides in MORE_PHOTO, always reinitialize the instance: destroy old, new Drift for the new URL.
• Ignoring image retination — always use CFile::GetPath to avoid compression artifacts.

Image requirements: besides size, avoid compressing the original on save. Use CFile::GetPath directly, bypassing resize. Format — JPEG with quality 85–95% or WebP for better optimization.

Result: buyers see details, fewer returns. Order zoom setup — get a documented solution with a 30-day guarantee.

Source: Drift GitHub

Learn more about infoblocks: dev.1c-bitrix.ru

What Professional 1C-Bitrix Installation Includes

We start by checking innodb_buffer_pool_size. The default MySQL value (128 MB) is a death sentence for an online store with a catalog of 10,000+ items. We set 70–80% of available RAM on a dedicated server, 50% on VPS. This single setting speeds up the site by 2–3 times compared to the default. We'll assess your project in one day — get a consultation. Contact us to order turnkey installation with performance guarantee.

How to Choose Hosting and Edition for 1C-Bitrix Installation?

BitrixVM is a virtual machine with a pre-installed stack: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push server. For VPS — the best start. Everything is already configured for Bitrix, including OPcache, log rotation, and firewall. Management via web panel on port 8890. Bitrix documentation recommends starting with BitrixVM for predictable performance.

VPS/VDS is the sweet spot. Minimum configuration for a medium online store: 2 vCPU, 4 GB RAM, SSD. Optimal: 4 vCPU, 8 GB RAM. OS: Ubuntu 22.04 or Debian 12. If not BitrixVM, we configure the stack manually for the task. Virtual hosting — only for business cards and landing pages. Requirements: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 MB RAM, .htaccess. 1C-Bitrix hosting partners guarantee compatibility. Dedicated server — for highload. Typical architecture: web server separate, database separate, Redis/Memcached separate. For Enterprise edition — web cluster with load balancer. Cloud (Yandex Cloud, VK Cloud, Selectel) — when load spikes: sales, seasonal peaks. Autoscaling via Managed Kubernetes or simple VM vertical scaling.

Choosing the edition is equally important. A common mistake: choosing "Small Business" for a store that grows to B2B with wholesale prices and three warehouses in six months. Upgrading to "Business" — pay the difference, data is not lost, but it's better to plan ahead. Our specialists select the edition for current tasks and with room for growth. For example, the "Business" license (about 35,000 RUB) pays off through multi-warehouse and 1C exchange, while the wrong choice can lead to a loss of up to 30,000 RUB monthly on excess resources.

What Server Settings Are Critical for 1C-Bitrix?

Web Server and PHP

nginx as reverse proxy + Apache (mod_php) or nginx + PHP-FPM directly. The second option saves memory — Apache is not needed. But some Bitrix modules use .htaccess, so for compatibility we sometimes keep Apache. nginx configuration: fastcgi_read_timeout 300 — for long operations (1C import), client_max_body_size 1024m — large file uploads. Block access to .settings.php, .settings_extra.php, bitrix/.settings.php — they contain database passwords. Rewrite rules from urlrewrite.php — Bitrix generates them, but with nginx + PHP-FPM they need to be duplicated. PHP 8.0–8.2 with extensions: mbstring, curl, gd, xml, json, opcache, redis/memcached. Key php.ini settings: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

Database and Caching

MySQL/MariaDB. Key my.cnf parameters: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — number of CPU cores. Encoding utf8mb4 mandatory, otherwise emoji and special characters break. Redis is preferable to Memcached for Bitrix — supports persistent connections and is more reliable. In production, Redis handles concurrent writes three times faster than Memcached under typical load. Configure in .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

sudo apt install redis-server
sudo systemctl enable redis

SSL, Email, and Cron

SSL — Let's Encrypt via certbot in 90% of cases. Redirect HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. In Bitrix, switch to HTTPS in the main module settings. Email: abandon mail() — connect SMTP (Yandex.Mail for domain, Mail.ru for Business). Be sure to configure SPF, DKIM, DMARC. Without SPF, emails go to spam. Test deliverability via mail-tester.com — score 9+/10. Cron: Bitrix agents switch to system cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. Schedule 1C exchange (15–60 min), search reindex, backups (mysqldump + rsync, rotation 7+4), temporary file cleanup.

Security and Administration

File system: owner www-data, directories 755, files 644, upload 775. nginx blocks access to configuration files. Enable Bitrix Proactive Protection — WAF, activity control (block after 5 failed attempts), kernel integrity check. For admin panel: two-factor authentication via Google Authenticator or OTP, restrict access by IP via nginx for paranoid.

How Long Does 1C-Bitrix Installation and Configuration Take?

Post-Installation Checklist

1. Performance Monitor (/bitrix/admin/perfmon_panel.php) — aim for 30+ points. Below 20 means serious configuration issues.
2. System Check — automatic check of all parameters. Red items must be fixed, yellow — case by case.
3. Security Scanner — check for typical vulnerabilities.
4. PageSpeed Insights — TTFB < 200ms on VPS, LCP < 2.5s.
5. Test 1C exchange — if integration is planned, verify CommerceML exchange before launch.

Additionally, check software versions, caching settings, cron operation, SSL certificate, SPF/DKIM/DMARC, access rights, delete default users and pages. For projects with 54-FZ, ensure fiscalization is configured via OFD provider.

Deliverables

• Fully configured server for 1C-Bitrix with MySQL, PHP, nginx optimization.
• Installed and activated license of the required edition.
• SSL certificate, email settings, cron and backups.
• Documentation: all configuration parameters, access credentials, cron tasks.
• Content manager training: how to log into admin panel, add products, upload images.
• Post-installation support for 30 days — consultations on settings.

Why Trust Professionals with Installation?

Incorrect installation means lost time and money. We've seen projects where a store on "Start" couldn't handle 50 visitors because innodb_buffer_pool_size wasn't configured. After migrating to VPS with correct configuration, the site "flew". Incorrect configuration can cost 30,000 RUB monthly due to excessive resource consumption. You get a ready-made architecture that scales. Order turnkey 1C-Bitrix installation — get a reliable platform for business growth. Contact us for a free consultation: we'll calculate the cost and time for your project. Over 7 years of experience, 120+ Bitrix projects implemented, including highload stores with million-item catalogs. Get in touch — we'll help configure Bitrix for your project.