Adding Stylor to your store

Stylor runs on your storefront through embed scripts. You paste one snippet into your theme, and it adds the stylist to every page. You don't need to write any code against the API.

Both scripts are served from https://stylor.ai and are configured the same way, with a window.StylorConfig object.

Get your snippet

The quickest way is to copy it from the dashboard. Open Themes, pick a theme, and choose Embed code. The snippet already holds your public key and the theme you picked. You can also ask Stylor Agent on the dashboard home for the embed code.

A shopping assistant snippet looks like this:

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…",
    "themeId": "…"
  }, window.StylorConfig || {});
</script>
<script>
  /* Stylor page bridge: runs the widget's code in your store's page context. */
  (() => { /* … */ })();
</script>
<script src="https://stylor.ai/script/agent/v2/widget.js" defer></script>

It has three parts:

1. The configuration. window.StylorConfig holds your options. Object.assign(…, window.StylorConfig || {}) keeps any values already set on the page, so you can set options in an earlier script and they win. See the options.
2. The page bridge. This lets the assistant read the shopper's cart and the product they are viewing, and change the cart when they ask. Keep it, and keep it before the widget script. Without it the assistant still chats, but it has no cart and can't see the page.
3. The script. It loads with defer and waits for your page to finish loading before it loads the chat itself, so it never slows your storefront down.

Install on Shopify

1. In your Shopify admin, go to Online Store → Themes. On your live theme, choose ⋯ → Edit code.
2. Open layout/theme.liquid.
3. Paste the snippet just before the closing </body> tag.
4. Save, then open your store. The launcher appears at the bottom right once the page has loaded.

On any other platform, paste the snippet into the HTML of every page, just before </body>. The cart features need a Shopify storefront. Everything else works anywhere.

The public key

publicKey must be your organization's public key (sgpt-pk-…), never the private one. A public key is safe to put in a page: it can only call what a storefront needs. See Authentication.

If you limited the key's allowed websites under API keys, the widget only loads on those websites. On any other site its requests are refused and nothing shows. Add your storefront's domain, and any preview or staging domains you test on.

Which catalogue it uses

With no datasetIds, the assistant works out which store it is on. It matches the page's address, then the Shopify shop domain, against your datasets' store connections, and searches that store's catalogue. This is right for most stores, including an organization with several stores that share one snippet.

Set datasetIds to choose the catalogue yourself. See the options.

Content Security Policy

Most stores have no Content Security Policy and need nothing here. If yours sets one, allow:

"See it on you" uses the camera inside the chat panel. A Permissions-Policy: camera=() header on your store blocks the camera, but shoppers can still upload a photo.