Краткий ответ
360° на Shopify за ~15 минут без кода: publish в Studio (имя = SKU) → App Store → OAuth → match field → блок Spinnify 3D Button → тест в инкогнито на live URL.
Интеграция интерактивных 360° фото часто пугает: кажется, нужны программисты, правки Liquid и ручная связка сотен товаров.
Экосистема Shopify изменилась. Благодаря app blocks настроить спины Spinnify можно за 15 минут в визуальном редакторе — без строчки кода. Разберём по шагам, как связать товары с обзорами и запустить на сайте.
Пошаговый план настройки
Вся интеграция — 6 шагов от загрузки кадров до проверки кнопки на сайте.
Шаг 1. Опубликуйте продукт в Spinnify Studio
Перед настройками Shopify создайте базу крутящихся фото:
- Зайдите в Spinnify Studio.
- Создайте продукт. Назовите его как артикул (SKU) в магазине — например, MUG-RED-01.
- Загрузите серию кадров (обычно 24–36 ракурсов) и переведите статус в Active (Опубликовано).
Важно: черновик или ошибка в названии — система не свяжет фото с магазином, кнопка не появится.
Шаг 2. Установите приложение из Shopify App Store
Найдите Spinnify 360° Studio и нажмите Install. Приложение получит доступ к каталогу, чтобы понимать артикулы, и добавит кнопку в визуальный редактор темы.
Шаг 3. Свяжите аккаунты (OAuth)
Подружите магазин и медиатеку Spinnify:
- В Spinnify Studio: Dashboard → Settings → Integrations → Shopify.
- Введите адрес в формате название-магазина.myshopify.com — внутренний адрес Shopify, не личный домен (myshop.com).
- Нажмите Connect и подтвердите связь в открывшемся окне.
Шаг 4. Выберите, как связывать товары (Match Field)
Подскажите системе, по какому признаку сопоставлять товары и фото в Studio:
- SKU варианта (рекомендуется) — одежда разных цветов: красная футболка — свой спин, синяя — свой.
- Handle продукта — один товар, мало вариантов или они отличаются только размером при одинаковом виде. Один спин на всю карточку.
Нажмите Save.
Шаг 5. Добавьте кнопку «Обзор 360°» в редакторе темы
Без программирования — всё мышкой:
- Shopify: Online Store → Themes → Customize.
- Шаблон Default product.
- Add block → Apps → Spinnify 3D Button.
- Перетащите блок под галерею или над «В корзину».
- В настройках блока: Spinnify site URL = https://www.spinnify.io (HTTPS, без / в конце). Настройте цвета → Save.
Шаг 6. Проверьте результат на живом сайте
Откройте карточку товара на реальном сайте в инкогнито — у варианта заполнен SKU и спин опубликован в Studio.
Через секунду под галереей появится кнопка «Обзор 360°». Нажмите — откроется полноэкранное окно, где товар можно крутить.
Шпаргалка по сопоставлению (Matching)
Простая таблица, как связывать товары:
| Способ связи | Как назвать продукт в Studio | Кому подходит |
|---|---|---|
| variant_sku (по умолчанию) | Точный артикул цвета/размера | Одежда, обувь, аксессуары — цвет имеет значение |
| product_handle | Хвостик ссылки (red-ceramic-mug) | Техника, мебель — размеры разные, вид один |
| variant_barcode | Штрихкод товара | Магазины со складским учётом (1С, ERP) |
Что делать, если кнопка не появилась?
Пройдитесь по чек-листу:
- Статус в Studio: продукт Active и опубликован, не Draft?
- Буквы и знаки: имя в Studio = артикул в Shopify до последнего дефиса? (Регистр не важен, пробелы и тире — важны.)
- SKU заполнен у выбранного варианта в админке Shopify? Пустое поле — кнопка спрячется.
- Не тестируйте только в редакторе тем — там подсказки для настройки. Проверяйте live URL.
Интеграция завершена. Магазин показывает товары со всех ракурсов — без замедления страниц, если следовать гайду по скорости.
Скорость загрузки: 360° без красной зоны Google. Съёмка: DIY на смартфон. Интерактивный гайд со скриншотами.
