AI widget

Add the Product Genius AI Widget block to a Liquid theme, and what it does on the page.

Product Genius AI Widget is the app block that puts the Product Genius shopping experience on a page. It has no settings of its own: everything about how it looks and behaves is part of your store's Product Genius configuration, so it can be changed without you touching the theme again.

Add it to your theme

Open the theme editor

In your Shopify admin, go to Online Store → Themes, then click Customize on the theme you want to change.

Go to the page you want it on

Use the page picker at the top of the editor to open the template you are placing the widget on — a product page, a collection page, or a specific page such as a landing page.

Add the app block

Find the section you want the widget inside, click Add block within that section, and choose Product Genius AI Widget under the Apps group.

If no section offers it, the section (or the theme) does not accept app blocks — try another section, or see Manual placement.

Position it and save

Drag the block up or down within the section to control where it lands relative to the section's other blocks, then click Save. Preview the storefront page to confirm it renders where you expect.

Where to put it

The block renders inline, in the flow of the section it belongs to, and it takes the width its parent gives it. That leads to a few practical rules:

Prefer a wide, low-constraint section. A full-width section — or a custom section you add for the purpose — gives the widget room. Dropping it into a narrow sidebar or a multi-column layout cramps it.
Put it where a shopper is already deciding. On product pages, below the product details is the usual choice; on a landing or collection page, near the top, where it can lead the browse rather than follow it.
Add it once per page. The block emits a mount element with a fixed id, so a second copy on the same page produces a duplicate id and only one of them can receive the widget.
The theme editor preview is not the real thing. The widget loads from the Product Genius service at runtime, so judge placement on the live (or preview) storefront URL rather than inside the editor canvas.

What it does technically

For theme developers

The block's entire body is two elements:

<div id="pg-app-wrapper"></div>
<script id="pg-app-fetch" src="https://tags.productgenius.io/tag.js?shop={{ shop.permanent_domain }}"></script>

#pg-app-wrapper is the mount node. It is empty in the server-rendered HTML; the Product Genius bundle renders the widget into it on the client. Its id is load-bearing — the same id is the default mountId in the React package, which is how one bundle serves both storefront types.
tag.js is the loader. It is a small bootstrap script that reads the shop parameter, fetches your store's Product Genius configuration, and then loads the widget bundle. It sets its own element id as a once-only guard, so it initialises once per page even if the script tag is encountered more than once.
shop={{ shop.permanent_domain }} identifies the store. permanent_domain is the store's *.myshopify.com domain, not the customer-facing custom domain, so the identifier stays stable even if you change or add storefront domains.

The block declares "settings": [] and target: "section", so it exposes nothing in the theme editor beyond its own presence, and it can only be placed inside sections that accept app blocks.

If nothing appears

Work through these in order:

Is the block actually on the page? Re-open the theme editor and confirm the block is present in the section you expect, on the template you are viewing, and that you clicked Save.
Is your store configured? The loader fetches a configuration for your .myshopify.com domain. If the store has not been set up on the Product Genius side, the loader runs and nothing renders. Contact your Product Genius representative.
Is something blocking the script? Content blockers, tracking-protection extensions, and aggressive script-optimisation apps can prevent tags.productgenius.io from loading. Test in a clean browser profile with no extensions. If your storefront enforces a custom content security policy, the script host has to be allowed — ask your Product Genius contact for the current host list.
Is the widget in a hidden container? A collapsed accordion, a hidden tab panel, or a section with display: none will render the mount node with no visible size. Move the block to a plainly visible section to rule this out.

On this page