# Shopify

Add DailyPlay to your Shopify store so shoppers can play games without leaving your storefront.

## Embed Options

| Method | Type | Status |
| ------ | ---- | ------ |
| **Custom Liquid** | Floating Play button | Available now |
| **Simple iframe** | Inline game on a page | Available now — see [Embed on Website](/sharing/embed) |
| **Shopify app** | App embed in theme customizer | Coming soon |

---

## Floating Play Button (Custom Liquid)

The recommended approach for Shopify. A floating **Play** button appears on every page where you add the snippet; clicking it opens the game in a full-screen overlay.

### Step 1 — Get your embed code

1. In DailyPlay, open your published game
2. Click **Share/Embed** → **Embed**
3. Select **Floating Play button**
4. Choose **Shopify**
5. Ensure **Custom HTML** is selected (the app/plugin option is not yet available)
6. Customize button text and color if needed
7. Copy the snippet

### Step 2 — Add to your theme

1. In Shopify admin, go to **Online Store** → **Themes**
2. Click **Customize** on your live or draft theme
3. Navigate to the template where you want the game (for example, **Home page** for site-wide visibility, or a specific page template)
4. Click **Add section** → **Custom Liquid**
5. Paste the copied Liquid snippet
6. Click **Save**

The generated code uses Shopify Liquid variables so your store origin is set automatically:

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

You do not need to manually replace the origin URL — Shopify fills this in at render time.

### What the snippet includes

- A `<link>` to DailyPlay's floating widget CSS
- A deferred load of `dailyplay-widget.js`
- The floating Play button (bottom-right)
- A hidden modal with the game iframe pointing to `/embed/[game-id]/widget?origin=...`

---

## Site-Wide vs Single Page

| Goal | Where to add Custom Liquid |
| ---- | -------------------------- |
| Button on every page | Theme **footer** group or a section included in the default layout |
| Button on one page only | That page's template in the theme editor |
| Game inline on a page | Use the [iframe embed](/sharing/embed) in a page's HTML editor instead |

---

## Simple iframe on a Page or Product

For a game embedded directly in page content (not floating):

1. In DailyPlay, choose **Simple iframe** in the embed panel
2. Copy the iframe code
3. In Shopify admin, edit the page or product
4. Click **Show HTML** in the rich text editor
5. Paste the iframe code
6. Save

See [Embed on Website](/sharing/embed) for sizing and responsive layout tips.

---

## Shopify App (Coming Soon)

A native DailyPlay Shopify app with an **App embed** block is in development. When available, you will:

1. Install the DailyPlay app from the Shopify App Store
2. Go to **Online Store** → **Themes** → **Customize**
3. Open **App embeds**
4. Enable **DailyPlay Floating Widget**
5. Configure game ID, button label, and color in the embed settings

Until the app is published, use **Custom Liquid** as described above.

---

## Troubleshooting

### Liquid snippet shows as plain text

- Confirm you added a **Custom Liquid** section, not a regular text or HTML block
- Custom Liquid sections only accept Liquid + HTML — do not wrap the snippet in extra `<script>` tags from your theme

### Game loads but analytics show wrong domain

- The Liquid template uses `request.origin` — ensure your storefront URL in Shopify settings matches your public domain
- If using a custom domain, verify it is set as the primary domain

### Button hidden behind theme elements

- The widget uses a high `z-index` (2147483000). If it is still obscured, check for theme elements with higher stacking contexts (sticky headers, chat widgets)

### Content Security Policy

Shopify Online Store 2.0 themes generally allow third-party scripts in Custom Liquid. If your theme or an app enforces CSP, add `https://app.dailyplay.ai` to `script-src`, `style-src`, and `frame-src`.

---

## Next Steps

- [Floating Play Button overview](/sharing/floating-play-button)
- [Embed on Website](/sharing/embed)
- [Track Analytics](/sharing/analytics)