Как добавить AR на страницы товаров в Shopify и WooCommerce
Коротко: Чтобы добавить AR на страницу товара, нужна 3D-модель товара в реальном размере в двух форматах: GLB (Android и веб) и USDZ (iPhone). Shopify поддерживает 3D-модели как медиа товара, а в WooCommerce и на любом другом сайте вы встраиваете бесплатный компонент model-viewer с обоими файлами.
Шаг 1: создайте 3D-файлы
- Плоские товары (принты, постеры, холсты, ковры, образцы обоев): загрузите фото товара в jpgtousdz и укажите реальную ширину или высоту. Вы получите GLB и USDZ в этом размере.
- Предметы (вазы, стулья, обувь): снимите медленное видео вокруг товара и воспользуйтесь функцией видео в 3D, указав реальную высоту.
- Делайте каждый файл небольшим (текстуры не больше 2048 px), чтобы страница товара не тормозила.
Шаг 2а: Shopify
- В админке Shopify откройте товар, затем раздел «Медиа» и загрузите файл GLB как 3D-модель.
- Shopify покажет её в собственном 3D-просмотрщике, а темы с поддержкой этой функции добавят на телефонах кнопку «Посмотреть в вашем пространстве».
- Проверьте товар на iPhone и на телефоне с Android. В справочном центре Shopify указаны актуальные ограничения на размер файлов и поддерживаемые темы.
Шаг 2б: WooCommerce, WordPress или любой сайт
Загрузите GLB и USDZ в медиатеку, затем добавьте в описание товара блок «Произвольный HTML» с model-viewer:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="Принт 50 x 70 см"></model-viewer>Шаг 2в: вариант без кода
Если страницу редактировать нельзя, добавьте кнопку или QR-код со ссылкой на AR-просмотрщик jpgtousdz для этого товара. Он открывается в AR на iPhone и Android без приложения.
Чек-лист перед запуском
| Что проверить | Зачем |
|---|---|
| Реальный размер указан верно | Покупатели оценивают размер по AR, а неверный масштаб приводит к возвратам. |
| Размещение выбрано правильно (стена или пол) | Картины вешают на стену, мебель ставят на пол. |
| Работает на iPhone и Android | Каждый использует свой файл. |
| Задан альтернативный текст | Доступность и поиск. |
Попробуйте сейчас
Превратите фото в USDZ и GLB в реальном размере за несколько секунд или видео в 3D-модель. Первая конвертация фото бесплатна.
AR по фото товараВопросы и ответы
Нужен ли Shopify файл USDZ?
Загрузите GLB в Shopify: он сам отвечает за показ. USDZ тоже стоит сохранить на случай, если он понадобится вашей теме или другому каналу.
Поддерживает ли WooCommerce AR из коробки?
Нет. Используйте плагин или встройте model-viewer с файлами GLB и USDZ, как показано выше.
Сколько это стоит?
model-viewer бесплатен. Конвертация фото в AR в jpgtousdz в первый раз бесплатна, дальше входит в тариф. API стоит $0.15 за фото и $1.50 за 3D-модель из видео.