Free scanFree scan

Install guide · App, not in the store yet

Add the visitor toolbar to a Shopify store

By Published

How to add the visitor toolbar to Shopify. The toolbar lets a visitor change how your pages look and read for themselves; it fixes nothing in your site, does not change whether it meets WCAG or the BFSG, and our scans never see it.

Before you start

  • Your site key. It is in the Reviseberg dashboard, under Settings › Visitor toolbar, on the Install tab. In the steps below it is written YOUR-SITE-KEY.
  • Switch the toolbar on for your site on the same screen. Until it is on, the tag loads and shows nothing.
  • What the platform needs: any theme for the route below; a theme built on Online Store 2.0 for the app embed, once the app is in the store.

Download

The package is reviseberg-toolbar-shopify-1.0.0.zip. It is not listed in any platform’s store yet: you install it from this download.

Download for Shopify (version 1.0.0)

The code

Replace YOUR-SITE-KEY with your key. The dashboard shows the same tag with your key already in it.

<script src="https://reviseberg.com/widget/v1.js" data-site-key="YOUR-SITE-KEY" defer></script>

Steps

  1. In the Shopify admin, go to Online Store › Themes. Next to your current theme, open the ⋯ menu and choose Edit code.
  2. Under Layout, open theme.liquid.
  3. Paste the tag just before the closing </body> tag, replace YOUR-SITE-KEY with your key, and click Save.

Good to know

A Reviseberg app for Shopify is built, but it is not in the Shopify App Store yet. Once it is, the toolbar is switched on under Online Store › Themes › Customize › App embeds, without editing code; take the tag out of theme.liquid then.

The change belongs to the theme you edited. If you switch to another theme, add the tag there as well.

Shopify’s checkout does not use theme.liquid, so the toolbar stays off the checkout.

The download above is the app’s source, for a Shopify partner who deploys it as a custom app. A shop owner following these steps does not need it.

Check that it works

  • Open a page of your site in a private window — not in the platform’s editor or preview, where most plugins leave the tag out on purpose.
  • View the page source, or search the developer tools’ Elements panel, for widget/v1.js. There should be exactly one tag, with your key.
  • The toolbar’s button appears once the toolbar is switched on in the dashboard. On the same screen, “Last seen on your site” says when the tag last loaded on one of your pages.
  • No button? The browser console has a line beginning “Reviseberg toolbar:” that says why — a key with the wrong shape, for example, or the tag on the page twice.
  • The toolbar answers only on the addresses allowed under Settings › Visitor toolbar; your site’s own address always is. Add a staging address there before you test on it.

More