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
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

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

Step 2 — Add to your theme

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

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

{%- 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 in a page’s HTML editor instead

Simple iframe on a Page or Product

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

In DailyPlay, choose Simple iframe in the embed panel
Copy the iframe code
In Shopify admin, edit the page or product
Click Show HTML in the rich text editor
Paste the iframe code
Save

See Embed on Website 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:

Install the DailyPlay app from the Shopify App Store
Go to Online Store → Themes → Customize
Open App embeds
Enable DailyPlay Floating Widget
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.