So fügen Sie Koalendar zu Shopify hinzu

Lassen Sie Kunden Termine buchen, ohne Ihren Shopify-Shop zu verlassen. Dazu sind nur zwei schnelle Schritte erforderlich:

Kopieren Sie Ihren Koalendar-Einbettungscode (oder Link)
Fügen Sie es in den Bereich „Custom Liquid/HTML“ von Shopify ein und speichern Sie es.

📑 Menü

Schritt 1 – Kopieren Sie Ihren Koalendar-Einbettungscode
Schritt 2 – In Shopify hinzufügen
Fehlerbehebung
Welchen Stil soll ich verwenden?

📋 Schritt 1 – Kopieren Sie Ihren Koalendar-Einbettungscode

Klicken Sie im Koalendar-Dashboard neben der gewünschten Buchungsseite auf „Teilen “.
Wählen Sie „Zur Website hinzufügen“.
Wählen Sie einen Einbettungsstil aus und klicken Sie auf „Code kopieren“.

Einbettungsstil	Was Käufer sehen
Inline-Einbettung 🖥️	Der vollständige Kalender wird direkt auf der Produkt-/Seite angezeigt.
Popup-Widget 📍	Schwimmender „Jetzt buchen“-Button, der den Kalender in einem Pop-up-Fenster öffnet.
Popup-Text/Schaltfläche 🔗	Jeder Link oder jede Schaltfläche löst ein Popup-Kalenderfenster aus.

🎨 Tipp: Passen Sie Farben, Text und Position in Koalendar vor dem Kopieren an, damit es zum Thema Ihres Shops passt.

➕ Benötigen Sie nur einen normalen Link? Kopieren Sie Ihre Koalendar-Freigabe-URL und verknüpfen Sie eine beliebige Schaltfläche oder einen Menüpunkt, um den Terminplaner in einem neuen Tab zu öffnen.

📝 Schritt 2 – In Shopify hinzufügen

A. Inline-Einbettung oder Popup-Text/Schaltfläche (Seite oder Abschnitt)

Gehen Sie im Shopify-Adminbereich zu „Online-Shop“ → „Themes “ und klicken Sie bei Ihrem veröffentlichten Theme auf „Anpassen “.
Navigieren Sie zu der Seite oder Vorlage, auf der Sie den Kalender einfügen möchten.
Klicken Sie auf „Abschnitt hinzufügen” (oder „Block hinzufügen”) und wählen Sie „Benutzerdefiniertes Liquid ” (oder „Benutzerdefiniertes HTML” für ältere Designs).
Fügen Sie Ihren Koalendar-Code in das Textfeld ein.
Speichern und dann Vorschau anzeigen– der Kalender oder Popup-Trigger sollte sofort geladen werden.

B. Popup-Widget (siteweite schwebende Schaltfläche)

Online-Shop → Themen → Aktionen (... Schaltfläche) → Code bearbeiten.
Öffnen Sie layout/theme.liquid (oder theme.liquid in neueren Designs).
Scrollen Sie nach unten und fügen Sie Ihr Koalendar-Widget-Skript ein. kurz vor ************</body> .
Speichern. Die schwebende Schaltfläche wird nun in Ihrem Shop angezeigt.

📝 Einige Themes bieten ein Feld „Theme-Einstellungen → Benutzerdefinierte Skripte “. Sie können das Widget-Skript dort einfügen, anstatt den Code zu bearbeiten.

🛠️ Fehlerbehebung

Problem	Beheben
Kalender/Widget wird nicht angezeigt	Stellen Sie sicher, dass Sie das vollständige Skript eingefügt und das Theme gespeichert haben. Leeren Sie den Browser-Cache und laden Sie die Seite neu.
Popup-Link wird angezeigt, lässt sich aber nicht öffnen	Stellen Sie sicher, dass sich sowohl das Trigger-Snippet als auch das Koalendar-Skript auf derselben Seite/Vorlage befinden.
Widget auf jeder Seite, aber Sie möchten es nur auf einer Seite	Fügen Sie den Einbettungscode auf dieser bestimmten Seite ein, anstatt in theme.liquid.
Die Höhe des Kalenders sieht seltsam aus.	Passen Sie die Höhe in Koalendar an, bevor Sie den Code kopieren, oder umschließen Sie den Einbettungscode mit einem div-Tag mit benutzerdefiniertem CSS.

🤔 Welchen Stil soll ich verwenden?

Ziel	Beste Methode
Kalender innerhalb einer Produkt- oder Infoseite anzeigen	Inline-Einbettung 🖥️
Aufruf zum Handeln im gesamten Geschäft	Popup-Widget 📍
Zeitplan zu einem bestehenden CTA hinzufügen	Popup-Text/Schaltfläche 🔗
Einfacher externer Link	Hyperlink zu Ihrer Koalendar-URL