# Shopify

Idagdag ang DailyPlay sa iyong Shopify store para makapaglaro ang mga shopper nang hindi umaalis sa iyong storefront.

## Mga Opsyon sa Pag-embed

| Method | Uri | Status |
| ------ | ---- | ------ |
| **Custom Liquid** | Floating Play button | Available now |
| **Simple iframe** | Inline game sa isang page | Available now — tingnan ang [I-embed sa Website](/fil/sharing/embed) |
| **Shopify app** | App embed sa theme customizer | Coming soon |

---

## Floating Play Button (Custom Liquid)

Ang inirerekomendang approach para sa Shopify. Lumalabas ang floating **Play** button sa bawat page kung saan mo idinagdag ang snippet; ang pag-click dito ay bumubukas ng laro sa full-screen overlay.

### Hakbang 1 — Kunin ang iyong embed code

1. Sa DailyPlay, buksan ang iyong published game
2. I-click ang **Share/Embed** → **Embed**
3. Piliin ang **Floating Play button**
4. Piliin ang **Shopify**
5. Siguraduhing naka-select ang **Custom HTML** (hindi pa available ang app/plugin option)
6. I-customize ang button text at color kung kailangan
7. Kopyahin ang snippet

### Hakbang 2 — Idagdag sa iyong theme

1. Sa Shopify admin, pumunta sa **Online Store** → **Themes**
2. I-click ang **Customize** sa iyong live o draft theme
3. Mag-navigate sa template kung saan mo gusto ang laro (halimbawa, **Home page** para sa site-wide visibility, o specific page template)
4. I-click ang **Add section** → **Custom Liquid**
5. I-paste ang kinopyang Liquid snippet
6. I-click ang **Save**

Gumagamit ang generated code ng Shopify Liquid variables para awtomatikong maitakda ang store origin:

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

Hindi mo kailangang manwal na palitan ang origin URL — pinupunan ito ng Shopify sa render time.

### Ano ang kasama sa snippet

- Isang `<link>` sa floating widget CSS ng DailyPlay
- Deferred load ng `dailyplay-widget.js`
- Ang floating Play button (bottom-right)
- Hidden modal na may game iframe na tumuturo sa `/embed/[game-id]/widget?origin=...`

---

## Site-Wide vs Single Page

| Layunin | Saan idadagdag ang Custom Liquid |
| ---- | -------------------------- |
| Button sa bawat page | Theme **footer** group o section na kasama sa default layout |
| Button sa isang page lang | Template ng page na iyon sa theme editor |
| Inline game sa isang page | Gamitin ang [iframe embed](/fil/sharing/embed) sa HTML editor ng page |

---

## Simple iframe sa Page o Product

Para sa larong naka-embed nang direkta sa page content (hindi floating):

1. Sa DailyPlay, piliin ang **Simple iframe** sa embed panel
2. Kopyahin ang iframe code
3. Sa Shopify admin, i-edit ang page o product
4. I-click ang **Show HTML** sa rich text editor
5. I-paste ang iframe code
6. I-save

Tingnan ang [I-embed sa Website](/fil/sharing/embed) para sa sizing at responsive layout tips.

---

## Shopify App (Coming Soon)

May native DailyPlay Shopify app na may **App embed** block na kasalukuyang ginagawa. Kapag available, ikaw ay:

1. Mag-i-install ng DailyPlay app mula sa Shopify App Store
2. Pupunta sa **Online Store** → **Themes** → **Customize**
3. Bubuksan ang **App embeds**
4. Mag-e-enable ng **DailyPlay Floating Widget**
5. Magko-configure ng game ID, button label, at color sa embed settings

Hanggang ma-publish ang app, gamitin ang **Custom Liquid** gaya ng inilarawan sa itaas.

---

## Troubleshooting

### Lumalabas ang Liquid snippet bilang plain text

- Kumpirmahin na nagdagdag ka ng **Custom Liquid** section, hindi regular na text o HTML block
- Ang Custom Liquid sections ay tumatanggap lang ng Liquid + HTML — huwag balutin ang snippet sa karagdagang `<script>` tags mula sa iyong theme

### Naglo-load ang laro pero mali ang domain sa analytics

- Gumagamit ang Liquid template ng `request.origin` — siguraduhing tumutugma ang storefront URL sa Shopify settings sa iyong public domain
- Kung gumagamit ng custom domain, beripikahin na naka-set ito bilang primary domain

### Nakatago ang button sa likod ng theme elements

- Gumagamit ang widget ng mataas na `z-index` (2147483000). Kung nakatago pa rin, suriin ang theme elements na may mas mataas na stacking contexts (sticky headers, chat widgets)

### Content Security Policy

Karaniwang pinapayagan ng Shopify Online Store 2.0 themes ang third-party scripts sa Custom Liquid. Kung may CSP ang iyong theme o app, idagdag ang `https://app.dailyplay.ai` sa `script-src`, `style-src`, at `frame-src`.

---

## Mga Susunod na Hakbang

- [Pangkalahatang-ideya ng Floating Play Button](/fil/sharing/floating-play-button)
- [I-embed sa Website](/fil/sharing/embed)
- [Subaybayan ang Analytics](/fil/sharing/analytics)