ステップ 1: Photta ウィジェットキーを取得する
business.photta.app にある Photta Business ダッシュボードにログインします。「Settings（設定）」→「API Keys」に移動し、pk_live_ で始まる「publishable key（公開可能キー）」を探します（例：pk_live_xxxxxxxxxxxxxxxxxxxxxxxx）。キーの横にあるコピーアイコンをクリックします。Shopify との連携に必要な認証情報はこのキーのみです。sk_live_ で始まるシークレットキーをフロントエンドのコードに貼り付けないでください。
アカウントをまだお持ちでない場合は、Photta Business ページの「無料トライアルを開始」をクリックしてください。トライアルでは、クレジットカード登録なしで50回分の無料試着が提供されます。pk_live_ キーは、メールアドレスの認証を完了し、「Settings」→「Allowed Domains（許可ドメイン）」でストアのドメインを登録した後、すぐに利用可能になります。
ステップ 2: Shopify のテーマコードを開く
Shopify の管理画面で、「オンラインストア」→「テーマ」に移動します。現在のテーマの横にある3点リーダーをクリックし、「コードを編集」を選択します。コードエディタの左側にファイルツリーが表示されるので、「Layout」フォルダを展開し、すべてのページのベーステンプレートである「theme.liquid」をクリックします。
コードエディタ内でブラウザの検索機能（Cmd+F または Ctrl+F）を使用し、</body> を検索します。ファイルの最後の方、</html> の直前に1つだけ見つかるはずです。カーソルを </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 → コンソールタブ）を開き、photta または sdk.js からのエラーメッセージがないか確認してください。最も一般的な原因はドメインの不一致です。ビジネスダッシュボードの「Settings」→「Allowed Domains」にストアのドメインが登録されていることを確認してください。登録後、30秒ほど待ってから商品ページを再読み込みしてください。
ステップ 5: ブランドに合わせてウィジェットの色をカスタマイズする
デフォルトでは Photta のニュートラルなダークパレットが使用されます。ブランドに合わせるには、同じスクリプトタグにデータ属性を追加します。CTAボタンの色には data-color-primary（例：#D4AF37 などの16進数値）、モーダルの背景には 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 ウィジェットは --photta-* 名前空間のCSSカスタムプロパティを公開しており、テーマのベースCSSから制御可能です。また、Growthプラン以上では、ビジネスダッシュボードの「Customize」→「Branding」から「Powered by Photta」のバッジを非表示にすることもできます。変更は保存後すぐに適用され、再デプロイやウィジェットの更新は不要です。