Краткий ответ
360° в Magento 2: опубликовать в Studio (имя = артикул, Активен), вставить widget.js в HTML Head или HTML Page Builder, указать ключ и артикул (AUTO, если на странице есть артикул в JSON-LD). Отложенная загрузка и окно. Сбросить кэш. Проверять живую карточку, не предпросмотр в админке.
Галерея Magento листает плоские фото. Покупатель всё равно не может повернуть вещь. Вращение 360° из серии кадров можно добавить без модуля из Magento Marketplace: кадры хранятся в Spinnify, на сайт вставляется один скрипт.
Гайд для Magento 2 и Adobe Commerce. Magento 1 снят с поддержки. Тот же фрагмент widget.js работает на карточке товара. Отдельное расширение Magento от Spinnify ставить не нужно.
3 шага от фото до живой карточки Magento
Вся работа вокруг кода встраивания: один скрипт на карточке и совпадение с артикулом каталога.
1. Подготовить в Spinnify Studio
До входа в админку Magento:
- Зарегистрироваться в Spinnify Studio.
- Создать товар и загрузить серию фото (24–36 кадров, 4:3 для блока «ПК фото»).
- Важно: имя товара в Studio должно совпадать с артикулом Magento (пробелы и дефисы важны, регистр нет).
- Оставить товар активным. Скрытый товар кнопку не покажет.
2. Добавить код в Magento
Два способа вставить один и тот же фрагмент из Studio. Копируйте его в «Установка виджета» → «Показать код».
Первый способ: HTML Head (быстрее всего для всего каталога). Content → Design → Configuration → правка витрины → HTML Head → Scripts and Style Sheets. Вставить скрипт, сохранить, сбросить кэш Magento. Ставьте режим AUTO, если Magento уже выводит JSON-LD Schema.org с артикулом на карточке.
Второй способ: HTML-код Page Builder (один товар или блок). На товаре откройте Page Builder, перетащите Elements → HTML Code, вставьте тот же фрагмент, сохраните. Если AUTO недоступен, укажите артикул этого товара в коде встраивания вручную.
3. Настроить связь
Вставьте скопированный из Studio скрипт widget.js. Ключ виджета не меняйте. Артикул в фрагменте должен совпасть с артикулом Magento; режим AUTO читает разметку страницы; режим по адресу страницы берёт сохранённый путь.
- Ключ виджета из Studio не меняют.
- Артикул в коде: значение из Magento, либо AUTO чтобы взять его из JSON-LD, либо режим по адресу страницы, если в Studio сохранён путь.
Почему страница остаётся быстрой
Чужой скрипт в Magento обычно вызывает вопросы про скорость, потому что Full Page Cache и галерея уже спорят за первую отрисовку. Spinnify не грузит кадры в этот момент: они остаются на CDN, пока покупатель не попросит крутить. Галерея Magento рисуется первой; слой 360 открывается после клика в отдельном окне.
- Отложенная загрузка: браузер не качает кадры, пока покупатель не нажал.
- Изоляция: просмотр открывается в окне и не подменяет галерею Magento при первой отрисовке.
- CDN: кадры отдаются как WebP/AVIF, без лишних файлов в медиахранилище Magento.
Чеклист: кнопки нет?
Если кнопки 3D View нет, пройдите список по живой ссылке на товар, а не в предпросмотре админки.
- Сбросили кэш? Правки HTML Head и вёрстки иначе не видны.
- Открыта живая ссылка на товар? Предпросмотр в админке плохо проверяет скрипты витрины.
- Имена совпадают? Имя в Studio и артикул Magento должны быть одинаковыми (включая пробелы и дефисы).
- Товар в Studio активен?
- Ключ виджета скопирован из вашего аккаунта?
- Один скрипт на страницу: не вставляйте фрагмент дважды.
- CSP в Magento 2.4.7+: если консоль блокирует www.spinnify.io, добавьте этот хост в csp_whitelist.xml. CSP не отключайте.
Можно ли настроить вид кнопки?
Да. Внешний вид кнопки задаётся в Studio, а не в CSS темы. Можно подогнать её под витрину, не правя шаблон карточки:
- Положение: справа, слева или по центру.
- Цвета и подпись под тему Magento.
- Формат: круглая плавающая иконка или узкая вкладка.
Галерея Magento при этом остаётся на месте. Слой 360° открывается, когда его запросили.
Снять вращение: гайд со смартфоном. Другие HTML-магазины: Tilda Zero Block. Полный гайд Spinnify.
