Просмотр 3D-моделей уже встроен в Shopify. Загрузите GLB-файл в медиаматериалы товара, и любая тема с поддержкой 3D покажет модель, которую можно вращать. Кнопка AR откроет AR Quick Look на iPhone и Scene Viewer на Android. Для базового показа товара в 3D отдельное приложение не нужно. Нужны качественный GLB небольшого размера и совместимая тема.
Что уже есть в Shopify
Согласно документации Shopify по медиаматериалам товаров:
- Форматы: GLB или USDZ. Shopify преобразует загруженный файл, чтобы были доступны обе версии: для Android и для iOS.
- Максимальный размер: до 500 МБ на модель.
- Автоматическая оптимизация: файлы больше 15 МБ оптимизируются автоматически; файлы меньше 15 МБ остаются без изменений.
- Темы: все темы Online Store 2.0 от Shopify и семейство Horizon поддерживают 3D. Для сторонней темы нужна версия с такой поддержкой.
Для отображения моделей темы используют компонент Google model-viewer. AR работает через библиотеку Shopify XR, которая поддерживает AR Quick Look в Safari на iOS и Scene Viewer на Android.
Как добавить интерактивную 3D-модель в Shopify: по шагам
1. Проверьте тему
Если у вас актуальная тема от Shopify, поддержка уже есть. В старую или индивидуально разработанную тему разработчик может добавить просмотр модели через Liquid-фильтр model_viewer_tag, а кнопку AR через shopify-xr. Как это сделать, описано в документации для разработчиков тем.
2. Подготовьте GLB по требованиям Shopify для партнёров
500 МБ допустимы технически, но стремиться к такому размеру не стоит. Собственные требования Shopify к 3D-моделям для партнёров гораздо строже:
| Параметр | Рекомендации Shopify для партнёров |
|---|---|
| Файл | GLB со встроенными текстурами |
| Общий размер | Около 4 МБ |
| Текстуры | По возможности оптимизированные JPG, не больше 2048 x 2048 пикселей для мобильного веба |
| Карты текстур | Базовый цвет, карта нормалей и одна объединённая карта затенения, шероховатости и металличности |
| Материалы | Один материал, если нет обоснованной необходимости в нескольких |
| Масштаб | Реальный масштаб (в примере Shopify стол смоделирован высотой 73 см) |
| Начало координат | В центре основания товара |
| Геометрия | Замкнутые края, без отверстий, заметных в AR |
Масштаб важнее, чем кажется: если при моделировании дивана выбраны неверные единицы измерения, в AR он будет размером с игрушку.
3. Проверьте модель перед загрузкой
Откройте GLB в редакторе model-viewer или любом приложении для просмотра glTF. Сравните цвета с реальным образцом. Убедитесь, что при открытии товар повёрнут передней стороной к пользователю, а сзади нет пропущенных деталей.
4. Загрузите модель в медиаматериалы товара
В панели Shopify откройте товар, нажмите кнопку добавления медиаматериалов и загрузите GLB так же, как изображение. Перетащите его на нужное место в списке. Мы рекомендуем оставить фотографию первой: она будет использоваться в миниатюре и поисковой выдаче. 3D-модель поставьте второй, чтобы её легко нашли покупатели, которым нужны подробности.
5. Проверьте AR на реальных телефонах
В Safari на iPhone кнопка AR должна открыть Quick Look и показать товар в натуральную величину, а на Android открыть Scene Viewer. Проверьте модель в реальной комнате и хотя бы на одном старом телефоне. Если кнопки нет, чаще всего причина в теме без поддержки 3D или в изменённом шаблоне товара, из которого убрали блок AR.
Сколько стоит 3D-модель для Shopify
В руководстве Shopify за 2020 год простые модели товаров оценивались в 40-200 $, а сложные - дороже 1 000 $. Статья уже не новая; более свежие оценки разработчиков дают примерно 150-1 500 $ за готовую к использованию модель с PBR-текстурами. Для смены цвета обычно меняют материалы, а не геометрию, поэтому одну базовую модель можно использовать для нескольких вариантов товара.
Когда достаточно встроенного 3D в Shopify, а когда нужна разработка
| Задача | Встроенный 3D-просмотр | Разработка на заказ |
|---|---|---|
| Вращение, приближение, просмотр в AR | Да | Да |
| Смена цвета или материала в зависимости от варианта товара | Ограниченные возможности | Да |
| Правила совместимости, цена в реальном времени, составные товары | Нет | Да |
| Освещение в стиле бренда, движения камеры, анимация появления товара | Нет | Да |
| 3D на посадочной странице с управлением при прокрутке | Нет | Да |
Если покупателю нужно просто рассмотреть товар, встроенных возможностей достаточно. Если он должен собрать свою конфигурацию, посмотрите статью о стоимости 3D-конфигуратора. О 3D вне Shopify, включая вставки Sketchfab и разработку на Three.js, рассказываем в руководстве по добавлению интерактивной 3D-модели на сайт.
Что касается результатов: в журнале обновлений Shopify за 2022 год утверждается, что у магазинов, добавивших 3D-контент, конверсия в среднем растёт на 94%. Это собственные данные Shopify о магазинах на платформе, а не контролируемый эксперимент. Что они позволяют и не позволяют утверждать, разбираем в статье о статистике конверсии 3D-конфигураторов.
