Краткий ответ
360° в каталоге 1С-Битрикс (не Bitrix24): опубликовать в Studio (имя = артикул, Активен), вставить widget.js во включаемую область bitrix:main.include или в шаблон catalog.element, указать ключ и артикул (AUTO, если на странице есть артикул в JSON-LD). Отложенная загрузка и окно. Проверять живую карточку. Композитный сайт не отключайте как первое решение: сначала проверьте живую страницу.
Галерея Битрикс листает плоские фото. Покупатель всё равно не может повернуть вещь. Вращение 360° из серии кадров можно добавить без модуля из Маркетплейса Битрикс: кадры хранятся в Spinnify, на сайт вставляется один скрипт.
Гайд для карточек каталога 1С-Битрикс (catalog.element). Bitrix24 это другая система (CRM), не этот стек. Тот же фрагмент widget.js работает на карточке товара. Отдельный модуль Маркетплейса Битрикс от Spinnify ставить не нужно.
3 шага от фото до живой карточки Битрикс
Вся работа вокруг кода встраивания: один скрипт на карточке и совпадение с артикулом в инфоблоке.
1. Подготовить в Spinnify Studio
До входа в админку Битрикс:
- Зарегистрироваться в Spinnify Studio.
- Создать товар и загрузить серию фото (24–36 кадров, 4:3 для блока «ПК фото»).
- Важно: имя товара в Studio должно совпадать с артикулом в каталоге (пробелы и дефисы важны, регистр нет).
- Оставить товар активным. Скрытый товар кнопку не покажет.
2. Добавить код в Битрикс
Два способа вставить один и тот же фрагмент из Studio. Копируйте его в «Установка виджета» → «Показать код».
Первый способ: включаемая область (быстрее всего для всего каталога). В шаблоне детальной карточки (catalog.element) добавьте компонент bitrix:main.include. Укажите файл области (например в /include/) со скриптом, сохраните. Ставьте режим AUTO, если карточка уже выводит JSON-LD Schema.org с артикулом.
Второй способ: catalog.element template.php (одна вставка в шаблон карточки). Откройте шаблон детальной карточки, вставьте тот же фрагмент, сохраните. Если AUTO недоступен, укажите артикул этого товара в коде встраивания вручную. Не вставляйте в catalog.section: скрипт тогда грузится на списках.
3. Настроить связь
Вставьте скопированный из Studio скрипт widget.js. Ключ виджета не меняйте. Артикул в фрагменте должен совпасть с артикулом в инфоблоке; режим AUTO читает разметку страницы; режим по адресу страницы берёт сохранённый путь. Для торговых предложений укажите артикул того предложения, которое видит покупатель.
- Ключ виджета из Studio не меняют.
- Артикул в коде: значение из каталога, либо AUTO чтобы взять его из JSON-LD, либо режим по адресу страницы, если в Studio сохранён путь.
Почему страница остаётся быстрой
Чужой скрипт в 1С-Битрикс обычно вызывает вопросы про скорость, потому что композитный кэш и catalog.element уже держат первую отрисовку. Spinnify не грузит кадры в этот момент: они остаются на CDN, пока покупатель не попросит крутить. Галерея Битрикс рисуется первой; слой 360 открывается после клика в отдельном окне.
- Отложенная загрузка: браузер не качает кадры, пока покупатель не нажал.
- Изоляция: просмотр открывается в окне и не подменяет галерею Битрикс при первой отрисовке.
- CDN: кадры отдаются как WebP/AVIF, без лишних файлов в хранилище загрузок Битрикс.
Чеклист: кнопки нет?
Если кнопки 3D View нет, пройдите список по живой ссылке на товар, а не в предпросмотре админки.
- Открыта живая ссылка на товар? Предпросмотр в визуальном редакторе плохо проверяет скрипты витрины.
- Композитный сайт: проверяйте опубликованную страницу с композитом. Если кнопки нет, вынесите скрипт из динамической области или перепроверьте с ?ncc=1, затем поправьте место вставки. Не отключайте композит на всём сайте как первое решение.
- Имена совпадают? Имя в Studio и артикул в каталоге должны быть одинаковыми (включая пробелы и дефисы).
- Товар в Studio активен?
- Ключ виджета скопирован из вашего аккаунта?
- Один скрипт на страницу: не вставляйте фрагмент дважды. Не в catalog.section на списках.
- Торговые предложения: укажите артикул того предложения, которое видит покупатель, либо режим по адресу страницы, если у каждого предложения свой путь.
Можно ли настроить вид кнопки?
Да. Внешний вид кнопки задаётся в Studio, а не в CSS темы. Можно подогнать её под витрину, не правя шаблон карточки:
- Положение: справа, слева или по центру.
- Цвета и подпись под тему Битрикс.
- Формат: круглая плавающая иконка или узкая вкладка.
Галерея Битрикс при этом остаётся на месте. Слой 360° открывается, когда его запросили.
Снять вращение: как сделать 360-просмотр. Другие HTML-магазины: Tilda Zero Block. вращения 360 в WooCommerce.
