Glopzi
Sign up

Integration

Shopify.

One snippet in your theme’s theme.liquid covers every page on your store. Animations apply to product pages, collection pages, the homepage, custom landing pages, everything.

The install

From your Glopzi dashboard, copy the install snippet:

HTML
<script
  src="https://cdn.glopzi.com/modules/glopzi.js"
  data-glopzi-key="YOUR_API_KEY"
  async
></script>

Make sure your store’s domain (example.myshopify.comor your custom domain) is bound to your Glopzi license. Add it from the dashboard if you haven’t already. See Adding and managing domains.

Where to paste it in theme.liquid

  1. From your Shopify admin, go to Online Store → Themes.
  2. On your active theme, click Actions → Edit code.
  3. In the layout folder, open theme.liquid.
  4. Find the </head> tag. Paste the Glopzi snippet immediately above it.
  5. Save.

That single change covers every page on your store because every Shopify page renders through theme.liquid.

Tip

On themes built with the Shopify 2.0 framework (Dawn and similar), the snippet placement is the same. The 2.0 sections rendering doesn’t interfere with Glopzi.

Open the editor on a product or page

Append ?glopzi-edit=1 to any storefront URL:

https://example.myshopify.com/products/wide-leg-trouser?glopzi-edit=1

You’re redirected to the editor at studio.glopzi.com, with that exact product page loaded inside the frame. Pick elements, animate, save.

The editor reaches your storefront over HTTP, so the page must be publicly accessible. Password-protected themes need to be unlocked first (or configured to allow your IP). For staging on a private theme, publish it temporarily, edit, then revert.

Shopify-specific notes

  • Theme updates don’t lose your snippet because the snippet is in your theme’s edited code, not in a setting that resets. If you switch themes entirely, paste the snippet into the new theme’s theme.liquid.
  • Page templates with custom layouts (sections like page.contact.json or custom Liquid templates) inherit theme.liquid by default, so they get the snippet automatically.
  • App-injected scripts(other Shopify apps that add motion or scroll behavior) generally don’t conflict with Glopzi. We animate specific elements you pick; we don’t touch their elements.
  • The Online Store editor(Shopify’s own theme editor) shows your storefront with the Glopzi runtime active. You may see your animations running in the preview. To suppress them while you arrange sections, the Glopzi runtime detects the Shopify editor frame and stays passive.

Next steps