plugilo Shopify App: Installation & Setup Guide

Teil 1: Installation und Grundeinrichtung

1. Find the App: Search for the "plugilo" app in the Shopify App Store or navigate directly to https://apps.shopify.com/plugilo-plugin

2. Installieren: Klicken Sie auf die Schaltfläche "Installieren“, um die App zu Ihrem Shopify-Shop hinzuzufügen.

3. Kernfunktionen aktivieren: Öffnen Sie nach der Installation die Einstellungen der plugilo-App und suchen Sie die Kernoptionen:

Klicken Sie hier, um das plugilo-Core-Skript zu aktivieren

Schalte das plugilo Dock ein.

4. Anpassen (optional): Passen Sie die gewünschten Einstellungen, wie z. B. Beschriftungen oder Schaltflächenfarben, an das Erscheinungsbild Ihres Shops an.

5. Speichern: Klicken Sie auf „Speichern“, um Ihre Änderungen zu übernehmen.

Teil 2: Einfügen der Plugilo-Schaltfläche in Produktdetailseiten

Um die Plugilo-Schaltfläche auf einzelnen Produktseiten anzuzeigen, müssen Sie sie als Block in Ihrem Theme-Editor hinzufügen.

1. Öffnen Sie den Theme-Editor: Gehen Sie in Ihrem Shopify-Adminbereich zu „Online-Shop“ > „Themes“ und klicken Sie bei Ihrem aktuellen Theme auf „Anpassen“.

2. Zu einer Produktseite navigieren: Verwenden Sie das Dropdown-Menü oben im Editor, um zu „Produkte > Standardprodukt“ zu navigieren (oder wählen Sie ein beliebiges Produkt aus).

3. App-Block hinzufügen: Klicken Sie in der linken Seitenleiste unter dem Abschnitt „Produktinformationen“ auf "Block hinzufügen“.

4. Wählen Sie „plugilo“ aus: Wählen Sie in der Kategorie „Apps“ den Produktinformationsblock zu „plugilo“ aus.

5. Positionieren und speichern: Ziehe den Block an die gewünschte Stelle auf der Seite, passe gegebenenfalls die Block-Einstellungen an und klicke oben rechts auf „Speichern“.

Teil 3: Hinzufügen der Plugilo-Schaltfläche zu Produktübersichten (z. B. „Empfohlene Produkte“)

Das Plugilo-Plugin funktioniert bei den meisten gängigen Themes einwandfrei. Um jedoch sicherzustellen, dass Plugilo auf allen Arten von Benutzeroberflächen (Themes) einwandfrei funktioniert, bieten wir die Selektor-Einstellungen (Erweiterte Einstellungen) an. Diese Einstellung hilft der Anwendung dabei, genau zu bestimmen, wo das Plugit-Symbol auf Produktlistenseiten (Kollektionsseiten, Suchseiten usw.) angezeigt werden soll.

Im Folgenden finden Sie eine ausführliche Anleitung, die Ihnen dabei hilft, diese Parameter korrekt zu konfigurieren.

• Kurzanleitung:
  • App-Einstellungen öffnen: Gehe zu "Apps“ > "plugilo" > "Einstellungen“ > "plugit Trigger Collection“.
  • Einstellungen suchen: Scrollen Sie nach unten zu den Konfigurationssätzen unter "Angebot“.
  • Raster auswählen: Geben Sie die spezifische CSS-Klasse oder ID der Produktlistenelemente aus Ihrem Theme ein.
  • Speichern: Klicken Sie auf „Einstellungen speichern“, um die Symbole auf Ihre Produktraster anzuwenden.
  • Überprüfen Sie: Kehren Sie zu Ihrer Website zurück und aktualisieren Sie die Seite (F5), um zu sehen, ob das Plugit-Symbol an der richtigen Stelle angezeigt wird.
• Bedeutung der 4 Auswahlfelder In jedem Konfigurationssatz (Liste) sehen Sie 4 Felder, die ausgefüllt werden müssen:
  • Product Grid Container Selector:
    • Bedeutung: Die Klasse oder ID, die das gesamte Produktraster umschließt.
    • Examples: #ProductGridContainer, .collection-grid, .products-list
  • Produkt-Auswahl:
    • Bedeutung: Der Rahmen, der jedes einzelne Produkt im Raster umgibt.
    • Examples: .grid__item, .product-card, .col-md-4
  • plugit Save Trigger Selector:
    • Bedeutung: Die genaue Stelle innerhalb jedes Produkts, an der das Plugit-Symbol angezeigt werden soll (in der Regel neben dem Preis oder dem Produktnamen).
    • Examples: .price, .product-item__title, .product-info
  • Produkt-Auswahlhilfe:
    • Bedeutung: Das Tag, das den Link zur Produktseite enthält.
    • Examples: .card__heading a, a.product-link, h3 > a
• So finden Sie den richtigen Selektor (mit "Element inspizieren“)
  Dazu müssen Sie kein Entwickler sein. Befolgen Sie einfach diese Schritte:
  • Schritt 1: Öffnen Sie eine Kollektionsseite in Ihrem Shop.
  • Schritt 2: Klicken Sie mit der rechten Maustaste auf ein Produkt und wählen Sie "Prüfen“.
  • Schritt 3: Das Quellcodefenster wird angezeigt. Achten Sie auf Folgendes:
    • Suchen Sie das Tag, das das gesamte Produktraster umschließt -> kopieren Sie dessen ID oder Klasse (z. B. #ProductGridContainer, .slider-mobile-gutter).
    • Finde den Tag, der dieses einzelne Produkt umschließt -> kopiere dessen Klasse (eg: .grid__item).
    • Suche nach bestimmten Stellen innerhalb jedes Produkts (e.g., .price or .card-information)
    • Suche das < 1 >-Tag, das den Produktlink enthält -> kopiere dessen Klasse (e.g., .card__heading a).
  • Schritt 4: Übertragen Sie diese Werte in die entsprechenden Felder auf der Plugilo-Einstellungsseite.

• Mehrere „Listings" verwenden (Add More Listing)
  Mit plugilo können Sie bis zu 8 Konfigurationssätze hinzufügen. Das ist besonders nützlich, wenn:
  • Ihre Sammlungsseite ist anders aufgebaut als Ihre Suchseite.
  • Sie haben unten auf der Seite einen Bereich „Ähnliche Produkte“ und möchten dort auch die Plugit-Schaltfläche anzeigen.
  • Jeder „Eintrag“ entspricht einem anderen Produktbereich auf Ihrer Website

Teil 4: Einstellung für Preisschild und „In den Warenkorb“-Button

1. Preis-Badge – Kurzanleitung
   Mit dem Preis-Badge können Sie direkt auf Ihren Produktkarten ein stilvoll gestaltetes Preisschild anzeigen.

So richten Sie es ein

• Go to plugilo → Design UI → Price Badge
• Nehmen Sie folgende Einstellungen vor:
  • Textgröße: Schriftgröße anpassen
  • Hintergrundtransparenz: Transparenz des Badges anpassen
  • Textfarbe: Farbe des Preistextes festlegen
  • Hintergrundfarbe: Wähle die Farbe des Abzeichens
  • Erweitertes benutzerdefiniertes CSS (optional). Fügen Sie benutzerdefinierte Formatierungen hinzu (e.g., font-family, weight)

Additional Settings

• Price Cache Expiration: Legen Sie fest, wie oft (in Sekunden) der Preis aktualisiert wird (Standard: 1800)
• Preisanzeige für Gäste ausblenden: Wählen Sie „Ja“, um die Preise für nicht angemeldete Benutzer auszublenden

Letzter Schritt: Klicken Sie auf „Einstellungen speichern“, um die Änderungen zu übernehmen.
2. Schaltfläche „In den Warenkorb“ – Kurzanleitung
Über die Schaltfläche „In den Warenkorb“ können Kunden Produkte direkt von den Produktkarten aus schnell kaufen.
Einrichtung
Gehen Sie zu plugilo → Design UI → Schaltfläche „In den Warenkorb“ anpassen

• Icon Style: Choose cart icon design
• Schaltflächentext:
  • Beispiel: "Jetzt kaufen“
  • Leer lassen, um nur das Symbol anzuzeigen
• Hintergrundfarbe: Farbe der Schaltfläche festlegen
• Text Color: Set label color

Vorschau

• Verwenden Sie das Live-Vorschau-Fenster, um Änderungen sofort zu sehen.
• Klicken Sie auf „Einstellungen speichern“, um die Änderungen zu übernehmen

Teil 5: Kampagneneinstellungen

Über die Kampagneneinstellungen können Sie Plugilo-Widgets (wie die Seitenleiste oder den Ticker) hinzufügen. Präsentieren Sie ausgewählte Produkte an den von Ihren Kunden bevorzugten Stellen, um die Interaktion auf Ihrer Website zu steigern.

1. Kurzanleitung
   • App-Einstellungen öffnen: Gehe zu "Apps“ > "plugilo“ > "Einstellungen“ > "Kampagneneinstellungen“.
   • Funktionen suchen: Suchen Sie die Optionen „Seitenleiste aktivieren“ und „Ticker aktivieren“.
   • Einbettungscode: Fügen Sie Ihren individuellen Plugilo-Iframe-Code in das Feld „Einbettungscode“ ein.
   • Speichern: Klicken Sie auf „Einstellungen speichern“, um die Widgets in Ihrem Shop zu aktivieren.
   • Überprüfen Sie es: Kehren Sie zu Ihrer Website zurück und aktualisieren Sie die Seite (F5), um das Ergebnis zu sehen.
2. Bedeutung der Einstellungen
   • Seitenleiste aktivieren:
     • Option: Wählen Sie „Ja“, um die plugilo-Seitenleiste auf Ihrer Website zu aktivieren, oder „Nein“, um sie vorübergehend auszublenden.
     • Hinweis: Wenn Sie die Seitenleiste aktivieren, stellen Sie bitte sicher, dass Sie den richtigen Einbettungscode in den Abschnitt „Einbettungscode“ unten eingefügt haben.
   • Ticker aktivieren:
     • Option: Wählen Sie „Ja“, um die Ticker-Leiste auf Ihrer Website anzuzeigen.
     • Hinweis: Ähnlich wie bei der Seitenleiste benötigt diese Funktion einen gültigen Einbettungscode, um zu funktionieren.
   • Einbettungscode:
     • Bedeutung: Dies ist der Codeausschnitt, der Ihren Shopify-Shop mit den Einstellungen verknüpft, die Sie im plugilo-Dashboard (plugiloinc.com) erstellt haben.
     • Format: Der Einbettungscode muss mit einem <iframe... tag.="">