Skip to main content
TruGen agents drop into Shopify storefronts via the standard iframe embed. Ideal for guided shopping, size/fit consultation, or post-purchase support.

​
Prerequisites

  • A TruGen agent with an agent_id: see the quickstart
  • Access to your Shopify admin with theme edit permissions
1

Open the theme customizer

In your Shopify admin, go to Online Store → Themes → Customize on your active theme.
2

Add a Custom Liquid section

On the page where you want the agent to appear (Home, Product, or Custom page), click Add section and choose Custom Liquid.
3

Paste the iframe

Replace YOUR_AGENT_ID with your agent ID. Shopify’s Liquid variables (customer.first_name, customer.id) auto-inject the shopper’s identity for personalization.
4

Save and preview

Save the section. Preview the page in an incognito window to test as a real shopper.

​
Add via theme code edit (advanced)

For sitewide floating widgets, edit the theme’s theme.liquid:
1

Open theme code

Go to Online Store → Themes → Actions → Edit code.
2

Edit theme.liquid

Open layout/theme.liquid and add the iframe before the closing </body> tag:

​
Domain allowlist

If your agent uses allowed_domains, add your Shopify domain, both your custom domain (e.g., mystore.com) and the default .myshopify.com domain, to the list.

​
Content Security Policy note

Shopify’s default CSP is permissive enough to load third-party iframes. If you’ve customized it via a checkout script or theme edit, ensure frame-src https://app.trugen.ai is included.

​
What’s next

iFrame reference

Every iframe parameter documented.

Prompting for e-commerce

Write a shopping-savvy system prompt.