Shopify + Spinnify 360° Studio
Здесь — полная настройка: от создания 360° товаров в Studio до кнопки 3D на карточке товара в Shopify. Идите по шагам по порядку — так быстрее и без ошибок.
Краткий чеклист
- Аккаунт Spinnify и хотя бы один опубликованный 360° товар
- Приложение Spinnify установлено в магазине
- Магазин привязан в Spinnify → Настройки → Интеграции
- Поле сопоставления выбрано и сохранено
- Блок Spinnify добавлен в шаблон товара в редакторе темы
- Проверка на живой карточке товара (не только в редакторе)
Как это устроено
Spinnify хранит ваши 360° обороты в облаке. Shopify показывает кнопку 3D только если значение из каталога (например SKU варианта) совпадает с именем товара в Spinnify Studio — без учёта регистра.
Загрузка и публикация оборотов
OAuth и поле сопоставления
Блок Spinnify 3D Button
Покупатель открывает 360°
Важно
Приложение в админке Shopify и эта инструкция не заменяют Spinnify Studio. 360° контент по-прежнему создаётся и публикуется в Studio (или в мобильном приложении). Shopify только показывает уже опубликованное.
Перед началом
- Аккаунт Spinnify 360° Studio (регистрация на spinnify.io при необходимости).
- Права администратора в магазине Shopify.
- Хотя бы один товар в Studio с загруженными и опубликованными 360° кадрами.
- Заполненные SKU или другие идентификаторы в Shopify для товаров, где нужен 3D (при сопоставлении по SKU).
- Тема с секциями Online Store 2.0 на шаблоне товара (большинство современных тем).
Шаг 1 — Создайте товары в Spinnify Studio
Имя каждого товара в Studio — это ключ, по которому Shopify находит 360°. Продумайте это до привязки магазина.
Войдите в Studio
Откройте Spinnify 360° Studio в браузере и авторизуйтесь.
Создайте или откройте товар
В панели добавьте новый товар или откройте существующий. Имя товара (папки) должно совпадать со значением в Shopify — например с SKU варианта.
Загрузите и опубликуйте 360°
Добавьте серию кадров (десктоп и при необходимости мобильную), затем опубликуйте. Без публикации кнопка 3D на витрине не появится.
Держите имена в согласованности
Если в Shopify SKU ABC-123, в Studio имя товара должно быть ABC-123 (регистр и пробелы могут отличаться — сравнение без учёта регистра).
Совет
Снимки можно делать в мобильном приложении Spinnify — они попадают в тот же товар в Studio по SKU.
Шаг 2 — Установите приложение Shopify
Установите Spinnify 360° Studio из Shopify App Store (или по ссылке установки из Spinnify).
Откройте «Приложения» в админке
Shopify Admin → Приложения → найдите Spinnify 360° Studio → Установить и подтвердите права (чтение товаров).
Откройте приложение
После установки откройте приложение из списка. В iframe может открыться маркетинговая страница — это нормально, пока не настроен отдельный URL приложения. Настройку делайте по этой инструкции.
Права доступа
Приложению нужно чтение товаров, чтобы Spinnify мог записать настройку поля сопоставления в metafields магазина.
Шаг 3 — Привяжите магазин в Spinnify
Привязка выполняется из Spinnify Studio под вашим аккаунтом — не только из Shopify.
Откройте «Интеграции»
Панель → Настройки → вкладка Интеграции → блок Shopify.
Укажите домен магазина
Введите домен точно: your-store.myshopify.com (не кастомный домен вроде www.example.com).
Нажмите «Подключить Shopify»
Вас перенаправит в Shopify для подтверждения, затем обратно в Spinnify с сообщением об успехе.
Проверьте статус
Должно быть «Подключено» и указан домен магазина. При ошибке повторите или убедитесь, что приложение установлено в том же магазине.
Нужна авторизация
Если вы не вошли в Spinnify, сначала откройте страницу входа, затем снова Настройки → Интеграции → Подключить.
Шаг 4 — Выберите поле сопоставления
Определите, какое поле Shopify сравнивается с именем товара в Studio. По умолчанию — SKU варианта.
Как работает сопоставление
На карточке товара блок темы читает выбранное поле для текущего варианта и отправляет значение в Spinnify. Если есть опубликованный товар Studio с таким именем — появляется кнопка 3D.
В Настройки → Интеграции выберите поле в списке и нажмите «Сохранить». Значение сохраняется в Spinnify и в metafield магазина — витрина подхватывает его сразу.
variant sku
SKU варианта — подходит большинству каталогов; имя в Studio = SKU варианта.
variant barcode
Штрихкод варианта — если имена в Studio совпадают со штрихкодами.
product handle
Handle товара — slug в URL; одинаковый для всех вариантов товара.
product title
Название товара — отображаемое имя; одинаковое для всех вариантов.
variant id
ID варианта — числовой ID Shopify; стабильный, но неудобен для людей.
product id
ID товара — один 360° на весь товар, не на вариант.
Правило именования в Studio
Какое бы поле вы ни выбрали, имя товара в Spinnify должно совпадать со значением этого поля у проверяемого варианта.
Шаг 5 — Добавьте блок в редакторе темы
Добавьте блок Spinnify 3D Button в шаблон страницы товара.
Откройте редактор темы
Shopify Admin → Интернет-магазин → Темы → Настроить.
Перейдите к шаблону товара
Вверху выберите шаблон: Товары → стандартный шаблон товара (или тот, что используют ваши товары).
Добавьте блок
В секции страницы товара: Добавить блок → Приложения → Spinnify 3D Button. Разместите рядом с кнопкой покупки или галереей.
Сохраните тему
Нажмите Сохранить. В редакторе при пустом поле сопоставления может быть подсказка пунктиром — заполните поле в Shopify или смените поле в Studio.
В превью редактора могут быть демо-товары — обязательно проверьте реальный URL товара с совпадающим товаром в Studio.
Шаг 6 — Проверка на витрине
Убедитесь, что цепочка работает на реальном товаре.
Выберите тестовый товар
Товар с опубликованным 360° в Studio и заполненным полем сопоставления в Shopify (например SKU).
Откройте карточку на витрине
Живая витрина, не только «Настроить». При совпадении должна появиться кнопка 3D View.
Нажмите 3D View
Откроется просмотрщик с вашим оборотом. Если пусто — см. раздел «Решение проблем».
Проверьте другой вариант
При сопоставлении по SKU, штрихкоду или ID варианта переключите варианты и убедитесь, что кнопка появляется только там, где есть пара в Studio.
Решение проблем
Нет кнопки 3D на карточке
Проверьте: (1) товар опубликован в Studio с кадрами; (2) имя в Studio = значение поля сопоставления у варианта; (3) магазин подключён в Интеграциях; (4) поле сохранено после подключения; (5) блок Spinnify в шаблоне товара, тема сохранена.
В редакторе темы есть, на сайте нет
В превью может не быть SKU. Откройте реальный URL товара. Очистите кэш или проверьте в режиме инкогнито.
Подключили не тот магазин
В Studio → Настройки → Интеграции отключите и подключите снова с правильным доменом myshopify.com.
Сменили SKU в Shopify — 3D пропал
Переименуйте товар в Studio под новый идентификатор или смените поле сопоставления.
Ошибка OAuth / подключения
Войдите в Spinnify, убедитесь что приложение установлено в том же магазине, и callback URL в настройках приложения Shopify указывает на ваш домен Spinnify.
Нужна помощь
Напишите в поддержку через страницу Contact на spinnify.io — укажите домен магазина и ссылку на пример товара.
Вопросы и ответы
Нужен ли Studio, если есть Shopify?
Да. Shopify только показывает 360°, которые вы создали и опубликовали в Studio или мобильном приложении.
Один 360° на все варианты?
Используйте handle, название или ID товара, либо одинаковое имя в Studio для всех вариантов при сопоставлении по SKU.
Работает ли с любой темой?
Нужен шаблон товара OS 2.0 с блоками приложений. Поддерживают почти все актуальные темы Shopify.
Инструкция без входа?
Да, эта страница публичная. Привязка магазина и редактирование 360° требуют аккаунта Spinnify.
Как открыть из Shopify?
Закладка /shopify-guide или ссылка из приложения / карточки Интеграции в Studio. Страницу можно встроить в iframe админки Shopify.