Shopping assistant

/script/agent/v2/widget.js adds the AI stylist to your store. It puts a launcher button at the bottom right of every page, and the button opens the chat. The chat is a panel beside the page on desktop and a drawer from the bottom on a phone.

html

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…"
  }, window.StylorConfig || {});
</script>
<!-- the page bridge from your snippet goes here -->
<script src="https://stylor.ai/script/agent/v2/widget.js" defer></script>

Copy the full snippet, page bridge included, from the dashboard. See Adding Stylor to your store.

Options

Set these on window.StylorConfig.

Option	Type	Default	What it does
`publicKey`	string	Required	Your organization's public key (`sgpt-pk-…`). Without it nothing loads, and the console says `[Stylor] StylorConfig.publicKey is required.`
`themeId`	string	The theme changed most recently	Which saved theme the assistant wears. Use `"none"` for Stylor's default look. See Themes and appearance.
`datasetIds`	string[] or comma-separated string	Worked out from the page	The datasets the assistant searches. Set, it searches exactly these (drafts included, archived left out) on every page. Unset, it matches the store the shopper is on (see below).
`thinking`	string	Your organization's setting	How much the assistant reasons before it replies (`"none"`, `"low"`, `"medium"`, `"high"`, where the model supports them). It overrides the setting under Organization settings → Advanced: AI models for this embed. More thinking answers more carefully, but every reply starts later. An unsupported value makes the chat fail, so leave it unset unless you are testing.
`matchStoreFonts`	boolean	`true`	Whether the assistant uses your store's main text font. Set `false` to keep Stylor's own font. See Fonts.
`baseUrl`	string	`https://stylor.ai`	The Stylor origin. Leave it unset on your storefront.

Example: one catalogue on every page

html

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…",
    "themeId": "4f1c…",
    "datasetIds": ["8b2e…"]
  }, window.StylorConfig || {});
</script>

Setting options from your theme

The snippet keeps values that are already on the page, so you can set an option in an earlier script, for example from Liquid:

liquid

<script>
  window.StylorConfig = { "themeId": {{ settings.stylor_theme | json }} };
</script>
<!-- then the snippet -->

The merge is shallow, and the first value set wins. If you paste a second snippet, it can't change a themeId the first one already set.

What it reads from your page

You don't configure these. The assistant reads them itself:

From	Used for
The page's address and `Shopify.shop`	Which of your stores the shopper is on, when `datasetIds` is not set.
`Shopify.country`	Prices in the shopper's country. See Prices in the shopper's country.
Whether the page is a product page	On a product page, the assistant knows the product the shopper is looking at, through the page bridge.
Your store's fonts	The chat uses the font most of your page's text is set in, whatever the theme. Not read when `matchStoreFonts` is `false`.
Shopify's customer privacy consent	A visitor id for analytics is kept only when the shopper has allowed analytics.

When it appears

The script runs once the page's HTML has been read. It checks with Stylor that the assistant can run here, and then shows the launcher.
The chat itself loads only after your page has finished loading, or straight away if the shopper clicks the launcher first. It never delays your storefront.

The launcher does not appear when:

no active dataset is in scope (connect a store, or check datasetIds);
your plan doesn't include the assistant, or this period's allowance is used up;
the key is wrong, deactivated, or not allowed on this website.

The first two are the normal "not ready" answer and are silent by design. See Troubleshooting to find out which one it is.

The page bridge

The bridge is the second <script> in your snippet. The chat runs in an iframe on stylor.ai, so on its own it can't touch your page. The bridge listens for requests from that iframe only, checked by origin, and runs them in your page:

reading the cart (/cart.js);
adding, changing and removing cart lines, when the shopper asks;
reading the product on a product page (/products/<handle>.js).

The bridge works with Shopify's cart. Without it (an old snippet, or one with the bridge removed), the assistant still chats and styles, but it can't see the cart or the page, and it never offers to add to the cart. Nothing errors.

See it on you

Shoppers can add a photo of themselves, by uploading one or taking one with the camera, and see a look worn by them. The photo stays in their own browser and is never stored by Stylor.

You can turn it off for one store in that dataset's Styling tab, or for every store under Organization settings → See it on you. It shows only where both allow it.

Analytics

The assistant records its own usage (conversations, products shown, add-to-carts) in your Analytics. On your storefront it keeps a session id in sessionStorage, and a visitor id in localStorage for 13 months only when the shopper has allowed analytics. All of these are keyed sgpt_*.