Wie installiert man ShareThis' Tools auf Shopify mit Javascript Code

If you would like to customize and manage your tools through the ShareThis Platform instead of using the ShareThis Shopify App, you can follow this steps:

  1. Log in or sign up to the ShareThis Plattform.
  2. Add your domain.
  3. Copy your unique <strong>ShareThis code</strong>. You can find your unique installation <script> code (i.e. <head> code) by navigating into Settings > Setup (in the ShareThis Plattform).
  4. Go to Apps. Enable the App you want to display in your website.
  5. Melden Sie sich bei Ihrer Shopify-Website an.
  6. Wählen Sie in der linken Navigationsleiste Online-Shop > Themen, und klicken Sie in der Dropdown-Liste Aktionen auf Code bearbeiten.
  7. Gehen Sie in den verschiedenen Dateien und Ordnern auf Layout und klicken Sie auf theme.liquid.
  8. <strong>Paste </strong>the unique ShareThis code that you copied from step 3 into the <head> section of your website.
  9. (Optional) If you are adding Inline tools, choose one of the following methods. Inline tools (Inline Share Buttons, Follow Buttons or Reactions Buttons) require an extra snippet of code to work on your site.
    1. Hinzufügen von Inline-Tools ShareThis auf einer Produktseite unter Verwendung eines benutzerdefinierten Flüssigkeitsblocks
    2. Hinzufügen von Inline-Tools ShareThis auf einer Produktseite durch Bearbeiten des Theme-Codes
    3. Hinzufügen von Inline ShareThis Tools auf einer Seite oder einem Blog

Bevor Sie Ihr Theme anpassen, sollten Sie immer zuerst eine Sicherungskopie erstellen, folgen Sie diese Anleitungen um das Thema für eine Sicherungskopie zu duplizieren, falls Sie die Änderungen rückgängig machen möchten.

1. Adding Inline ShareThis tools to your product page using a Custom Liquid Block

Sie können den Shopify-Theme-Editor verwenden, um eine visuelle Anleitung für die Platzierung des Inline-Schaltflächencodes zu erhalten. Obwohl nicht auf die Produktseite beschränkt, können Sie diesen Anweisungen und dem Video am Ende folgen, um den Code auf Ihrer Produktbeschreibung zu platzieren.

Note: Before customizing your theme, it’s always recommended to make a backup first, follow diese Anleitungen um das Thema für eine Sicherungskopie zu duplizieren, falls Sie die Änderungen rückgängig machen möchten.

  1. Gehen Sie zu Ihrem Online Store Dashboard.
  2. Klicken Sie auf Themes und dann auf das grüne button mit der Aufschrift Customize.
  3. Navigieren Sie zu der Seite, auf der die Schaltflächen erscheinen sollen, indem Sie auf die Live-Vorschau klicken.
  4. Bewegen Sie die Maus an die Stelle, an der Sie die Schaltflächen einfügen möchten. Es erscheint ein kleines blaues button mit der Aufschrift Abschnitt hinzufügen.
  5. Wählen Sie Benutzerdefinierte Flüssigkeit aus der Liste.
  6. Kopieren Sie den entsprechenden Platzierungscode und fügen Sie ihn in der linken Seitenleiste ein, die soeben erschienen ist.
    1. Share Buttons Platzierungscode:
    2. Buttons folgen Platzierungscode
    3. Reaction Buttons placement code
  7. Klicken Sie auf Speichern in der oberen rechten Ecke.

Zu Ihrer Erleichterung finden Sie hier eine Vorschau:

2. Adding Inline ShareThis tools to your product page by editing the Theme Code

  1. Wählen Sie in der linken Navigationsleiste Online-Shop > Themen und klicken Sie dann auf Aktionen > Code bearbeiten.
  2. Scrollen Sie in der linken Seitenleiste zum Ordner Sections und wählen Sie main-product.liquid (wenn Sie ein älteres Theme verwenden, gehen Sie zu Templates und suchen Sie die Datei product.liquid ). Suchen Sie dann den folgenden Code:
    {{ product.description }}
    Hinweis: Sie können Strg + F verwenden, um nach dem Wort "Beschreibung" zu suchen (klicken Sie bitte auf das Innere der Datei, damit Sie im Code-Editor nach dem Inhalt suchen können), versuchen Sie, die Schaltflächen in einer neuen Zeile nach dem Abschnitt oder den Zeilen mit diesem Namen zu platzieren. Ein Abschnitt/Element wird durch das Zeichen "}" am Ende abgegrenzt.

  3. Kopieren Sie den entsprechenden Platzierungscode und fügen Sie ihn über oder unter Ihrer Produktbeschreibung ein.
    1. Share Buttons Platzierungscode:
    2. Buttons folgen Platzierungscode
    3. Reaction Buttons placement code

Zu Ihrer Erleichterung finden Sie hier eine Vorschau:

3. Adding Inline ShareThis tools on a page or blog

  1. Wählen Sie in der linken Navigationsleiste Online-Shop > Seiten. Klicken Sie dann auf die Seite, auf der Sie Ihre Schaltflächen anzeigen möchten. 
  2. Klicken Sie im Abschnitt Inhalt auf die Schaltfläche HTML anzeigen <> button .
  3. Kopieren Sie den entsprechenden Platzierungscode und fügen Sie ihn an der Stelle ein, an der das Tool ShareThis erscheinen soll.
    1. Share Buttons Platzierungscode:
    2. Buttons folgen Platzierungscode
    3. Reaction Buttons placement code