Skip to content
Public beta preview — you're seeing the sneak peek

Shopify — install the widget

read as .md

On Shopify the tag goes into the theme’s base layout, which renders every page of the store. The tag is the same on every platform — Install the widget has the general picture; this page has the exact place on Shopify.

The tag — put your app id in place of app_abc123
<!-- guuey widget. Add this site to the app's allowed domains or the embed is refused. -->
<script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>
  1. In your Shopify admin go to Online Store, and on your current theme open Edit code. Shopify's own advice first: duplicate your theme as a backup before editing code.
  2. Open layout/theme.liquid — the base of the theme, through which every template renders (it holds content_for_layout between <body> and </body>).
  3. Paste the tag just before </body> and save.
  • Shopify warns that code changes incompatible with a theme update are removed by that update — after updating your theme, check that the tag is still there.
  • Editing theme code sits outside Shopify's theme support; if you don't want to touch code, a Shopify Partner can place the tag for you.

Verified against the vendor's documentation on 2026-09-09: Edit theme code (Shopify Help Center) · Theme architecture — layouts (shopify.dev). Vendor interfaces change — if a step no longer matches what you see, the vendor's page above is the source of truth.

Allow your site’s origin (console → Embed → Allowed origins, or guuey apps update <appId> --domains <origin>; about 15 seconds to apply), add the CSP allowances if your site sets a policy, then verify with guuey apps check <appId> --origin <origin> — the steps are on Install the widget.

Paste into your coding agent
Install the Guuey chat widget on this Shopify site. Before changing anything,
read https://docs.guuey.com/embed/shopify.md and https://docs.guuey.com/install-widget.md
(the raw markdown of the two pages) and follow them exactly; do not invent options
or steps they do not contain.
1. Put this tag in layout/theme.liquid (the theme's base layout that renders every template), just before </body>, via Online Store → Themes → Edit code — after duplicating the theme as a backup, with my app id <appId> in place of app_abc123:
<script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>
Add nothing else to the tag — except your page's CSP nonce, if the site uses
nonces (step 3).
2. Tell me the exact origin(s) my pages are served from (scheme + host) so I can
add them to the app's allowed domains in the console (Embed → Allowed origins)
or with: guuey apps update <appId> --domains <origin>. Remind me that a bare
hostname covers the apex and every subdomain, while a scheme-prefixed origin is
an exact match, and that changes take about 15 seconds to apply.
3. If this site sets a Content-Security-Policy, add exactly these allowances and
nothing more. If the policy uses nonces (script-src 'nonce-...'): render the
site's per-request nonce on the widget tag the way its other script tags carry
it — that is what lets the loader run, and the loader puts the same nonce on the
one <style> it injects; then allow https://widget.guuey.com in frame-src and
connect-src. If the policy uses host allowlists: add https://widget.guuey.com to
script-src, frame-src and connect-src, and 'unsafe-inline' to style-src.
4. When I've saved the origin, verify with:
guuey apps check <appId> --origin <origin>
Stop and ask me before any step those two pages do not describe.