# Shopify

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

## 嵌入选项

| 方法 | 类型 | 状态 |
| ------ | ---- | ------ |
| **Custom Liquid** | 悬浮游玩按钮 | 现已可用 |
| **Simple iframe** | 页面内联游戏 | 现已可用 — 见[嵌入网站](/zh/sharing/embed) |
| **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 会自动设置：

```liquid
{%- 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 嵌入](/zh/sharing/embed) |

---

## 页面或产品上的 Simple iframe

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

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

尺寸与响应式布局提示见[嵌入网站](/zh/sharing/embed)。

---

## 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`。

---

## 下一步

- [悬浮游玩按钮概览](/zh/sharing/floating-play-button)
- [嵌入网站](/zh/sharing/embed)
- [追踪分析](/zh/sharing/analytics)