Shopify
Embedding Your Puzzle in a Shopify Store
You can embed a puzzle directly into your Shopify store—whether it's within a product description, a custom page, or a blog post. This allows you to add interactivity to your storefront and engage visitors without requiring them to navigate away from your store.
Shopify supports both iframe and JS embeds. You can choose the method that best fits your layout and technical needs.
Step-by-Step Instructions
Get the Embed Code from the Publish Page
- Go to the puzzle’s Publish page.
- Choose either the iframe embed code or the JS embed code, depending on your preference.
- Click Copy to copy the full code snippet.
Open Your Shopify Admin Dashboard
- Log in to your Shopify admin.
- Navigate to the section where you'd like to embed the puzzle. This could be:
- A product description (via Products > [Product Name])
- A custom page (via Online Store > Pages)
- A blog post (via Content > Blog Posts)
Switch to HTML Editing Mode
- In the content editor, locate the "Content" field (e.g. for product descriptions or page content).
- Click the
<>(Show HTML) button in the top right corner to switch to the HTML editor.
Paste the Embed Code
- Paste the iframe or JS embed code directly into the HTML editor at the location where you want the puzzle to appear.
- If you're using the JS embed, make sure you’re not placing it inside a
<script>-restricted environment (like Shopify checkout pages).
Save and Preview
- Click Save to update the content.
- Visit the page on your storefront to confirm that the puzzle is appearing and functioning as expected.
Notes
- If you’re using an iframe embed, you can customize the width and height directly within the HTML.
- Some Shopify themes may sanitize or block JS embeds. If your puzzle doesn’t appear, please try the iframe embed code instead.
Embedding puzzles in Shopify is a powerful way to add interactive experiences to your store—whether you're using them as educational content, promotional tools, or just to drive engagement.