Вставити 3D-вікно Unity на сторінку товару на сайті Shopify

Ірина, вітаю!
Готовий допомогти у вирішення даної задачі.
Маю досвід роботи з Liquid Shopify і загалом з розробки тем для Shopify.

У вашому кейсі потрібно буде внести деякі правки у обрану вами тему для інтеграціїiframe і я б додав кастомний метафілд для товару, щоб просто в адмінці при додаванні товару прикріпляти потрібний лінк на3D-конфігуратор конкретної моделі авто.

Ось варіант швидкої реалізації - за вашим приклад на скріншоті.
Без налаштувань, просто щоб оперативно вам показати.

… https://furt-dev.myshopify.com/products/lexus-lc-500-nia-side-skirt-splitter-extensions-2018-25

Пропоную обговорити деталі!

Довіртеся професіоналу зі стажем понад 10 років! Ставка та терміни актуальні!
Буду радий співпраці!
Досвід комерційної розробки інтернет-магазинів на CMS, бізнес-порталів та корпоративних сайтів - 11 років!
+CMS: WordPress(+Woocommerce)PrestaShop/Opencart/Joomla/Bitrix/MODX/DLE/Shopify
php/html/css/js/Mysql, PhotoShop/Figma
Приклади робіт (з нуля під ключ):
https://wildandorganic.com/
https://cryptosignals.org/
https://ecnbot.com
… https://locs-ua.com/
https://www.grower.com.ua/
https://www.alternativemedicine.com.ua/
https://silkkiss.ua/
https://nordtrade.online/
https://v12coffee.com.ua/franchise/
https://smrtalgo.com/
https://sengero.no/
https://beautybysim.no/
https://sonatagalleri.com/
https://www.solmy-realestate.com/
https://www.emmanuel.com.ua/
https://www.onsitecomputersinc.com/
https://express-tehbud.com/
https://korostenporcelain.com.ua/
https://sladok.com.ua/
https://pricemds.com/
https://picupmedia.com/
https://www.serasar.com/

Показати оригінал

Перекласти

Привіт!
Зацікавився вашою пропозицією щодо перевірки концепції вбудовування 3D-конфігуратора Unity в Shopify. Так, це можливо швидко і просто на Shopify (тема на Liquid) додати iframe в секцію зображень продукту через редактор теми (theme.liquid або product.liquid), з адаптивним стилізуванням (CSS для responsive), щоб воно замінювало або доповнювало фото.
Пишіть, обговоримо деталі!

Показати оригінал

Перекласти

Доброго дня,

Я знайшов два варіанти реалізації вашого завдання:
Вставити HTML в опис продукту з використанням і, що виглядатиме негарно.

Динамічно замінювати зображення товару на, що відображатиметься, як у прикладі: https://www.skepra.com/examples/Site19/Site19 (сирий варіант, але повністю готовий до злиття з іншими продуктами і буде відображатися правильно), і повністю відповідати вашим вимогам.

Я готовий продовжити розробку, покращувати рішення і впроваджувати всі інтеграції.

… З повагою,
Skepra

Показати оригінал

Перекласти

Привіт!

У мене більше трьох років досвіду верстки та frontend - розробки, а також 4 роки розробки на shopify

Можу вставити. Буде ось так https://prnt.sc/uCxc5CGxv8I4. Але спочатку буде показуватися "instashop". https://prnt.sc/2N6X8iwsBX7E

Моє портфоліо: https://romkagall.github.io/portfolio/

Показати оригінал

Перекласти

Вітаю. Можу виконати. Можна вставити як через iframe так і вмонтувати в код сторінки напряму через canvas будете додавати лише посилання на сорси моделей для кожного товару в 2 метаполя.

Зроблю PoC акуратно і швидко: вбудую ваш Unity-3D конфігуратор в картку товару Shopify через iframe з lazy-load і кнопкою «Дивитися в 3D», щоб не завантажувати сторінку. Адаптивно для мобайла, в зоні фото (як в ТЗ) або в модальному вікні — без інтеграції з кошиком.

Для масштабування додам product metafield під посилання на 3D + коротку інструкцію менеджеру. Швидкість збережу (defer, sandbox, правильне співвідношення сторін). Тест — на вашому демо-магазині.

Показати оригінал

Перекласти

Так, це повністю здійсненно. На поточному етапі для перевірки концепції ми можемо просто вбудувати ваш Unity 3D-конфігуратор на сторінку продукту в Shopify через iframe, прямо в область фотографій. Це дозволить швидко показати роботу моделі без інтеграцій з кошиком або іншими системами.
Для PoC я зможу додати акуратне оформлення, адаптацію під мобільні пристрої і за необхідності кнопку “Переглянути в 3D”, щоб не навантажувати сторінку. Весь процес реалізуємо швидко і без костилів.
Після успішної перевірки концепції буде легко масштабувати рішення і впроваджувати його для інших товарів і компаній.
Готовий обговорити деталі і підготувати тестову версію для вашого Shopify-продукту.

Показати оригінал

Перекласти