Skip to content

Notification widget for Shopify

A card in the corner with a title, a line of text and a button.

Make one, freeOpens the editor with this one in it. No account needed to start.
yourshop.example

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

Pointing at one thing inside a product. A feature that shipped, a setting worth changing, a limit somebody is close to. It floats in a corner rather than interrupting, so it can wait for a good moment instead of taking one.

When to show it

After a delay, part-way down a scroll, or bound to a click on a button you already have. The last of those is the most useful and the least known: give the widget a CSS selector and it opens when somebody presses your own link, which makes it a panel you did not have to build.

When not to use one

On a marketing page. A card in the corner of a landing page reads as an advert and gets closed on sight, whatever it says — the visitor has decided before they have read it. If the message is for everybody who arrives, an announcement bar is the shape people accept from a site they do not know yet.

Questions

Can I open it from a button on my own site?
Yes. Give the trigger a CSS selector and the widget binds to whatever it matches on your page — a link, a button, anything already there.
Where on the page does it sit?
Any of the four corners, with an offset you choose. It stays where it is as the page scrolls.
How often will one person see it?
Whichever you pick: every time, once per session, once ever, or until they dismiss it. The count is kept in their browser rather than against a record of them.