Шаг 1: Получите ключ виджета Photta
Войдите в панель управления Photta Business по адресу business.photta.app. Перейдите в Settings → API Keys и найдите ваш публичный ключ (publishable key) — он начинается с pk_live_ и выглядит как pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Нажмите на иконку копирования рядом с ключом. Это единственные учетные данные, которые вам понадобятся для интеграции с Shopify; никогда не вставляйте ваш секретный ключ sk_live_ во фронтенд-код.
Если у вас еще нет аккаунта, нажмите «Начать бесплатный пробный период» на странице Photta Business. Пробный период дает вам 50 бесплатных примерок без необходимости привязки кредитной карты. Ваш ключ pk_live_ станет доступен сразу после подтверждения адреса электронной почты и регистрации домена вашего магазина в разделе Settings → Allowed Domains.
Шаг 2: Откройте код темы Shopify
В панели администратора Shopify перейдите в Online Store → Themes. Рядом с вашей активной темой нажмите на меню с тремя точками и выберите Edit code. Редактор кода откроет дерево файлов слева. Разверните папку 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.
Нажмите Save в правом верхнем углу редактора кода. Shopify сохранит файл и покажет зеленое уведомление о подтверждении. Вам не нужно публиковать новую версию темы или делать что-то еще — изменения вступят в силу в вашей активной теме в тот момент, когда вы нажмете Save.
Шаг 4: Проверьте правильность загрузки виджета
Откройте любую страницу товара на вашей витрине в новой вкладке браузера (используйте режим инкогнито, чтобы избежать кэширования для авторизованных пользователей). Прокрутите вниз до раздела товара — вы должны увидеть кнопку «Примерить» рядом с кнопкой «Добавить в корзину». Нажмите ее, загрузите тестовое фото и убедитесь, что результат примерки отображается. Если кнопка появилась, установка завершена.
Если кнопка не появляется, откройте консоль разработчика в браузере (F12 → вкладка Console) и проверьте наличие сообщений об ошибках от photta или sdk.js. Самая распространенная проблема — несоответствие домена: домен вашего магазина должен быть указан в Settings → Allowed Domains в панели управления Business Dashboard. Добавьте его туда, подождите 30 секунд и обновите страницу товара.
Шаг 5: Настройте цвета виджета под ваш бренд
По умолчанию виджет использует нейтральную темную палитру Photta. Чтобы соответствовать вашему бренду, добавьте data-атрибуты в тот же тег скрипта: 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» через Business Dashboard в разделе Customize → Branding. Изменения применяются в реальном времени после сохранения — повторное развертывание или обновление виджета не требуется.