Shopify

将 DailyPlay 添加到 Shopify 商店，让购物者无需离开店面即可游玩游戏。

嵌入选项

方法	类型	状态
Custom Liquid	悬浮游玩按钮	现已可用
Simple iframe	页面内联游戏	现已可用 — 见嵌入网站
Shopify app	主题定制器中的 App embed	即将推出

---

悬浮游玩按钮（Custom Liquid）

Shopify 的推荐方式。在添加代码片段的每个页面上出现悬浮 Play 按钮；点击后在全屏浮层中打开游戏。

第 1 步 — 获取嵌入代码

1. 在 DailyPlay 中打开已发布的游戏
2. 点击 Share/Embed → Embed
3. 选择 Floating Play button
4. 选择 Shopify
5. 确保选择了 Custom HTML（应用/插件选项尚不可用）
6. 按需定制按钮文案与颜色
7. 复制代码片段

第 2 步 — 添加到主题

1. 在 Shopify 管理后台，前往 Online Store → Themes
2. 在线上或草稿主题上点击 Customize
3. 导航到您想要游戏的模板（例如全站可见的 Home page，或特定页面模板）
4. 点击 Add section → Custom Liquid
5. 粘贴复制的 Liquid 代码片段
6. 点击 Save

生成的代码使用 Shopify Liquid 变量，因此商店 origin 会自动设置：

{%- assign dp_origin = request.origin | default: shop.url | url_param_escape -%}

您无需手动替换 origin URL — Shopify 在渲染时会填入。

代码片段包含的内容

• 指向 DailyPlay 悬浮 widget CSS 的 <link>
• dailyplay-widget.js 的延迟加载
• 悬浮游玩按钮（右下角）
• 指向 /embed/[game-id]/widget?origin=... 的隐藏游戏 iframe 模态

---

全站与单页

目标	在何处添加 Custom Liquid
每个页面都有按钮	主题 footer 组或默认布局中包含的区块
仅在一个页面有按钮	主题编辑器中该页面的模板
页面内联游戏	改用页面 HTML 编辑器中的 iframe 嵌入

---

页面或产品上的 Simple iframe

要在页面内容中直接嵌入游戏（非悬浮）：

1. 在 DailyPlay 的嵌入面板中选择 Simple iframe
2. 复制 iframe 代码
3. 在 Shopify 管理后台编辑页面或产品
4. 在富文本编辑器中点击 Show HTML
5. 粘贴 iframe 代码
6. 保存

尺寸与响应式布局提示见嵌入网站。

---

Shopify App（即将推出）

带有 App embed 区块的原生 DailyPlay Shopify 应用正在开发中。可用后，您将：

1. 从 Shopify App Store 安装 DailyPlay 应用
2. 前往 Online Store → Themes → Customize
3. 打开 App embeds
4. 启用 DailyPlay Floating Widget
5. 在嵌入设置中配置游戏 ID、按钮标签与颜色

在应用发布前，请按上文说明使用 Custom Liquid。

---

故障排除

Liquid 代码片段显示为纯文本

• 确认您添加的是 Custom Liquid 区块，而非普通文本或 HTML 区块
• Custom Liquid 区块仅接受 Liquid + HTML — 不要用主题中的额外 <script> 标签包裹代码片段

游戏能加载但分析显示错误域名

• Liquid 模板使用 request.origin — 确保 Shopify 设置中的店面 URL 与您的公开域名匹配
• 若使用自定义域名，请确认已设为主要域名

按钮被主题元素遮挡

• Widget 使用较高的 z-index（2147483000）。若仍被遮挡，请检查是否有更高堆叠上下文的主题元素（粘性页眉、聊天小部件）

Content Security Policy

Shopify Online Store 2.0 主题通常允许 Custom Liquid 中的第三方脚本。若主题或应用强制 CSP，请将 https://app.dailyplay.ai 添加到 script-src、style-src 与 frame-src。

---

下一步

• 悬浮游玩按钮概览
• 嵌入网站
• 追踪分析