Крок 1: Отримайте ключ віджета Photta
Увійдіть у панель керування Photta Business за адресою business.photta.app. Перейдіть до Налаштування → API-ключі та знайдіть свій публічний ключ — він починається з pk_live_ і виглядає як pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Натисніть іконку копіювання поруч із ключем. Це єдині дані, які вам знадобляться для інтеграції Shopify; ніколи не вставляйте свій секретний ключ sk_live_ у код клієнтської частини.
Якщо у вас ще немає облікового запису, натисніть «Почати безкоштовну пробну версію» на сторінці Photta Business. Пробна версія надає 50 безкоштовних примірок без потреби вказувати кредитну картку. Ваш ключ pk_live_ стане доступним одразу після підтвердження електронної пошти та реєстрації домену вашого магазину в розділі Налаштування → Дозволені домени.
Крок 2: Відкрийте код теми Shopify
У панелі адміністратора Shopify перейдіть до Інтернет-магазин → Теми. Поруч із вашою активною темою натисніть меню з трьома крапками та виберіть «Редагувати код». Редактор коду відкриє дерево файлів зліва. Розгорніть папку Layout і натисніть на theme.liquid — це головний шаблон, який охоплює кожну сторінку вашого магазину.
Скористайтеся вбудованим пошуком браузера (Cmd+F або Ctrl+F) всередині редактора коду та знайдіть </body>. Ви маєте знайти рівно один збіг майже в самому низу файлу, прямо над </html>. Розмістіть курсор на рядку безпосередньо перед </body>. Усе, що ви вставите сюди, завантажуватиметься на кожній сторінці вашого магазину, що нам і потрібно.
Крок 3: Вставте фрагмент скрипту Photta
Вставте наступний фрагмент у рядок безпосередньо перед </body>, замінивши pk_live_... на ваш реальний ключ, скопійований на кроці 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Атрибут defer є важливим — він запобігає блокуванню рендерингу сторінки скриптом, водночас гарантуючи ініціалізацію віджета після готовності DOM.
Натисніть «Зберегти» у верхньому правому куті редактора коду. Shopify збереже файл і покаже зелене підтвердження. Не потрібно публікувати нову версію теми або робити щось інше — зміни вступають у силу в активній темі в момент натискання кнопки «Зберегти».
Крок 4: Перевірте, чи правильно завантажився віджет
Відкрийте будь-яку сторінку товару у вашому магазині в новій вкладці браузера (використовуйте режим інкогніто, щоб уникнути впливу кешу). Прокрутіть до розділу товару — ви маєте побачити кнопку «Приміряти» поруч із кнопкою «Додати в кошик». Натисніть її, завантажте тестове фото та підтвердьте появу результату примірки. Якщо ви бачите кнопку, встановлення завершено.
Якщо кнопка не з'являється, відкрийте консоль розробника браузера (F12 → вкладка Console) і перевірте наявність повідомлень про помилки від photta або sdk.js. Найпоширеніша проблема — невідповідність домену: домен вашого магазину має бути вказаний у розділі Налаштування → Дозволені домени в бізнес-панелі. Додайте його туди, зачекайте 30 секунд і перезавантажте сторінку товару.
Крок 5: Налаштуйте кольори віджета під ваш бренд
За замовчуванням віджет використовує нейтральну темну палітру Photta. Щоб відповідати вашому бренду, додайте атрибути даних до того ж тегу script: data-color-primary для кольору кнопки заклику до дії (HEX-значення, наприклад, #D4AF37) і data-color-surface для фону модального вікна. Приклад: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Після додавання цих атрибутів знову збережіть theme.liquid.
Для повного перевизначення на рівні CSS віджет Photta використовує власні властивості CSS у просторі імен --photta-*, на які ви можете впливати з базового CSS вашої теми. План Growth і вище також дозволяє приховати напис «Powered by Photta» через бізнес-панель у розділі Налаштувати → Брендинг. Зміни застосовуються в режимі реального часу після збереження — повторне розгортання або оновлення віджета не потрібне.