步骤 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 用于您的 CTA 按钮颜色（十六进制值，例如 #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 组件在 --photta-* 命名空间下公开了 CSS 自定义属性，您可以从主题的基础 CSS 中针对这些属性进行设置。Growth 及以上方案还允许您通过商家控制面板的“自定义”→“品牌”隐藏“Powered by Photta”徽章。保存后更改会实时生效 — 无需重新部署或更新组件。