Implementing 360-Degree Product Views on 1C-Bitrix

The buyer wants to inspect the product from all sides before ordering. A typical gallery of 8 photos cannot replace the ability to rotate the object. 360-degree viewing is a sequence of frames (24-72 shots) that, when dragged, create the illusion of rotation. Implementing 360 photos on Bitrix is a non-trivial engineering task: you need to design a storage scheme, choose a player, ensure fast loading on mobile devices. The result of a proper implementation is reduced returns and increased conversion. Usually stores face problems: slow loading, lack of touch support, difficulty updating frames. We solve these problems comprehensively. We will set up 360 photos on 1С-Битрикс turnkey: implement storage, player, preloading, and WebP optimization. Order the setup — contact us.

Setting up 360 product photos on 1С-Битрикс

360 frames are stored as regular images attached to the product via an infoblock property of type File (F) with the "Multiple" flag. The property is created with a code, e.g., IMAGES_360.

When adding frames through the admin panel, they are saved in b_iblock_element_property with PROPERTY_TYPE = 'F' — each frame as a separate row with a common IBLOCK_ELEMENT_ID and IBLOCK_PROPERTY_ID.

Retrieving frames for the frontend:

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props   = $element->GetProperties();
$frames  = $props['IMAGES_360']['VALUE'];

// $frames — array of file IDs from b_file
$frameUrls = array_map(function($fileId) {
    return \CFile::GetPath($fileId);
}, (array)$frames);

// Pass to JSON for JS player
echo json_encode(['frames' => $frameUrls]);

Comparison of storage methods

If you have a catalog with thousands of SKUs, the second method is preferable: it allows reusing one set of frames for multiple products and centrally managing loading.

JavaScript player for 360: which to choose?

The simplest implementation without third-party libraries is on Canvas or CSS background-position. For production, use one of the ready-made solutions:

CSS sprite is the lightest but requires preprocessing. Canvas gives more control. three-sixty.js is a full-featured solution with inertia and zoom, but depends on jQuery.

Implementation based on CSS sprite (when all frames are stitched into one horizontal sprite):

class Viewer360 {
    constructor(el, frames) {
        this.el     = el;
        this.frames = frames;
        this.total  = frames.length;
        this.current = 0;
        this.dragging = false;
        this.startX   = 0;

        this.img = new Image();
        this.img.src = frames[0];
        el.appendChild(this.img);

        el.addEventListener('mousedown', e => { this.dragging = true; this.startX = e.clientX; });
        document.addEventListener('mouseup', () => { this.dragging = false; });
        document.addEventListener('mousemove', e => this.onMove(e));

        // Touch
        el.addEventListener('touchstart', e => { this.dragging = true; this.startX = e.touches[0].clientX; });
        document.addEventListener('touchend', () => { this.dragging = false; });
        document.addEventListener('touchmove', e => this.onMove(e.touches[0]));
    }

    onMove(e) {
        if (!this.dragging) return;
        const delta = e.clientX - this.startX;
        if (Math.abs(delta) > 5) {
            this.current = (this.current + (delta > 0 ? 1 : -1) + this.total) % this.total;
            this.img.src = this.frames[this.current];
            this.startX  = e.clientX;
        }
    }
}

Initialization in the bitrix:catalog.element component template:

new Viewer360(
    document.getElementById('viewer-360'),
    <?= json_encode($frameUrls) ?>
);

Preloading is mandatory for UX

With lazy loading of frames, the rotation will lag on the first scroll. The correct approach is to preload all frames in the background after page load:

function preloadFrames(urls) {
    return Promise.all(urls.map(url => {
        return new Promise(resolve => {
            const img = new Image();
            img.onload = resolve;
            img.src    = url;
        });
    }));
}

preloadFrames(frameUrls).then(() => {
    // Unlock controls after loading
    document.getElementById('viewer-360').classList.remove('loading');
});

Until preloading is complete, the container is blocked with a spinner.

Optimization: WebP and frame size

36 frames at 800×600px in JPEG 80% quality = ~3-5 MB total weight. For mobile networks, this is a lot. Optimization:

• Conversion to WebP — compression 25-35% better than JPEG at the same visual quality.
• Reducing frame resolution to 600×450 — sufficient for 360 rotation.
• Progressive loading: first show the first frame, the rest in the background.

Bitrix generates WebP via \CFile::ResizeImageGet() with the parameter 'format' => 'webp' starting from certain versions. For older versions, an external converter via exec('cwebp ...') during image upload. More details in the documentation.

Deliverables included

• Creating an infoblock or property for storing 360 frames with migrations.
• Ready JavaScript player with preloading and touch support.
• WebP converter (if needed) and resize settings.
• Integration into the standard bitrix:catalog.element component.
• Testing on real products.
• Documentation for frame upload and configuration.
• Post-release support for one month.
• Training for your team on maintaining the 360 system.

Company metrics and experience

With over 5 years of experience in Bitrix development and 50+ successful 360 implementations, we guarantee a smooth process. Our team has delivered 100+ e-commerce projects, reducing bounce rates by an average of 15% after implementing 360 views. Typical project cost starts from $500, and bandwidth savings from WebP conversion average 30%.

How we do it: process and timeline

We don't just insert ready-made code — we adapt the solution to your catalog, load, and product types. Stages:

1. Audit of the current catalog and infrastructure.
2. Designing the storage scheme (property or separate infoblock).
3. Integrating a JavaScript player with touch and drag handling.
4. Image optimization (WebP, resize, progressive loading).
5. Testing on mobile and desktop.
6. Deployment and documentation handover.

Estimated timeline: from 3 to 7 working days depending on catalog volume. Exact timeline is calculated after analysis. Get a consultation from an engineer — contact us.

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.