Добавь 360° viewer на карточку товара
Снял серию → загрузил → вставил <script> на сайт. Виджет «3D» открывает просмотр в модалке через iframe, а в панели — управление и аналитика по товарам.
Подключи 360° viewer на сайт — и покажи товар со всех сторон
Создай товар, загрузи серию кадров и вставь код на сайт. 360°‑обзор готов — без сложной интеграции.
- Вставка через <script> или iframe.
- Кадры в WebP и оптимизация изображений.
- Виджет «3D», модалка и аналитика по товарам.
Как это выглядит на практике
1. Контент в панели
Загрузи серию кадров и управляй публикацией 3D по товарам.
2. Встраивание на сайт
Viewer открывается через модалку + iframe. Привязка — SKU / Schema.org / URL.
3. Preview без магазина
Проверь 360° viewer в панели до того, как поставишь код на сайт.
4. Аналитика по товарам
Смотри просмотры и время просмотра: какие 360°‑обзоры реально смотрят.
Интерактивный 360° viewer
Ниже — чеклист и пошаговая инструкция по подключению Shopify.
Перейти к шагам настройкиКраткий чеклист
- Аккаунт Spinnify и хотя бы один опубликованный 360° товар
- Приложение Spinnify установлено в магазине
- Магазин привязан в Spinnify → Настройки → Интеграции
- Поле сопоставления выбрано и сохранено
- Блок Spinnify добавлен в шаблон товара в редакторе темы
- Проверка на живой карточке товара (не только в редакторе)
- Магазин привязан в Spinnify и тариф подтверждён в Shopify Admin (App Pricing)
Как это устроено
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»
Подтвердите модальное окно: активная подписка Stripe отменяется сразу, дальнейшая оплата — в счёте Shopify. После OAuth вернётесь в Spinnify. Сразу выберите тариф Spinnify в Shopify Admin (см. раздел про оплату ниже).
Проверьте статус
Должно быть «Подключено» и указан домен магазина. При ошибке повторите или убедитесь, что приложение установлено в том же магазине.
Нужна авторизация
Если вы не вошли в Spinnify, сначала откройте страницу входа, затем снова Настройки → Интеграции → Подключить.
Тарифы и оплата через Shopify
Для магазинов на Shopify оплата идёт через Shopify App Pricing (Managed Pricing), а не через Stripe в Studio → Мои данные. Сначала привяжите магазин в Spinnify, затем подтвердите тариф в Shopify Admin — после привязки это единственный поддерживаемый способ оплаты.
Войдите в Spinnify Studio
Зарегистрируйтесь на spinnify.io или войдите в аккаунт. Без пользователя Spinnify магазин нельзя связать с вашим 360°‑контентом.
Установите приложение в Shopify
Shopify Admin → Приложения → установите Spinnify 360° Studio из App Store (или по ссылке установки). Нужен доступ на чтение товаров для metafield поля сопоставления.
Привяжите магазин в Spinnify
Панель → Настройки → Интеграции → домен your-store.myshopify.com → Подключить Shopify → подтвердите OAuth. К одному аккаунту Spinnify можно привязать только один магазин.
Подтвердите перенос биллинга
В модальном окне указано: активная подписка Stripe отменяется сразу, оплата переходит в Shopify. Двойного списания нет — оформление и портал Stripe скрыты в «Мои данные», пока биллинг идёт через Shopify.
Выберите тариф в Shopify Admin
Приложения → Spinnify 360° Studio → выбор тарифа (App Pricing) → подтвердите Free или платный план. Shopify перенаправит в Spinnify; подписка синхронизируется через Partner API. Смена, апгрейд и отмена — только в Shopify Admin.
Доступ, пока тариф синхронизируется
Если у вас была платная подписка Stripe, Studio остаётся доступным до конца оплаченного периода (и при необходимости — в рамках стандартного grace period), пока не подтвердится оплата в Shopify. Публикуйте 360°‑товары в Studio как обычно.
Отключение магазина
Сначала отмените тариф App Pricing в Shopify Admin, затем отключите магазин в Spinnify → Интеграции. Stripe автоматически не восстанавливается — оформите подписку снова в «Мои данные», если вернётесь к оплате только через SaaS.
Для ревью Shopify App Store (тестовый магазин)
Используйте development store. Оплата через Shopify Managed Pricing (не Billing API). Порядок шагов ниже — чтобы у ревьюера был привязанный магазин и активный тариф.
- Установите Spinnify 360° Studio на тестовый магазин из листинга App Store.
- В браузере войдите в Spinnify Studio (тот же email, что для теста).
- Studio → Настройки → Интеграции → домен тестового магазина (name.myshopify.com) → Подключить Shopify → OAuth и модальное окно переноса биллинга.
- Shopify Admin → Приложения → Spinnify 360° Studio → выбор тарифа → подтвердите план (для проверки достаточно Free).
- Вернитесь в Studio: в «Мои данные» биллинг через Shopify (без кнопки Stripe). Создайте/опубликуйте 360°‑товар и настройте тему и поле сопоставления по этому гайду.
- На витрине откройте товар с совпадающим SKU (или выбранным полем) и убедитесь, что кнопка 3D View открывает просмотрщик.
- Проверка отключения: сначала отмените тариф в Shopify Admin, затем отключите магазин в Studio → Интеграции.
Шаг 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?
Закладка /integration-guide или ссылка из приложения / карточки Интеграции в Studio. Страницу можно встроить в iframe админки Shopify.
Платить в Spinnify или в Shopify?
После привязки магазина в Интеграциях тариф оформляется и меняется в Shopify Admin (App Pricing). Оформление через Stripe в Studio → Мои данные для этого аккаунта отключено, чтобы не было двойной оплаты.