Guide mode (experimental)
Guide mode is an experimental style template for the ShopGuide chat. Instead of a bubble in the corner, the chat hangs beside the part of the page the shopper is reading and can point at things: the size chart, the reviews, the shipping section.
Turning it on
Open the Customize page in the ShopGuide app and choose Guide (experimental) from the style templates (its card reads "Points at the page"). Save, and it applies to your storefront.
To try it without changing your settings, add ?sg_guide=1 to any storefront URL. It stays on for that browser tab's session, and ?sg_guide=0 turns it off again.
What shoppers see
- Before they ask anything, there is no bubble in the corner. A small card waits next to the section the shopper is reading, with one offer that fits it, such as a sizing question near a size chart or "Have a question that's not in this list? Just ask." beside an FAQ. This part runs in the browser and makes no AI call until the shopper clicks.
- After they click, the chat opens beside that section. When the AI answers, a cursor flies to the part of the page it is talking about, highlights it, and scrolls it into view.
- On phones, there is no cursor. The chat docks to the bottom edge of the screen and the section it is talking about gets a highlight ring.
- Putting it away: a "–" on the card minimises the guide into your store's own chat bubble. Tapping the bubble brings it back, and the guide follows the page again for the rest of the visit.
- It waits its turn: the card stays hidden while a cookie banner or popup is open, and comes back when that is dismissed.
Guide window size
When you pick the Guide template, a Guide window size (desktop) option appears: Compact (360 px wide), Standard (420 px wide) (the default), or Large (500 px wide). It sets how big the floating chat is when a shopper opens it. On phones it always docks to the bottom edge.
Making your pages easy to point at
The guide works from your page's headings, so there is nothing to configure:
- Every visible
<h2>heading in the main content becomes a place the guide can point at, up to 14 per page. If a page has fewer than three<h2>headings,<h3>headings are used. - Headings need to be 3 to 60 characters long and unique on the page.
- Wording helps the guide make a better offer. Headings such as "FAQ", "Pricing", "Case studies", "Integrations", or "Guides" get an offer tailored to that kind of section; anything else gets a general one.
Good to know
- It is experimental. Try it on a preview first, and expect it to change.
- The chat window is lifted out of its theme section while Guide mode is on, so Custom CSS that assumes the chat sits inside a section may not apply. See Advanced chat styling.