Füge deine Dokumentenbibliothek zu Shopify hinzu

Document Library Pro ist als Shopify-App verfügbar, sodass du deinem Shop eine durchsuchbare, filterbare Dokumentbibliothek hinzufügen kannst, ohne Einbettungscodes zu verwenden. Die App erstellt automatisch eine Hauptseite „Dokumente“, die alle deine Dokumente auflistet und die du zu deinem Shop-Menü hinzufügen kannst, und sie bietet eine einfache Möglichkeit, Dokumentbibliotheken in andere Seiten und Produkte einzufügen.

Eine Document Library Pro-Bibliothek, angezeigt auf einer Shopify-Storefront-Seite mit Kategoriefilter, Suchfeld und Download-Schaltflächen

Die App installieren

  1. Suche im Shopify App Store nach Document Library Pro und öffne den Eintrag.
  2. Klicken App hinzufügen, dann Installierenund bestätige die angeforderten Berechtigungen.
  3. Wähle einen Tarif, um deine 14-tägige kostenlose Testphase zu starten. Dein Abonnement wird sicher über Shopify abgerechnet, und du kannst den Tarif jederzeit ändern. Wenn du vor Ablauf der Testphase kündigst, wird dir nichts berechnet.

Wo du deine Bibliothek verwaltest

Deine Dokumente und Bibliotheken befinden sich auf der Document Library Pro-Plattform unter documentlibrary.app, und dort verwaltest du sie. Die Aufgabe der Shopify-App besteht darin, diese Bibliotheken mit deinem Shop zu verbinden und ihre Anzeige zu erleichtern.

Du benötigst keinen separaten Login. Öffne Document Library Pro im Apps Bereich deines Shopify-Admins, und du gelangst direkt und bereits angemeldet in dein Document Library Pro-Konto. Von dort aus kannst du:

  • Dokumente hinzufügen und bearbeitenund sie in Kategorien, Schlagwörter und Autoren einsortieren.
  • Weitere Bibliotheken erstellen die eine bestimmte Gruppe von Dokumenten auflisten, zum Beispiel die Dokumente für ein Produkt.
  • Ändere das Darstellung und Einstellungen, etwa Spalten, Suche und Filter.

Wann immer du deine Dokumente oder deine Bibliothek ändern musst, öffne die App über das Apps-Menü und nimm deine Änderungen auf der Plattform vor. Eine vollständige Anleitung findest du unter Dokumente zu deiner Dokumentenbibliothek hinzufügen und eine Bibliothek mit dem Library Builder erstellen. Im restlichen Artikel erfährst du alle Möglichkeiten, um eine Bibliothek in deinem Shop anzuzeigen.

Du kannst auch zusätzliche Bibliotheken erstellen, die jeweils einen anderen Dokumentensatz auflisten, und sie in bestimmte Seiten, Produkte und deine Theme-Vorlagen einfügen. Dieser Leitfaden behandelt jede Option.

Hinweis: Die ersten drei Optionen auf dieser Seite funktionieren nur, wenn du die Document Library Pro Shopify-App verwendest. Wenn du Document Library Pro direkt auf dieser Website gekauft hast, ohne die Shopify-App zu installieren, kannst du nur die Einbettungscode-Methode.

Füge deine Dokumente-Seite zum Shop-Menü hinzu

Die App erstellt eine fertige Seite namens Dokumente die alle deine Dokumente auflistet. So füge einen Link in deine Shop-Navigation ein:

  1. Gehe in deinem Shopify-Admin zu Inhalt → Menüs.
  2. Öffne das gewünschte Menü (z. B. Dein Hauptmenü) und klicke auf Menüpunkt hinzufügen.
  3. Im Link nach der Seite und wähle sie aus. Dokumente Seite.
  4. Gib ihr einen Namen wie “Dokumente” und klicke auf Menü speichern.
Auswahl der Dokumente-Seite beim Hinzufügen zu einem Shopify-Shop-Menü

Die Dokumentenseite ist eine normale Shopify-Seite, sodass du die volle Kontrolle darüber hast. Unter Onlineshop → Seiten kannst du sie umbenennen und eigenen Text sowie Bilder ober- oder unterhalb der Bibliothek hinzufügen, z. B. eine kurze Einleitung. Wenn du Dokumente nur auf bestimmten Produkten anzeigen möchtest und keine zentrale Bibliotheksseite benötigst, kannst du die Dokumentenseite einfach löschen.

Bearbeiten der automatisch erstellten Dokumente-Seite im Shopify-Admin

Zusätzliche Bibliotheken erstellen

Neben deiner Hauptseite Dokumente kannst du zusätzliche Bibliotheken erstellen, die jeweils einen anderen Dokumentensatz auf ihrer eigenen Bibliotheksseite auflisten. Das machst du über den Libraries Bereich des Document Library Pro-Admins.

Zum Beispiel möchtest du vielleicht mehrere Bibliotheken verwenden, um unterschiedliche Dokumente auf unterschiedlichen Produktseiten aufzulisten oder unterschiedliche Bibliotheken in verschiedenen Bereichen deines Shops anzuzeigen. Sobald du deine zusätzlichen Bibliotheken erstellt hast, nutze die folgenden Methoden, um sie den relevanten Bereichen deines Shops hinzuzufügen.

Eine Bibliothek zu einem Produkt hinzufügen

So fügst du eine Bibliothek zu einem Produkt hinzu:

  1. Öffne das Produkt, dem du eine Bibliothek hinzufügen möchtest.
  2. Klicken Weitere Aktionen oben rechts, dann Dokumentbibliothek einfügen.
  3. Wähle aus, welche Bibliothek hinzugefügt werden soll, und klicke dann auf Einfügen.
Öffnen von Dokumentbibliothek einfügen aus dem Menü Weitere Aktionen im Shopify-Produkteditor

Die Bibliothek wird der Produktbeschreibung hinzugefügt und erscheint sofort in deinem Storefront. Du musst nichts weiter einschalten.

Eine Bibliothek zu einer Seite hinzufügen? Verwende das Einbettungscode-Methode unten.

Welche Bibliothek wird hinzugefügt: Standardmäßig wird dadurch eine Bibliothek eingefügt, die alle deine Dokumente auflistet. Wenn du zusätzliche Bibliotheken erstellt hast, erscheinen diese ebenfalls in der Liste, damit du sie auswählen kannst.

Auswählen, welche Dokumentbibliothek in ein Shopify-Produkt eingefügt werden soll

Auf jedem Produkt eine andere Bibliothek anzeigen

Du kannst auf jedem Produkt eine andere Bibliothek anzeigen. Füge die gewünschte Bibliothek mit den obigen Schritten in jedes Produkt ein. Du könntest beispielsweise für jedes Produkt eine separate Bibliothek mit Datenblättern erstellen und diese auf der jeweiligen Produktseite einfügen.

Die Bibliothek innerhalb der Beschreibung verschieben

Die Bibliothek wird immer am Ende der Beschreibung hinzugefügt. So verschiebe sie an eine andere Stelle:

  1. Klicke im Beschreibungseditor auf die Schaltfläche für die Code-Ansicht (<>) in der Symbolleiste.
  2. Finde den <iframe>...</iframe> Block, der sich ganz am Ende des Codes befindet.
  3. Schneide ihn aus und füge ihn dort ein, wo die Bibliothek in deinem Inhalt erscheinen soll, und speichere dann.

Die Document Library-Karte hinzufügen

Um Dokumentenbibliotheken einfacher zu Produkten hinzuzufügen, kannst du auch eine Document Library-Karte direkt auf dem Produktbearbeitungsbildschirm hinzufügen, damit du nicht jedes Mal das Mehr-Aktionen-Menü öffnen musst. Wir empfehlen, Anheften (das Anheften-Symbol auf der Karte), damit sie auf dem Bearbeitungsbildschirm jedes Produkts erscheint, nicht nur bei einem. Die Karte erscheint im Blocks Abschnitt am unteren Ende des Bearbeitungsbildschirms. Shopify platziert App-Karten dort, daher kann er nicht weiter oben auf der Seite verschoben werden.

Zum Blocks Bereich unten in einem Produkt, klicke auf Block hinzufügen, wähle Document Library-Karteauswählen und anheften.

Hinzufügen des Kartenblocks Dokumentbibliothek im Shopify-Produkteditor
Die Karte Dokumentbibliothek im Shopify-Produkteditor mit Bibliotheks-Dropdown und Einfügen-Schaltfläche

Eine Bibliothek zu einer Theme-Vorlage hinzufügen

Wenn du eine Dokumentbibliothek an einer festen Stelle in deinem Theme hinzufügen möchtest statt innerhalb einer Produkt- oder Seitenbeschreibung, zum Beispiel unter der Schaltfläche In den Warenkorb, kannst du sie als Theme-Block hinzufügen:

  1. Gehe zu Onlineshop → Themes und klicke auf Anpassen.
  2. Öffne das gewünschte Template (z. B. das Produkt-Template), klicke in dem Abschnitt, in dem die Bibliothek erscheinen soll, auf Block hinzufügen und wähle den Block Dokumentenbibliothek aus.
  3. Standardmäßig werden alle deine Dokumente aufgelistet. Um stattdessen eine bestimmte Bibliothek anzuzeigen, wähle eine aus dem Library Dropdown und speichere dann.
Document Library Shopify-App-Theme-Block

Da ein Theme-Block im Template platziert wird, zeigt er auf jedem Produkt oder jeder Seite, die dieses Template verwendet, die gleiche Bibliothek auf jedem Produkt oder jeder Seite, die diese Vorlage verwendet. Um eine andere Bibliothek anzuzeigen, verwende die oben beschriebene Einfüge-Methode, die die Bibliothek nur zu diesem einen Produkt hinzufügt.

Einbettungscode verwenden, um Bibliotheken überall hinzuzufügen

Jede Bibliothek hat einen Einbettungscode (ein <iframe>). Du kannst ihn überall einfügen, wo du HTML hinzufügen kannst. Das ist die richtige Methode, wenn du Document Library Pro ohne die Shopify-App verwendest oder wenn du eine Bibliothek an einer Stelle platzieren möchtest, die die obigen Schritte nicht abdecken.

Um deinen Einbettungscode zu erhalten, öffne zuerst die Publish Library Seite in deinem Document Library Pro-Dashboard und kopiere den Einbettungscode für die relevante Bibliothek. (Wenn du die Bibliothek, die du einbetten möchtest, noch nicht erstellt hast, kannst du das auf der Seite Bibliotheken tun.)

    Bette eine Dokumentbibliothek mit iframe-Code in beliebige Websites ein.

    Füge den Einbettungscode anschließend in eine der folgenden Stellen ein:

    • Eine Produktbeschreibung: Öffne das Produkt, klicke auf die Codeansicht-Schaltfläche (<>) und füge den Einbettungscode an der gewünschten Stelle ein.
    • Eine Seite: Gehe zu Onlineshop → SeitenÖffnen oder erstelle eine Seite, klicke in der Inhaltsleiste auf die Code-Ansicht-Schaltfläche (<>) und füge den Einbettungscode ein.
    • Ein Theme-Bereich: in Onlineshop → Themes → Anpassen, füge einen Custom Liquid Block zu einem Abschnitt hinzu und füge den Einbettungscode ein.
    • Jede andere Website: Derselbe Einbettungscode funktioniert auf jeder Website, nicht nur auf Shopify.
    Einfügen eines Einbettungscodes für eine Dokumentbibliothek in die Codeansicht einer Shopify-Seite

    Wenn der Einbettungscode verschwunden aussieht

    Nachdem du den Einbettungscode in Shopify eingefügt hast, kann es so aussehen, als wäre die Bibliothek verschwunden. Sie ist nicht verschwunden. Die Seiten- und Produktbeschreibungseditoren von Shopify zeigen eine eingebettete Bibliothek im visuellen Tab nicht an, deshalb kann der Bereich leer aussehen, obwohl der Code korrekt gespeichert wurde.

    Achte darauf, den Einbettungscode über den Button für die Codeansicht einzufügen, angezeigt als <> in der Editor-Symbolleiste. Das Eintippen oder Einfügen im visuellen Tab funktioniert nicht. Sieh dir nach dem Speichern die Seite in deinem Live-Storefront an, um die Bibliothek zu sehen.

    Unser Einbettungscode besteht aus zwei Teilen: einem <iframe>, und einem kleinen Skript darunter, mit dem die Bibliothek ihre Größe an ihren Inhalt anpassen kann. Der Shopify-Editor behält das <iframe> bei und entfernt das Skript. Das bedeutet, dass die Bibliothek auf der Höhe bleibt, die im <iframe> festgelegt ist, statt passend mitzuwachsen. Du kannst den Höhenwert im style-Attribut bearbeiten, zum Beispiel height:600px, damit er zu deiner Bibliothek passt.

    Wenn du möchtest, dass die Bibliothek ihre Größe selbst anpasst, verwende eine der app-eigenen Optionen, die weiter oben auf dieser Seite beschrieben werden: die fertige Dokumente-Seite, die Option zum Einfügen einer Dokumentbibliothek bei einem Produkt oder den Document Library-Theme-Block.

    Verwandte Artikel

    Bereit, deine Dokumente in eine durchsuchbare Bibliothek zu packen?

    Richte deine erste Bibliothek in wenigen Minuten ein - als WordPress-Plugin, eingebettet auf einer beliebigen Website oder als eigene gehostete Bibliothek.

    Kostenlos starten

    14 Tage kostenlos Jederzeit kündbar