Onboarding checklist for Shopify
One step per screen, until somebody is set up.
Putting it on Shopify
Your widget gives you one line of HTML. It goes in once for the whole site, not once per page, and it does nothing until the trigger you chose fires.
- Where the box is
- Online Store → Themes → Edit code, then open theme.liquid and paste just before the closing </body> tag.
- What catches people out
- Duplicate your theme before editing it if you have not edited theme code before. The snippet belongs in the theme, not in checkout — Shopify's checkout is its own hosted interface now, and no pasted script runs there on any plan.
<script src="https://kestero.com/widget.js" async data-api="https://kestero.com" data-key="ke_your_key" data-widget="your-widget-id"></script>
The key and the id above are placeholders — copy the real line from your widget’s page.
Every platform, and frameworks — including Google Tag Manager, React and Next.js.
What it is for
Walking a new user through the two or three things they have to do before your product does anything for them. Each screen carries one step and one button, so nobody is looking at a list of six things they have not done yet — which is the version of this that makes people close the tab.
When to use one
When setup has a real order to it. Connect, then configure, then invite — where skipping the first leaves the second broken. A walkthrough earns its interruption when the alternative is somebody deciding the product does not work, and it is worth nothing when the alternative is somebody simply getting on with it.
When not to use one
When your product needs no setup. A walkthrough laid over a page somebody could already use is an obstacle, and the only button they will press is the one that closes it. If there is exactly one thing to do, say it once in a notification instead.
Questions
- How many steps can it have?
- As many screens as the walkthrough needs, though three or four is where most stop being read. Each screen is edited on its own, with its own blocks and its own buttons.
- Can somebody skip it?
- Yes, unless you say otherwise. A widget nobody can close is a widget that traps the page it is on, so closing is the default.
- Does it work on a phone?
- Yes. One step per screen is the shape that survives a small screen best — it is a list of six that stops fitting.