Themes and appearance

A theme is how the shopping assistant looks on your store: its launcher button and label, its colours, and how rounded its corners are. You make and edit themes in the dashboard under Themes. You can also ask Stylor Agent to draft one from your logo or a screenshot of your store.

Choosing a theme in the snippet

Set themeId on window.StylorConfig. There are three choices:

The embed code in the dashboard includes the id of the theme you chose. To make a snippet follow your latest edits instead, remove the themeId line.

If the id is unknown (a deleted theme, or one from another organization), the assistant quietly falls back to the theme changed most recently. Re-copy the snippet after deleting a theme you used.

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…",
    "themeId": "none"
  }, window.StylorConfig || {});
</script>

Fonts

The assistant uses your store's font, whatever the theme. It takes the font most of your page's readable text is set in, such as product names, prices and descriptions. It ignores headings, menus and large display text, so a decorative title font doesn't end up in a chat. The whole assistant, and its launcher button, use that one font, at the letter spacing your text uses. Web fonts load from your own domain or from Google Fonts.

To keep Stylor's own font instead, set matchStoreFonts to false. The chat then uses Manrope, and the launcher uses the shopper's system font.

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…",
    "matchStoreFonts": false
  }, window.StylorConfig || {});
</script>

The two scripts

Themes through the API

Themes are also available through the API, to list, create and edit them from your own tools. See the widget endpoints in the API reference.