Installationsanleitung · App, noch nicht im Store

Besucher-Toolbar in einen Shopify-Shop einbinden

So binden Sie die Besucher-Toolbar in Shopify ein. Mit der Toolbar passen Besucher an, wie Ihre Seiten für sie selbst aussehen und sich lesen lassen. Sie behebt nichts an Ihrer Website, ändert nichts daran, ob sie WCAG oder BFSG erfüllt, und unsere Scans sehen sie nie.

Bevor Sie anfangen

  • Ihr Website-Schlüssel. Sie finden ihn im Reviseberg-Dashboard unter Settings › Visitor toolbar, im Tab Install. In den Schritten unten steht dafür YOUR-SITE-KEY.
  • Schalten Sie die Toolbar auf derselben Seite für Ihre Website ein. Solange sie aus ist, lädt das Tag, zeigt aber nichts an.
  • Was die Plattform voraussetzt: für den Weg unten jedes Theme; für das App-Embed, sobald die App im Store ist, ein Theme auf Basis von Online Store 2.0.

Download

Das Paket heißt reviseberg-toolbar-shopify-1.0.0.zip. Es ist noch in keinem Store einer Plattform gelistet: Sie installieren es aus diesem Download.

Download für Shopify (Version 1.0.0)

Der Code

Ersetzen Sie YOUR-SITE-KEY durch Ihren Schlüssel. Im Dashboard steht dasselbe Tag mit Ihrem Schlüssel schon darin.

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

Schritte

  1. Gehen Sie im Shopify-Adminbereich zu Onlineshop › Themes. Öffnen Sie beim aktuellen Theme das Menü ⋯ und wählen Sie Code bearbeiten.
  2. Öffnen Sie unter Layout die Datei theme.liquid.
  3. Fügen Sie das Tag direkt vor dem schließenden </body>-Tag ein, ersetzen Sie YOUR-SITE-KEY durch Ihren Schlüssel und klicken Sie auf Speichern.

Gut zu wissen

Eine Reviseberg-App für Shopify ist gebaut, aber noch nicht im Shopify App Store. Sobald sie dort ist, schalten Sie die Toolbar unter Onlineshop › Themes › Anpassen › App-Embeds ein, ohne Code zu bearbeiten – und nehmen das Tag dann wieder aus theme.liquid.

Die Änderung gehört zu dem Theme, das Sie bearbeitet haben. Wechseln Sie das Theme, fügen Sie das Tag dort ebenfalls ein.

Der Shopify-Checkout verwendet theme.liquid nicht; dort erscheint die Toolbar also nicht.

Der Download oben ist der Quellcode der App – für Shopify-Partner, die sie als individuelle App bereitstellen. Wer diesen Schritten folgt, braucht ihn nicht.

Prüfen, ob es funktioniert

  • Öffnen Sie eine Seite Ihrer Website in einem privaten Fenster – nicht im Editor oder in der Vorschau der Plattform, wo die meisten Plugins das Tag absichtlich weglassen.
  • Suchen Sie im Seitenquelltext oder im Elemente-Bereich der Entwicklertools nach widget/v1.js. Es sollte genau ein Tag geben, mit Ihrem Schlüssel.
  • Die Schaltfläche der Toolbar erscheint, sobald die Toolbar im Dashboard eingeschaltet ist. Auf derselben Seite steht unter „Last seen on your site“, wann das Tag zuletzt auf einer Ihrer Seiten geladen wurde.
  • Keine Schaltfläche? In der Browserkonsole steht eine Zeile, die mit „Reviseberg toolbar:“ beginnt und den Grund nennt – etwa einen Schlüssel in der falschen Form oder das Tag doppelt auf der Seite.
  • Die Toolbar antwortet nur auf den Adressen, die unter Settings › Visitor toolbar erlaubt sind; die Adresse Ihrer Website ist es immer. Tragen Sie eine Staging-Adresse dort ein, bevor Sie darauf testen.

Weiter